diff --git a/.cursor/agents/pipeline-backend.md b/.cursor/agents/pipeline-backend.md
deleted file mode 100644
index 6b4ff99c..00000000
--- a/.cursor/agents/pipeline-backend.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-name: pipeline-backend
-description: Agent Pipeline 백엔드 전문가. Express + TypeScript + PostgreSQL Raw Query 기반 API 구현. 멀티테넌시(company_code) 필터링 필수.
-model: inherit
----
-
-# Role
-You are a Backend specialist for ERP-node project.
-Stack: Node.js + Express + TypeScript + PostgreSQL Raw Query.
-
-# CRITICAL PROJECT RULES
-
-## 1. Multi-tenancy (ABSOLUTE MUST!)
-- ALL queries MUST include company_code filter
-- Use req.user!.companyCode from auth middleware
-- NEVER trust client-sent company_code
-- Super Admin (company_code = "*") sees all data
-- Regular users CANNOT see company_code = "*" data
-
-## 2. Required Code Pattern
-```typescript
-const companyCode = req.user!.companyCode;
-if (companyCode === "*") {
-  query = "SELECT * FROM table ORDER BY company_code";
-} else {
-  query = "SELECT * FROM table WHERE company_code = $1 AND company_code != '*'";
-  params = [companyCode];
-}
-```
-
-## 3. Controller Structure
-```typescript
-import { Request, Response } from "express";
-import pool from "../config/database";
-import { logger } from "../config/logger";
-
-export const getList = async (req: Request, res: Response) => {
-  try {
-    const companyCode = req.user!.companyCode;
-    // ... company_code 분기 처리
-    const result = await pool.query(query, params);
-    res.json({ success: true, data: result.rows });
-  } catch (error: any) {
-    logger.error("조회 실패", error);
-    res.status(500).json({ success: false, message: error.message });
-  }
-};
-```
-
-## 4. Route Registration
-- backend-node/src/routes/index.ts에 import 추가 필수
-- authenticateToken 미들웨어 적용 필수
-
-# Your Domain
-- backend-node/src/controllers/
-- backend-node/src/services/
-- backend-node/src/routes/
-- backend-node/src/middleware/
-
-# Code Rules
-1. TypeScript strict mode
-2. Error handling with try/catch
-3. Comments in Korean
-4. Follow existing code patterns
-5. Use logger for important operations
-6. Parameter binding ($1, $2) for SQL injection prevention
diff --git a/.cursor/agents/pipeline-common-rules.md b/.cursor/agents/pipeline-common-rules.md
deleted file mode 100644
index 57049ce6..00000000
--- a/.cursor/agents/pipeline-common-rules.md
+++ /dev/null
@@ -1,182 +0,0 @@
-# WACE ERP 파이프라인 공통 룰 (모든 에이전트 필수 준수)
-
-## 1. 화면 유형 구분 (절대 규칙!)
-
-이 시스템은 **관리자 메뉴**와 **사용자 메뉴**가 완전히 다른 방식으로 동작한다.
-기능 구현 시 반드시 어느 유형인지 먼저 판단하라.
-
-### 관리자 메뉴 (Admin)
-- **구현 방식**: React 코드 기반 페이지 (`.tsx` 파일)
-- **경로**: `frontend/app/(main)/admin/{기능명}/page.tsx`
-- **메뉴 등록**: `menu_info` 테이블에 INSERT 필수 (코드만 만들고 메뉴 등록 안 하면 미완성!)
-- **대상**: 시스템 설정, 사용자 관리, 결재 관리, 코드 관리 등
-- **특징**: 하드코딩된 UI, 관리자만 접근
-
-### 사용자 메뉴 (User/Screen) - 절대 하드코딩 금지!!!
-- **구현 방식**: 로우코드 기반 (DB에 JSON으로 화면 구성 저장)
-- **데이터 저장**: `screen_layouts_v2` 테이블에 V2 JSON 형식 보관
-- **화면 디자이너**: 스크린 디자이너로 드래그앤드롭 구성
-- **V2 컴포넌트**: `frontend/lib/registry/components/v2-*` 디렉토리
-- **대상**: 일반 업무 화면, BOM, 문서 관리, 포장/적재, 금형 관리 등
-- **특징**: 코드 수정 없이 화면 구성 변경 가능
-- **절대 금지**: React `.tsx` 페이지 파일로 직접 UI를 하드코딩하는 것!
-
-### 판단 기준
-
-| 질문 | 관리자 메뉴 | 사용자 메뉴 |
-|------|-------------|-------------|
-| 누가 쓰나? | 시스템 관리자 | 일반 사용자 |
-| 화면 구조 고정? | 고정 (코드) | 유동적 (JSON) |
-| URL 패턴 | `/admin/*` | `/screen/{screen_code}` |
-| 메뉴 등록 | `menu_info` INSERT | `screen_definitions` + `menu_info` INSERT |
-| 프론트엔드 코드 | `frontend/app/(main)/admin/` 하위에 page.tsx 작성 | **코드 작성 금지!** DB에 스크린 정의만 등록 |
-
-### 사용자 메뉴 구현 방법 (반드시 이 방식으로!)
-
-**절대 규칙: 사용자 메뉴는 React 페이지(.tsx)를 직접 만들지 않는다!**
-이미 `/screen/[screenCode]/page.tsx` → `/screens/[screenId]/page.tsx` 렌더링 시스템이 존재한다.
-새 화면이 필요하면 DB에 등록만 하면 자동으로 렌더링된다.
-
-#### Step 1: screen_definitions에 화면 등록
-
-```sql
-INSERT INTO screen_definitions (screen_name, screen_code, table_name, company_code, is_active)
-VALUES ('포장/적재정보 관리', 'COMPANY_7_PKG', 'pkg_unit', 'COMPANY_7', 'Y')
-RETURNING screen_id;
-```
-
-- `screen_code`: `{company_code}_{기능약어}` 형식 (예: COMPANY_7_PKG)
-- `table_name`: 메인 테이블명 (V2 컴포넌트가 이 테이블 기준으로 동작)
-- `company_code`: 대상 회사 코드
-
-#### Step 2: screen_layouts_v2에 V2 레이아웃 JSON 등록
-
-```sql
-INSERT INTO screen_layouts_v2 (screen_id, company_code, layer_id, layer_name, layout_data)
-VALUES (
-  {screen_id},
-  'COMPANY_7',
-  1,
-  '기본 레이어',
-  '{
-    "version": "2.0",
-    "components": [
-      {
-        "id": "comp_split_1",
-        "url": "@/lib/registry/components/v2-split-panel-layout",
-        "position": {"x": 0, "y": 0},
-        "size": {"width": 1200, "height": 800},
-        "displayOrder": 0,
-        "overrides": {
-          "leftTitle": "포장단위 목록",
-          "rightTitle": "상세 정보",
-          "splitRatio": 40,
-          "leftTableName": "pkg_unit",
-          "rightTableName": "pkg_unit",
-          "tabs": [
-            {"id": "basic", "label": "기본정보"},
-            {"id": "items", "label": "매칭품목"}
-          ]
-        }
-      }
-    ]
-  }'::jsonb
-);
-```
-
-- V2 컴포넌트 목록: v2-split-panel-layout, v2-table-list, v2-table-search-widget, v2-repeater, v2-button-primary, v2-tabs-widget 등
-- 상세 컴포넌트 가이드: `.cursor/rules/component-development-guide.mdc` 참조
-
-#### Step 3: menu_info에 메뉴 등록
-
-```sql
--- 먼저 부모 메뉴 objid 조회
--- SELECT objid, menu_name_kor FROM menu_info WHERE company_code = '{회사코드}' AND menu_name_kor LIKE '%물류%';
-
-INSERT INTO menu_info (objid, menu_type, parent_obj_id, menu_name_kor, seq, menu_url, screen_code, company_code, status)
-VALUES (
-  (SELECT COALESCE(MAX(objid), 0) + 1 FROM menu_info),
-  2,                          -- 2 = 메뉴 항목
-  {부모_objid},               -- 상위 메뉴의 objid
-  '포장/적재정보',
-  10,                         -- 정렬 순서
-  '/screen/COMPANY_7_PKG',   -- /screen/{screen_code} 형식 (절대!)
-  'COMPANY_7_PKG',           -- screen_definitions.screen_code와 일치
-  'COMPANY_7',
-  'Y'
-);
-```
-
-**핵심**: `menu_url`은 반드시 `/screen/{screen_code}` 형식이어야 한다!
-프론트엔드가 이 URL을 받아 `screen_definitions`에서 screen_id를 찾고, `screen_layouts_v2`에서 레이아웃을 로드한다.
-
-## 2. 관리자 메뉴 등록 (코드 구현 후 필수!)
-
-관리자 기능을 코드로 만들었으면 반드시 `menu_info`에 등록해야 한다.
-
-```sql
--- 예시: 결재 템플릿 관리 메뉴 등록
-INSERT INTO menu_info (objid, menu_type, parent_obj_id, menu_name_kor, seq, menu_url, company_code, status)
-VALUES (
-  (SELECT COALESCE(MAX(objid), 0) + 1 FROM menu_info),
-  2, {부모_objid}, '결재 템플릿', 40, '/admin/approvalTemplate', '대상회사코드', 'Y'
-);
-```
-
-- 기존 메뉴 구조를 먼저 조회해서 parent_obj_id, seq 등을 맞춰라
-- company_code 별로 등록이 필요할 수 있다
-- menu_auth_group 권한 매핑도 필요하면 추가
-
-## 3. 하드코딩 금지 / 범용성 필수
-
-- 특정 회사에만 동작하는 코드 금지
-- 특정 사용자 ID에 의존하는 로직 금지
-- 매직 넘버 사용 금지 (상수 또는 설정 파일로 관리)
-- 하드코딩 색상 금지 (CSS 변수 사용: bg-primary, text-destructive 등)
-- 하드코딩 URL 금지 (환경 변수 또는 API 클라이언트 사용)
-
-## 4. 테스트 환경 정보
-
-- **테스트 계정**: userId=`wace`, password=`qlalfqjsgh11`
-- **역할**: SUPER_ADMIN (company_code = "*")
-- **개발 프론트엔드**: http://localhost:9771
-- **개발 백엔드 API**: http://localhost:8080
-- **개발 DB**: postgresql://postgres:ph0909!!@39.117.244.52:11132/plm
-
-## 5. 기능 구현 완성 체크리스트
-
-기능 하나를 "완성"이라고 말하려면 아래를 전부 충족해야 한다:
-
-### 공통
-- [ ] DB: 마이그레이션 작성 + 실행 완료
-- [ ] DB: company_code 컬럼 + 인덱스 존재
-- [ ] BE: API 엔드포인트 구현 + 라우트 등록 (app.ts에 import + use 추가!)
-- [ ] BE: company_code 필터링 적용
-- [ ] 빌드 통과: 백엔드 tsc + 프론트엔드 tsc
-
-### 관리자 메뉴인 경우
-- [ ] FE: `frontend/app/(main)/admin/{기능}/page.tsx` 작성
-- [ ] FE: API 클라이언트 함수 작성 (lib/api/)
-- [ ] DB: `menu_info` INSERT (menu_url = `/admin/{기능}`)
-
-### 사용자 메뉴인 경우 (코드 작성 금지!)
-- [ ] DB: `screen_definitions` INSERT (screen_code, table_name, company_code)
-- [ ] DB: `screen_layouts_v2` INSERT (V2 레이아웃 JSON)
-- [ ] DB: `menu_info` INSERT (menu_url = `/screen/{screen_code}`)
-- [ ] BE: 필요한 경우 전용 API 작성 (범용 table-management API로 커버 안 되는 경우만)
-- [ ] FE: .tsx 페이지 파일 만들지 않음 (이미 `/screens/[screenId]/page.tsx`가 렌더링)
-
-## 6. 절대 하지 말 것
-
-1. 페이지 파일만 만들고 메뉴 등록 안 하기 (미완성!)
-2. fetch() 직접 사용 (lib/api/ 클라이언트 필수)
-3. company_code 필터링 빠뜨리기
-4. 하드코딩 색상/URL/사용자ID 사용
-5. Card 안에 Card 중첩 (중첩 박스 금지)
-6. 백엔드 재실행하기 (nodemon이 자동 재시작)
-7. **사용자 메뉴를 React 하드코딩(.tsx)으로 만들기 (절대 금지!!!)**
-   - `frontend/app/(main)/production/`, `frontend/app/(main)/warehouse/` 등에 page.tsx 파일을 만들어서 직접 UI를 코딩하는 것은 절대 금지
-   - 사용자 메뉴는 반드시 `screen_definitions` + `screen_layouts_v2` + `menu_info` DB 등록 방식으로 구현
-   - 이미 `/screen/[screenCode]` → `/screens/[screenId]` 렌더링 시스템이 존재함
-   - 백엔드 API(controller/routes)와 프론트엔드 API 클라이언트(lib/api/)는 필요하면 코드로 작성 가능
-   - 하지만 프론트엔드 화면 UI 자체는 DB의 V2 레이아웃 JSON으로만 구성
diff --git a/.cursor/agents/pipeline-db.md b/.cursor/agents/pipeline-db.md
deleted file mode 100644
index 33e25218..00000000
--- a/.cursor/agents/pipeline-db.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-name: pipeline-db
-description: Agent Pipeline DB 전문가. PostgreSQL 스키마 설계, 마이그레이션 작성 및 실행. 모든 테이블에 company_code 필수.
-model: inherit
----
-
-# Role
-You are a Database specialist for ERP-node project.
-Stack: PostgreSQL + Raw Query (no ORM). Migrations in db/migrations/.
-
-# CRITICAL PROJECT RULES
-
-## 1. Multi-tenancy (ABSOLUTE MUST!)
-- ALL tables MUST have company_code VARCHAR(20) NOT NULL
-- ALL queries MUST filter by company_code
-- JOINs MUST include company_code matching condition
-- CREATE INDEX on company_code for every table
-
-## 2. Migration Rules
-- File naming: NNN_description.sql
-- Always include company_code column
-- Always create index on company_code
-- Use IF NOT EXISTS for idempotent migrations
-- Use TIMESTAMPTZ for dates (not TIMESTAMP)
-
-## 3. MIGRATION EXECUTION (절대 규칙!)
-마이그레이션 SQL 파일을 생성한 후, 반드시 직접 실행해서 테이블을 생성해라.
-절대 사용자에게 "직접 실행해주세요"라고 떠넘기지 마라.
-
-Docker 환경:
-```bash
-DOCKER_HOST=unix:///Users/gbpark/.orbstack/run/docker.sock docker exec pms-backend-mac node -e "
-const {Pool}=require('pg');
-const p=new Pool({connectionString:process.env.DATABASE_URL,ssl:false});
-const fs=require('fs');
-const sql=fs.readFileSync('/app/db/migrations/파일명.sql','utf8');
-p.query(sql).then(()=>{console.log('OK');p.end()}).catch(e=>{console.error(e.message);p.end();process.exit(1)})
-"
-```
-
-# Your Domain
-- db/migrations/
-- SQL schema design
-- Query optimization
-
-# Code Rules
-1. PostgreSQL syntax only
-2. Parameter binding ($1, $2)
-3. Use COALESCE for NULL handling
-4. Use TIMESTAMPTZ for dates
diff --git a/.cursor/agents/pipeline-frontend.md b/.cursor/agents/pipeline-frontend.md
deleted file mode 100644
index 223b5b38..00000000
--- a/.cursor/agents/pipeline-frontend.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-name: pipeline-frontend
-description: Agent Pipeline 프론트엔드 전문가. Next.js 14 + React + TypeScript + shadcn/ui 기반 화면 구현. fetch 직접 사용 금지, lib/api/ 클라이언트 필수.
-model: inherit
----
-
-# Role
-You are a Frontend specialist for ERP-node project.
-Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui.
-
-# CRITICAL PROJECT RULES
-
-## 1. API Client (ABSOLUTE RULE!)
-- NEVER use fetch() directly!
-- ALWAYS use lib/api/ clients (Axios-based)
-- 환경별 URL 자동 처리: v1.vexplor.com → api.vexplor.com, localhost → localhost:8080
-
-## 2. shadcn/ui Style Rules
-- Use CSS variables: bg-primary, text-muted-foreground (하드코딩 색상 금지)
-- No nested boxes: Card inside Card is FORBIDDEN
-- Responsive: mobile-first approach (flex-col md:flex-row)
-
-## 3. V2 Component Standard
-V2 컴포넌트를 만들거나 수정할 때 반드시 이 규격을 따라야 한다.
-
-### 폴더 구조 (필수)
-```
-frontend/lib/registry/components/v2-{name}/
-├── index.ts               # createComponentDefinition() 호출
-├── types.ts               # Config extends ComponentConfig
-├── {Name}Component.tsx    # React 함수 컴포넌트
-├── {Name}Renderer.tsx     # extends AutoRegisteringComponentRenderer + registerSelf()
-├── {Name}ConfigPanel.tsx  # ConfigPanelBuilder 사용
-└── config.ts              # 기본 설정값 상수
-```
-
-### ConfigPanel 규칙 (절대!)
-- 반드시 ConfigPanelBuilder 또는 ConfigSection 사용
-- 직접 JSX로 설정 UI 작성 금지
-
-## 4. API Client 생성 패턴
-```typescript
-// frontend/lib/api/yourModule.ts
-import apiClient from "@/lib/api/client";
-
-export async function getYourData(id: number) {
-  const response = await apiClient.get(`/api/your-endpoint/${id}`);
-  return response.data;
-}
-```
-
-# CRITICAL: 사용자 메뉴 화면은 코드로 만들지 않는다!!!
-
-**이 프로젝트는 로우코드 스크린 디자이너 시스템을 사용한다.**
-사용자 업무 화면(포장관리, 금형관리, BOM, 문서관리 등)은 절대 React 페이지(.tsx)로 직접 UI를 하드코딩하지 않는다!
-
-## 금지 패턴 (절대 하지 말 것)
-```
-frontend/app/(main)/production/packaging/page.tsx  ← 이런 파일 만들지 마라!
-frontend/app/(main)/warehouse/something/page.tsx   ← 이런 파일 만들지 마라!
-```
-
-## 올바른 패턴
-사용자 화면은 DB에 등록만 하면 자동으로 렌더링된다:
-1. `screen_definitions` 테이블에 화면 등록 (screen_code, table_name 등)
-2. `screen_layouts_v2` 테이블에 V2 레이아웃 JSON 등록 (v2-split-panel-layout, v2-table-list 등)
-3. `menu_info` 테이블에 메뉴 등록 (menu_url = `/screen/{screen_code}`)
-
-이미 존재하는 렌더링 시스템:
-- `/screen/[screenCode]/page.tsx` → screenCode를 screenId로 변환
-- `/screens/[screenId]/page.tsx` → screen_layouts_v2에서 V2 레이아웃 로드 → DynamicComponentRenderer로 렌더링
-
-## 프론트엔드 에이전트가 할 수 있는 것
-- `frontend/lib/api/` 하위에 API 클라이언트 함수 작성 (백엔드와 통신)
-- V2 컴포넌트 자체를 수정/신규 개발 (`frontend/lib/registry/components/v2-*/`)
-- 관리자 메뉴(`/admin/*`)는 React 페이지 코딩 가능
-
-## 프론트엔드 에이전트가 할 수 없는 것
-- 사용자 메뉴 화면을 React 페이지로 직접 코딩하는 것
-
-# Your Domain
-- frontend/components/
-- frontend/app/
-- frontend/lib/
-- frontend/hooks/
-
-# Code Rules
-1. TypeScript strict mode
-2. React functional components with hooks
-3. Prefer shadcn/ui components
-4. Use cn() utility for conditional classes
-5. Comments in Korean
diff --git a/.cursor/agents/pipeline-ui.md b/.cursor/agents/pipeline-ui.md
deleted file mode 100644
index 05d3359e..00000000
--- a/.cursor/agents/pipeline-ui.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-name: pipeline-ui
-description: Agent Pipeline UI/UX 디자인 전문가. 모던 엔터프라이즈 UI 구현. CSS 변수 필수, 하드코딩 색상 금지, 반응형 필수.
-model: inherit
----
-
-# Role
-You are a UI/UX Design specialist for the ERP-node project.
-Stack: Next.js 14 + React + TypeScript + Tailwind CSS + shadcn/ui + lucide-react icons.
-
-# Design Philosophy
-- Apple-level polish with enterprise functionality
-- Consistent spacing, typography, color usage
-- Subtle animations and micro-interactions
-- Dark mode compatible using CSS variables
-
-# CRITICAL STYLE RULES
-
-## 1. Color System (CSS Variables ONLY)
-- bg-background / text-foreground (base)
-- bg-primary / text-primary-foreground (actions)
-- bg-muted / text-muted-foreground (secondary)
-- bg-destructive / text-destructive-foreground (danger)
-FORBIDDEN: bg-gray-50, text-blue-500, bg-white, text-black
-
-## 2. Layout Rules
-- No nested boxes (Card inside Card FORBIDDEN)
-- Spacing: p-6 for cards, space-y-4 for forms, gap-4 for grids
-- Mobile-first responsive: flex-col md:flex-row
-
-## 3. Typography
-- Page title: text-3xl font-bold
-- Section: text-xl font-semibold
-- Body: text-sm
-- Helper: text-xs text-muted-foreground
-
-## 4. Components
-- ALWAYS use shadcn/ui components
-- Use cn() for conditional classes
-- Use lucide-react for ALL icons
-
-# CRITICAL: 사용자 메뉴 화면은 코드로 만들지 않는다!!!
-
-사용자 업무 화면(포장관리, 금형관리, BOM 등)의 UI는 DB의 `screen_layouts_v2` 테이블에 V2 레이아웃 JSON으로 정의된다.
-React 페이지(.tsx)로 직접 UI를 하드코딩하는 것은 절대 금지!
-
-UI 에이전트가 할 수 있는 것:
-- V2 컴포넌트 자체의 스타일/UX 개선 (`frontend/lib/registry/components/v2-*/`)
-- 관리자 메뉴(`/admin/*`) 페이지의 UI 개선
-- 공통 UI 컴포넌트(`frontend/components/ui/`) 스타일 개선
-
-UI 에이전트가 할 수 없는 것:
-- 사용자 메뉴 화면을 React 페이지로 직접 코딩
-
-# Your Domain
-- frontend/components/ (UI components)
-- frontend/app/ (pages - 관리자 메뉴만)
-- frontend/lib/registry/components/v2-*/ (V2 컴포넌트)
-
-# Output Rules
-1. TypeScript strict mode
-2. "use client" for client components
-3. Comments in Korean
-4. MINIMAL targeted changes when modifying existing files
diff --git a/.cursor/agents/pipeline-verifier.md b/.cursor/agents/pipeline-verifier.md
deleted file mode 100644
index a4f4186d..00000000
--- a/.cursor/agents/pipeline-verifier.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-name: pipeline-verifier
-description: Agent Pipeline 검증 전문가. 구현 완료 후 실제 동작 검증. 빈 껍데기 탐지, 패턴 준수 확인, 멀티테넌시 검증.
-model: fast
-readonly: true
----
-
-# Role
-You are a skeptical validator for the ERP-node project.
-Your job is to verify that work claimed as complete actually works.
-
-# Verification Checklist
-
-## 1. Multi-tenancy (최우선)
-- [ ] 모든 SQL에 company_code 필터 존재
-- [ ] req.user!.companyCode 사용 (클라이언트 입력 아님)
-- [ ] INSERT에 company_code 포함
-- [ ] JOIN에 company_code 매칭 조건 존재
-- [ ] company_code = "*" 최고관리자 예외 처리
-
-## 2. Empty Shell Detection (빈 껍데기)
-- [ ] API가 실제 DB 쿼리 실행 (mock 아님)
-- [ ] 컴포넌트가 실제 데이터 로딩 (하드코딩 아님)
-- [ ] TODO/FIXME/placeholder 없음
-- [ ] 타입만 정의하고 구현 없는 함수 없음
-
-## 3. Pattern Compliance (패턴 준수)
-- [ ] Frontend: fetch 직접 사용 안 함 (lib/api/ 사용)
-- [ ] Frontend: CSS 변수 사용 (하드코딩 색상 없음)
-- [ ] Frontend: V2 컴포넌트 규격 준수
-- [ ] Backend: logger 사용
-- [ ] Backend: try/catch 에러 처리
-
-## 4. Integration Check
-- [ ] Route가 index.ts에 등록됨
-- [ ] Import 경로 정확
-- [ ] Export 존재
-- [ ] TypeScript 타입 일치
-
-# Reporting Format
-```
-## 검증 결과: [PASS/FAIL]
-
-### 통과 항목
-- item 1
-- item 2
-
-### 실패 항목
-- item 1: 구체적 이유
-- item 2: 구체적 이유
-
-### 권장 수정사항
-- fix 1
-- fix 2
-```
-
-Do not accept claims at face value. Check the actual code.
diff --git a/.cursor/rules/screen-designer-e2e-guide.mdc b/.cursor/rules/screen-designer-e2e-guide.mdc
new file mode 100644
index 00000000..e52ec2dd
--- /dev/null
+++ b/.cursor/rules/screen-designer-e2e-guide.mdc
@@ -0,0 +1,98 @@
+# 화면 디자이너 E2E 테스트 접근 가이드
+
+## 화면 디자이너 접근 방법 (Playwright)
+
+화면 디자이너는 SPA 탭 기반 시스템이라 URL 직접 접근이 안 된다.
+다음 3단계를 반드시 따라야 한다.
+
+### 1단계: 로그인
+
+```typescript
+await page.goto('http://localhost:9771/login');
+await page.waitForLoadState('networkidle');
+await page.getByPlaceholder('사용자 ID를 입력하세요').fill('wace');
+await page.getByPlaceholder('비밀번호를 입력하세요').fill('qlalfqjsgh11');
+await page.getByRole('button', { name: '로그인' }).click();
+await page.waitForTimeout(8000);
+```
+
+### 2단계: sessionStorage 탭 상태 주입 + openDesigner 쿼리
+
+```typescript
+await page.evaluate(() => {
+  sessionStorage.setItem('erp-tab-store', JSON.stringify({
+    state: {
+      tabs: [{
+        id: 'tab-screenmng',
+        title: '화면 관리',
+        path: '/admin/screenMng/screenMngList',
+        isActive: true,
+        isPinned: false
+      }],
+      activeTabId: 'tab-screenmng'
+    },
+    version: 0
+  }));
+});
+
+// openDesigner 쿼리 파라미터로 화면 디자이너 자동 열기
+await page.goto('http://localhost:9771/admin/screenMng/screenMngList?openDesigner=' + screenId);
+await page.waitForTimeout(10000);
+```
+
+### 3단계: 컴포넌트 클릭 + 설정 패널 확인
+
+```typescript
+// 패널 버튼 클릭 (설정 패널 열기)
+const panelBtn = page.locator('button:has-text("패널")');
+if (await panelBtn.count() > 0) {
+  await panelBtn.first().click();
+  await page.waitForTimeout(2000);
+}
+
+// 편집 탭 확인
+const editTab = page.locator('button:has-text("편집")');
+// editTab.count() > 0 이면 설정 패널 열림 확인
+```
+
+## 화면 ID 찾기 (API)
+
+특정 컴포넌트를 포함한 화면을 API로 검색:
+
+```typescript
+const screenId = await page.evaluate(async () => {
+  const token = localStorage.getItem('authToken') || '';
+  const h = { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token };
+  
+  const resp = await fetch('http://localhost:8080/api/screen-management/screens?page=1&size=50', { headers: h });
+  const data = await resp.json();
+  const items = data.data || [];
+  
+  for (const s of items) {
+    try {
+      const lr = await fetch('http://localhost:8080/api/screen-management/screens/' + s.screenId + '/layout-v2', { headers: h });
+      const ld = await lr.json();
+      const raw = JSON.stringify(ld);
+      // 원하는 컴포넌트 타입 검색
+      if (raw.includes('v2-select')) return s.screenId;
+    } catch {}
+  }
+  return items[0]?.screenId || null;
+});
+```
+
+## 검증 포인트
+
+| 확인 항목 | Locator | 기대값 |
+|----------|---------|--------|
+| 디자이너 열림 | `button:has-text("패널")` | count > 0 |
+| 편집 탭 | `button:has-text("편집")` | count > 0 |
+| 카드 선택 | `text=이 필드는 어떤 데이터를 선택하나요?` | visible |
+| 고급 설정 | `text=고급 설정` | visible |
+| JS 에러 없음 | `page.on('pageerror')` | 0건 |
+
+## 테스트 계정
+
+- ID: `wace`
+- PW: `qlalfqjsgh11`
+- 권한: SUPER_ADMIN (최고 관리자)
diff --git a/.gitignore b/.gitignore
index 48e9f403..de849ec4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,10 @@ dist/
 build/
 build/Release
 
+# Gradle
+.gradle/
+**/backend/.gradle/
+
 # Cache
 .npm
 .eslintcache
diff --git a/backend-node/src/controllers/adminController.ts b/backend-node/src/controllers/adminController.ts
index 6f0997a9..dc8cf064 100644
--- a/backend-node/src/controllers/adminController.ts
+++ b/backend-node/src/controllers/adminController.ts
@@ -108,6 +108,46 @@ export async function getUserMenus(
   }
 }
 
+/**
+ * POP 메뉴 목록 조회
+ * [POP] 태그가 있는 L1 메뉴의 하위 active 메뉴를 반환
+ */
+export async function getPopMenus(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const userCompanyCode = req.user?.companyCode || "ILSHIN";
+    const userType = req.user?.userType;
+
+    const result = await AdminService.getPopMenuList({
+      userCompanyCode,
+      userType,
+    });
+
+    const response: ApiResponse<any> = {
+      success: true,
+      message: "POP 메뉴 목록 조회 성공",
+      data: result,
+    };
+
+    res.status(200).json(response);
+  } catch (error) {
+    logger.error("POP 메뉴 목록 조회 중 오류 발생:", error);
+
+    const response: ApiResponse<null> = {
+      success: false,
+      message: "POP 메뉴 목록 조회 중 오류가 발생했습니다.",
+      error: {
+        code: "POP_MENU_LIST_ERROR",
+        details: error instanceof Error ? error.message : "Unknown error",
+      },
+    };
+
+    res.status(500).json(response);
+  }
+}
+
 /**
  * 메뉴 정보 조회
  */
@@ -1814,7 +1854,7 @@ export async function toggleMenuStatus(
 
     // 현재 상태 및 회사 코드 조회
     const currentMenu = await queryOne<any>(
-      `SELECT objid, status, company_code FROM menu_info WHERE objid = $1`,
+      `SELECT objid, status, company_code, menu_name_kor FROM menu_info WHERE objid = $1`,
       [Number(menuId)]
     );
 
diff --git a/backend-node/src/controllers/auditLogController.ts b/backend-node/src/controllers/auditLogController.ts
index 828529bd..cd59a435 100644
--- a/backend-node/src/controllers/auditLogController.ts
+++ b/backend-node/src/controllers/auditLogController.ts
@@ -1,6 +1,6 @@
 import { Response } from "express";
 import { AuthenticatedRequest } from "../middleware/authMiddleware";
-import { auditLogService } from "../services/auditLogService";
+import { auditLogService, getClientIp, AuditAction, AuditResourceType } from "../services/auditLogService";
 import { query } from "../database/db";
 import logger from "../utils/logger";
 
@@ -137,3 +137,40 @@ export const getAuditLogUsers = async (
     });
   }
 };
+
+/**
+ * 프론트엔드에서 직접 감사 로그 기록 (그룹 복제 등 프론트 오케스트레이션 작업용)
+ */
+export const createAuditLog = async (
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> => {
+  try {
+    const { action, resourceType, resourceId, resourceName, tableName, summary, changes } = req.body;
+
+    if (!action || !resourceType) {
+      res.status(400).json({ success: false, message: "action, resourceType은 필수입니다." });
+      return;
+    }
+
+    await auditLogService.log({
+      companyCode: req.user?.companyCode || "",
+      userId: req.user?.userId || "",
+      userName: req.user?.userName || "",
+      action: action as AuditAction,
+      resourceType: resourceType as AuditResourceType,
+      resourceId: resourceId || undefined,
+      resourceName: resourceName || undefined,
+      tableName: tableName || undefined,
+      summary: summary || undefined,
+      changes: changes || undefined,
+      ipAddress: getClientIp(req),
+      requestPath: req.originalUrl,
+    });
+
+    res.json({ success: true });
+  } catch (error: any) {
+    logger.error("감사 로그 기록 실패", { error: error.message });
+    res.status(500).json({ success: false, message: "감사 로그 기록 실패" });
+  }
+};
diff --git a/backend-node/src/controllers/authController.ts b/backend-node/src/controllers/authController.ts
index 2bb72876..809513b6 100644
--- a/backend-node/src/controllers/authController.ts
+++ b/backend-node/src/controllers/authController.ts
@@ -51,29 +51,24 @@ export class AuthController {
 
         logger.debug(`로그인 사용자 정보: ${userInfo.userId} (${userInfo.companyCode})`);
 
+        // 메뉴 조회를 위한 공통 파라미터
+        const { AdminService } = await import("../services/adminService");
+        const paramMap = {
+          userId: loginResult.userInfo.userId,
+          userCompanyCode: loginResult.userInfo.companyCode || "ILSHIN",
+          userType: loginResult.userInfo.userType,
+          userLang: "ko",
+        };
+
         // 사용자의 첫 번째 접근 가능한 메뉴 조회
         let firstMenuPath: string | null = null;
         try {
-          const { AdminService } = await import("../services/adminService");
-          const paramMap = {
-            userId: loginResult.userInfo.userId,
-            userCompanyCode: loginResult.userInfo.companyCode || "ILSHIN",
-            userType: loginResult.userInfo.userType,
-            userLang: "ko",
-          };
-
           const menuList = await AdminService.getUserMenuList(paramMap);
           logger.debug(`로그인 후 메뉴 조회: 총 ${menuList.length}개 메뉴`);
 
-          // 접근 가능한 첫 번째 메뉴 찾기
-          // 조건:
-          // 1. LEV (레벨)이 2 이상 (최상위 폴더 제외)
-          // 2. MENU_URL이 있고 비어있지 않음
-          // 3. 이미 PATH, SEQ로 정렬되어 있으므로 첫 번째로 찾은 것이 첫 번째 메뉴
           const firstMenu = menuList.find((menu: any) => {
             const level = menu.lev || menu.level;
             const url = menu.menu_url || menu.url;
-
             return level >= 2 && url && url.trim() !== "" && url !== "#";
           });
 
@@ -94,6 +89,22 @@ export class AuthController {
           useType: "접속",
         }).catch(() => {});
 
+        // POP 랜딩 경로 조회
+        let popLandingPath: string | null = null;
+        try {
+          const popResult = await AdminService.getPopMenuList(paramMap);
+          if (popResult.landingMenu?.menu_url) {
+            popLandingPath = popResult.landingMenu.menu_url;
+          } else if (popResult.childMenus.length === 1) {
+            popLandingPath = popResult.childMenus[0].menu_url;
+          } else if (popResult.childMenus.length > 1) {
+            popLandingPath = "/pop";
+          }
+          logger.debug(`POP 랜딩 경로: ${popLandingPath}`);
+        } catch (popError) {
+          logger.warn("POP 메뉴 조회 중 오류 (무시):", popError);
+        }
+
         res.status(200).json({
           success: true,
           message: "로그인 성공",
@@ -101,6 +112,7 @@ export class AuthController {
             userInfo,
             token: loginResult.token,
             firstMenuPath,
+            popLandingPath,
           },
         });
       } else {
diff --git a/backend-node/src/controllers/categoryTreeController.ts b/backend-node/src/controllers/categoryTreeController.ts
index 54b93ee4..98d74fa4 100644
--- a/backend-node/src/controllers/categoryTreeController.ts
+++ b/backend-node/src/controllers/categoryTreeController.ts
@@ -6,6 +6,7 @@ import { Router, Request, Response } from "express";
 import { categoryTreeService, CreateCategoryValueInput, UpdateCategoryValueInput } from "../services/categoryTreeService";
 import { logger } from "../utils/logger";
 import { authenticateToken } from "../middleware/authMiddleware";
+import { auditLogService, getClientIp } from "../services/auditLogService";
 
 const router = Router();
 
@@ -16,6 +17,7 @@ router.use(authenticateToken);
 interface AuthenticatedRequest extends Request {
   user?: {
     userId: string;
+    userName: string;
     companyCode: string;
   };
 }
@@ -157,6 +159,21 @@ router.post("/test/value", async (req: AuthenticatedRequest, res: Response) => {
 
     const value = await categoryTreeService.createCategoryValue(companyCode, input, createdBy);
 
+    auditLogService.log({
+      companyCode,
+      userId: req.user?.userId || "",
+      userName: req.user?.userName,
+      action: "CREATE",
+      resourceType: "CODE_CATEGORY",
+      resourceId: String(value.valueId),
+      resourceName: input.valueLabel,
+      tableName: "category_values",
+      summary: `카테고리 값 "${input.valueLabel}" 생성 (${input.tableName}.${input.columnName})`,
+      changes: { after: { tableName: input.tableName, columnName: input.columnName, valueCode: input.valueCode, valueLabel: input.valueLabel } },
+      ipAddress: getClientIp(req),
+      requestPath: req.originalUrl,
+    });
+
     res.json({
       success: true,
       data: value,
@@ -182,6 +199,7 @@ router.put("/test/value/:valueId", async (req: AuthenticatedRequest, res: Respon
     const companyCode = req.user?.companyCode || "*";
     const updatedBy = req.user?.userId;
 
+    const beforeValue = await categoryTreeService.getCategoryValue(companyCode, Number(valueId));
     const value = await categoryTreeService.updateCategoryValue(companyCode, Number(valueId), input, updatedBy);
 
     if (!value) {
@@ -191,6 +209,24 @@ router.put("/test/value/:valueId", async (req: AuthenticatedRequest, res: Respon
       });
     }
 
+    auditLogService.log({
+      companyCode,
+      userId: req.user?.userId || "",
+      userName: req.user?.userName,
+      action: "UPDATE",
+      resourceType: "CODE_CATEGORY",
+      resourceId: valueId,
+      resourceName: value.valueLabel,
+      tableName: "category_values",
+      summary: `카테고리 값 "${value.valueLabel}" 수정 (${value.tableName}.${value.columnName})`,
+      changes: {
+        before: beforeValue ? { valueLabel: beforeValue.valueLabel, valueCode: beforeValue.valueCode } : undefined,
+        after: input,
+      },
+      ipAddress: getClientIp(req),
+      requestPath: req.originalUrl,
+    });
+
     res.json({
       success: true,
       data: value,
@@ -239,6 +275,7 @@ router.delete("/test/value/:valueId", async (req: AuthenticatedRequest, res: Res
     const { valueId } = req.params;
     const companyCode = req.user?.companyCode || "*";
 
+    const beforeValue = await categoryTreeService.getCategoryValue(companyCode, Number(valueId));
     const success = await categoryTreeService.deleteCategoryValue(companyCode, Number(valueId));
 
     if (!success) {
@@ -248,6 +285,21 @@ router.delete("/test/value/:valueId", async (req: AuthenticatedRequest, res: Res
       });
     }
 
+    auditLogService.log({
+      companyCode,
+      userId: req.user?.userId || "",
+      userName: req.user?.userName,
+      action: "DELETE",
+      resourceType: "CODE_CATEGORY",
+      resourceId: valueId,
+      resourceName: beforeValue?.valueLabel || valueId,
+      tableName: "category_values",
+      summary: `카테고리 값 "${beforeValue?.valueLabel || valueId}" 삭제 (${beforeValue?.tableName || ""}.${beforeValue?.columnName || ""})`,
+      changes: beforeValue ? { before: { valueLabel: beforeValue.valueLabel, valueCode: beforeValue.valueCode, tableName: beforeValue.tableName, columnName: beforeValue.columnName } } : undefined,
+      ipAddress: getClientIp(req),
+      requestPath: req.originalUrl,
+    });
+
     res.json({
       success: true,
       message: "삭제되었습니다",
diff --git a/backend-node/src/controllers/commonCodeController.ts b/backend-node/src/controllers/commonCodeController.ts
index a9bd0755..a67ba44e 100644
--- a/backend-node/src/controllers/commonCodeController.ts
+++ b/backend-node/src/controllers/commonCodeController.ts
@@ -396,6 +396,20 @@ export class CommonCodeController {
         companyCode
       );
 
+      auditLogService.log({
+        companyCode: companyCode || "",
+        userId: userId || "",
+        action: "UPDATE",
+        resourceType: "CODE",
+        resourceId: codeValue,
+        resourceName: codeData.codeName || codeValue,
+        tableName: "code_info",
+        summary: `코드 "${categoryCode}.${codeValue}" 수정`,
+        changes: { after: codeData },
+        ipAddress: getClientIp(req as any),
+        requestPath: req.originalUrl,
+      });
+
       return res.json({
         success: true,
         data: code,
@@ -440,6 +454,19 @@ export class CommonCodeController {
         companyCode
       );
 
+      auditLogService.log({
+        companyCode: companyCode || "",
+        userId: req.user?.userId || "",
+        action: "DELETE",
+        resourceType: "CODE",
+        resourceId: codeValue,
+        tableName: "code_info",
+        summary: `코드 "${categoryCode}.${codeValue}" 삭제`,
+        changes: { before: { categoryCode, codeValue } },
+        ipAddress: getClientIp(req as any),
+        requestPath: req.originalUrl,
+      });
+
       return res.json({
         success: true,
         message: "코드 삭제 성공",
diff --git a/backend-node/src/controllers/ddlController.ts b/backend-node/src/controllers/ddlController.ts
index 631b6360..00baf75d 100644
--- a/backend-node/src/controllers/ddlController.ts
+++ b/backend-node/src/controllers/ddlController.ts
@@ -438,6 +438,19 @@ export class DDLController {
       );
 
       if (result.success) {
+        auditLogService.log({
+          companyCode: userCompanyCode || "",
+          userId,
+          action: "DELETE",
+          resourceType: "TABLE",
+          resourceId: tableName,
+          resourceName: tableName,
+          tableName,
+          summary: `테이블 "${tableName}" 삭제`,
+          ipAddress: getClientIp(req as any),
+          requestPath: req.originalUrl,
+        });
+
         res.status(200).json({
           success: true,
           message: result.message,
diff --git a/backend-node/src/controllers/numberingRuleController.ts b/backend-node/src/controllers/numberingRuleController.ts
index a3887ab8..9d05a1b7 100644
--- a/backend-node/src/controllers/numberingRuleController.ts
+++ b/backend-node/src/controllers/numberingRuleController.ts
@@ -193,6 +193,7 @@ router.post(
       auditLogService.log({
         companyCode,
         userId,
+        userName: req.user?.userName,
         action: "CREATE",
         resourceType: "NUMBERING_RULE",
         resourceId: String(newRule.ruleId),
@@ -243,6 +244,7 @@ router.put(
       auditLogService.log({
         companyCode,
         userId: req.user?.userId || "",
+        userName: req.user?.userName,
         action: "UPDATE",
         resourceType: "NUMBERING_RULE",
         resourceId: ruleId,
@@ -285,6 +287,7 @@ router.delete(
       auditLogService.log({
         companyCode,
         userId: req.user?.userId || "",
+        userName: req.user?.userName,
         action: "DELETE",
         resourceType: "NUMBERING_RULE",
         resourceId: ruleId,
@@ -521,6 +524,56 @@ router.post(
         companyCode,
         userId
       );
+
+      const isUpdate = !!ruleConfig.ruleId;
+
+      const resetPeriodLabel: Record<string, string> = {
+        none: "초기화 안함", daily: "일별", monthly: "월별", yearly: "연별",
+      };
+      const partTypeLabel: Record<string, string> = {
+        sequence: "순번", number: "숫자", date: "날짜", text: "문자", category: "카테고리", reference: "참조",
+      };
+      const partsDescription = (ruleConfig.parts || [])
+        .sort((a: any, b: any) => (a.order || 0) - (b.order || 0))
+        .map((p: any) => {
+          const type = partTypeLabel[p.partType] || p.partType;
+          if (p.partType === "text" && p.autoConfig?.textValue) return `${type}("${p.autoConfig.textValue}")`;
+          if (p.partType === "sequence" && p.autoConfig?.sequenceLength) return `${type}(${p.autoConfig.sequenceLength}자리)`;
+          if (p.partType === "date" && p.autoConfig?.dateFormat) return `${type}(${p.autoConfig.dateFormat})`;
+          if (p.partType === "category") return `${type}(${p.autoConfig?.categoryKey || ""})`;
+          if (p.partType === "reference") return `${type}(${p.autoConfig?.referenceColumnName || ""})`;
+          return type;
+        })
+        .join(` ${ruleConfig.separator || "-"} `);
+
+      auditLogService.log({
+        companyCode,
+        userId,
+        userName: req.user?.userName,
+        action: isUpdate ? "UPDATE" : "CREATE",
+        resourceType: "NUMBERING_RULE",
+        resourceId: String(savedRule.ruleId),
+        resourceName: ruleConfig.ruleName,
+        tableName: "numbering_rules",
+        summary: isUpdate
+          ? `채번 규칙 "${ruleConfig.ruleName}" 수정`
+          : `채번 규칙 "${ruleConfig.ruleName}" 생성`,
+        changes: {
+          after: {
+            규칙명: ruleConfig.ruleName,
+            적용테이블: ruleConfig.tableName || "(미지정)",
+            적용컬럼: ruleConfig.columnName || "(미지정)",
+            구분자: ruleConfig.separator || "-",
+            리셋주기: resetPeriodLabel[ruleConfig.resetPeriod] || ruleConfig.resetPeriod || "초기화 안함",
+            적용범위: ruleConfig.scopeType === "menu" ? "메뉴별" : "전역",
+            코드구성: partsDescription || "(파트 없음)",
+            파트수: (ruleConfig.parts || []).length,
+          },
+        },
+        ipAddress: getClientIp(req),
+        requestPath: req.originalUrl,
+      });
+
       return res.json({ success: true, data: savedRule });
     } catch (error: any) {
       logger.error("[테스트] 채번 규칙 저장 실패", { error: error.message });
@@ -535,10 +588,25 @@ router.delete(
   authenticateToken,
   async (req: AuthenticatedRequest, res: Response) => {
     const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { ruleId } = req.params;
 
     try {
       await numberingRuleService.deleteRuleFromTest(ruleId, companyCode);
+
+      auditLogService.log({
+        companyCode,
+        userId,
+        userName: req.user?.userName,
+        action: "DELETE",
+        resourceType: "NUMBERING_RULE",
+        resourceId: ruleId,
+        tableName: "numbering_rules",
+        summary: `채번 규칙(ID:${ruleId}) 삭제`,
+        ipAddress: getClientIp(req),
+        requestPath: req.originalUrl,
+      });
+
       return res.json({
         success: true,
         message: "테스트 채번 규칙이 삭제되었습니다",
diff --git a/backend-node/src/controllers/processWorkStandardController.ts b/backend-node/src/controllers/processWorkStandardController.ts
index e72f6b9f..c3eeb736 100644
--- a/backend-node/src/controllers/processWorkStandardController.ts
+++ b/backend-node/src/controllers/processWorkStandardController.ts
@@ -30,26 +30,68 @@ export async function getItemsWithRouting(req: AuthenticatedRequest, res: Respon
       routingTable = "item_routing_version",
       routingFkColumn = "item_code",
       search = "",
+      extraColumns = "",
+      filterConditions = "",
     } = req.query as Record<string, string>;
 
-    const searchCondition = search
-      ? `AND (i.${nameColumn} ILIKE $2 OR i.${codeColumn} ILIKE $2)`
-      : "";
     const params: any[] = [companyCode];
-    if (search) params.push(`%${search}%`);
+    let paramIndex = 2;
+
+    // 검색 조건
+    let searchCondition = "";
+    if (search) {
+      searchCondition = `AND (i.${nameColumn} ILIKE $${paramIndex} OR i.${codeColumn} ILIKE $${paramIndex})`;
+      params.push(`%${search}%`);
+      paramIndex++;
+    }
+
+    // 추가 컬럼 SELECT
+    const extraColumnNames: string[] = extraColumns
+      ? extraColumns.split(",").map((c: string) => c.trim()).filter(Boolean)
+      : [];
+    const extraSelect = extraColumnNames.map((col) => `i.${col}`).join(", ");
+    const extraGroupBy = extraColumnNames.map((col) => `i.${col}`).join(", ");
+
+    // 사전 필터 조건
+    let filterWhere = "";
+    if (filterConditions) {
+      try {
+        const filters = JSON.parse(filterConditions) as Array<{
+          column: string;
+          operator: string;
+          value: string;
+        }>;
+        for (const f of filters) {
+          if (!f.column || !f.value) continue;
+          if (f.operator === "equals") {
+            filterWhere += ` AND i.${f.column} = $${paramIndex}`;
+            params.push(f.value);
+          } else if (f.operator === "contains") {
+            filterWhere += ` AND i.${f.column} ILIKE $${paramIndex}`;
+            params.push(`%${f.value}%`);
+          } else if (f.operator === "not_equals") {
+            filterWhere += ` AND i.${f.column} != $${paramIndex}`;
+            params.push(f.value);
+          }
+          paramIndex++;
+        }
+      } catch { /* 파싱 실패 시 무시 */ }
+    }
 
     const query = `
       SELECT
         i.id,
         i.${nameColumn} AS item_name,
-        i.${codeColumn} AS item_code,
+        i.${codeColumn} AS item_code
+        ${extraSelect ? ", " + extraSelect : ""},
         COUNT(rv.id) AS routing_count
       FROM ${tableName} i
       LEFT JOIN ${routingTable} rv ON rv.${routingFkColumn} = i.${codeColumn}
         AND rv.company_code = i.company_code
       WHERE i.company_code = $1
         ${searchCondition}
-      GROUP BY i.id, i.${nameColumn}, i.${codeColumn}, i.created_date
+        ${filterWhere}
+      GROUP BY i.id, i.${nameColumn}, i.${codeColumn}${extraGroupBy ? ", " + extraGroupBy : ""}, i.created_date
       ORDER BY i.created_date DESC NULLS LAST
     `;
 
@@ -711,3 +753,184 @@ export async function saveAll(req: AuthenticatedRequest, res: Response) {
     client.release();
   }
 }
+
+// ============================================================
+// 등록 품목 관리 (item_routing_registered)
+// ============================================================
+
+/**
+ * 화면별 등록된 품목 목록 조회
+ */
+export async function getRegisteredItems(req: AuthenticatedRequest, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { screenCode } = req.params;
+    const {
+      tableName = "item_info",
+      nameColumn = "item_name",
+      codeColumn = "item_number",
+      routingTable = "item_routing_version",
+      routingFkColumn = "item_code",
+      search = "",
+      extraColumns = "",
+    } = req.query as Record<string, string>;
+
+    const params: any[] = [companyCode, screenCode];
+    let paramIndex = 3;
+
+    let searchCondition = "";
+    if (search) {
+      searchCondition = `AND (i.${nameColumn} ILIKE $${paramIndex} OR i.${codeColumn} ILIKE $${paramIndex})`;
+      params.push(`%${search}%`);
+      paramIndex++;
+    }
+
+    const extraColumnNames: string[] = extraColumns
+      ? extraColumns.split(",").map((c: string) => c.trim()).filter(Boolean)
+      : [];
+    const extraSelect = extraColumnNames.map((col) => `i.${col}`).join(", ");
+    const extraGroupBy = extraColumnNames.map((col) => `i.${col}`).join(", ");
+
+    const query = `
+      SELECT
+        irr.id AS registered_id,
+        irr.sort_order,
+        i.id,
+        i.${nameColumn} AS item_name,
+        i.${codeColumn} AS item_code
+        ${extraSelect ? ", " + extraSelect : ""},
+        COUNT(rv.id) AS routing_count
+      FROM item_routing_registered irr
+      JOIN ${tableName} i ON irr.item_id = i.id
+        AND i.company_code = irr.company_code
+      LEFT JOIN ${routingTable} rv ON rv.${routingFkColumn} = i.${codeColumn}
+        AND rv.company_code = i.company_code
+      WHERE irr.company_code = $1
+        AND irr.screen_code = $2
+        ${searchCondition}
+      GROUP BY irr.id, irr.sort_order, i.id, i.${nameColumn}, i.${codeColumn}${extraGroupBy ? ", " + extraGroupBy : ""}
+      ORDER BY CAST(irr.sort_order AS int) ASC, irr.created_date ASC
+    `;
+
+    const result = await getPool().query(query, params);
+    return res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("등록 품목 조회 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 품목 등록 (화면에 품목 추가)
+ */
+export async function registerItem(req: AuthenticatedRequest, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { screenCode, itemId, itemCode } = req.body;
+    if (!screenCode || !itemId) {
+      return res.status(400).json({ success: false, message: "screenCode, itemId 필수" });
+    }
+
+    const query = `
+      INSERT INTO item_routing_registered (screen_code, item_id, item_code, company_code, writer)
+      VALUES ($1, $2, $3, $4, $5)
+      ON CONFLICT (screen_code, item_id, company_code) DO NOTHING
+      RETURNING *
+    `;
+    const result = await getPool().query(query, [
+      screenCode, itemId, itemCode || null, companyCode, req.user?.userId || null,
+    ]);
+
+    if (result.rowCount === 0) {
+      return res.json({ success: true, message: "이미 등록된 품목입니다", data: null });
+    }
+
+    logger.info("품목 등록", { companyCode, screenCode, itemId });
+    return res.json({ success: true, data: result.rows[0] });
+  } catch (error: any) {
+    logger.error("품목 등록 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 여러 품목 일괄 등록
+ */
+export async function registerItemsBatch(req: AuthenticatedRequest, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { screenCode, items } = req.body;
+    if (!screenCode || !Array.isArray(items) || items.length === 0) {
+      return res.status(400).json({ success: false, message: "screenCode, items[] 필수" });
+    }
+
+    const client = await getPool().connect();
+    try {
+      await client.query("BEGIN");
+      const inserted: any[] = [];
+
+      for (const item of items) {
+        const result = await client.query(
+          `INSERT INTO item_routing_registered (screen_code, item_id, item_code, company_code, writer)
+           VALUES ($1, $2, $3, $4, $5)
+           ON CONFLICT (screen_code, item_id, company_code) DO NOTHING
+           RETURNING *`,
+          [screenCode, item.itemId, item.itemCode || null, companyCode, req.user?.userId || null]
+        );
+        if (result.rows[0]) inserted.push(result.rows[0]);
+      }
+
+      await client.query("COMMIT");
+      logger.info("품목 일괄 등록", { companyCode, screenCode, count: inserted.length });
+      return res.json({ success: true, data: inserted });
+    } catch (err) {
+      await client.query("ROLLBACK");
+      throw err;
+    } finally {
+      client.release();
+    }
+  } catch (error: any) {
+    logger.error("품목 일괄 등록 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
+
+/**
+ * 등록 품목 제거
+ */
+export async function unregisterItem(req: AuthenticatedRequest, res: Response) {
+  try {
+    const companyCode = req.user?.companyCode;
+    if (!companyCode) {
+      return res.status(401).json({ success: false, message: "인증 필요" });
+    }
+
+    const { id } = req.params;
+    const result = await getPool().query(
+      `DELETE FROM item_routing_registered WHERE id = $1 AND company_code = $2 RETURNING id`,
+      [id, companyCode]
+    );
+
+    if (result.rowCount === 0) {
+      return res.status(404).json({ success: false, message: "데이터를 찾을 수 없습니다" });
+    }
+
+    logger.info("등록 품목 제거", { companyCode, id });
+    return res.json({ success: true });
+  } catch (error: any) {
+    logger.error("등록 품목 제거 실패", { error: error.message });
+    return res.status(500).json({ success: false, message: error.message });
+  }
+}
diff --git a/backend-node/src/controllers/screenManagementController.ts b/backend-node/src/controllers/screenManagementController.ts
index cb6df7c4..a232c03d 100644
--- a/backend-node/src/controllers/screenManagementController.ts
+++ b/backend-node/src/controllers/screenManagementController.ts
@@ -614,20 +614,6 @@ export const copyScreenWithModals = async (
       modalScreens: modalScreens || [],
     });
 
-    auditLogService.log({
-      companyCode: targetCompanyCode || companyCode,
-      userId: userId || "",
-      userName: (req.user as any)?.userName || "",
-      action: "COPY",
-      resourceType: "SCREEN",
-      resourceId: id,
-      resourceName: mainScreen?.screenName,
-      summary: `화면 일괄 복사 (메인 1개 + 모달 ${result.modalScreens.length}개, 원본 ID:${id})`,
-      changes: { after: { sourceScreenId: id, targetCompanyCode, mainScreenName: mainScreen?.screenName } },
-      ipAddress: getClientIp(req),
-      requestPath: req.originalUrl,
-    });
-
     res.json({
       success: true,
       data: result,
@@ -663,20 +649,6 @@ export const copyScreen = async (
       }
     );
 
-    auditLogService.log({
-      companyCode,
-      userId: userId || "",
-      userName: (req.user as any)?.userName || "",
-      action: "COPY",
-      resourceType: "SCREEN",
-      resourceId: String(copiedScreen?.screenId || ""),
-      resourceName: screenName,
-      summary: `화면 "${screenName}" 복사 (원본 ID:${id})`,
-      changes: { after: { sourceScreenId: id, screenName, screenCode } },
-      ipAddress: getClientIp(req),
-      requestPath: req.originalUrl,
-    });
-
     res.json({
       success: true,
       data: copiedScreen,
diff --git a/backend-node/src/controllers/tableManagementController.ts b/backend-node/src/controllers/tableManagementController.ts
index 0ab73e09..5c53094f 100644
--- a/backend-node/src/controllers/tableManagementController.ts
+++ b/backend-node/src/controllers/tableManagementController.ts
@@ -963,6 +963,15 @@ export async function addTableData(
 
     logger.info(`테이블 데이터 추가 완료: ${tableName}, id: ${result.insertedId}`);
 
+    const systemFields = new Set([
+      "id", "created_date", "updated_date", "writer", "company_code",
+      "createdDate", "updatedDate", "companyCode",
+    ]);
+    const auditData: Record<string, any> = {};
+    for (const [k, v] of Object.entries(data)) {
+      if (!systemFields.has(k)) auditData[k] = v;
+    }
+
     auditLogService.log({
       companyCode: req.user?.companyCode || "",
       userId: req.user?.userId || "",
@@ -973,7 +982,7 @@ export async function addTableData(
       resourceName: tableName,
       tableName,
       summary: `${tableName} 데이터 추가`,
-      changes: { after: data },
+      changes: { after: auditData },
       ipAddress: getClientIp(req),
       requestPath: req.originalUrl,
     });
@@ -1096,10 +1105,14 @@ export async function editTableData(
       return;
     }
 
-    // 변경된 필드만 추출
+    const systemFieldsForEdit = new Set([
+      "id", "created_date", "updated_date", "writer", "company_code",
+      "createdDate", "updatedDate", "companyCode",
+    ]);
     const changedBefore: Record<string, any> = {};
     const changedAfter: Record<string, any> = {};
     for (const key of Object.keys(updatedData)) {
+      if (systemFieldsForEdit.has(key)) continue;
       if (String(originalData[key] ?? "") !== String(updatedData[key] ?? "")) {
         changedBefore[key] = originalData[key];
         changedAfter[key] = updatedData[key];
diff --git a/backend-node/src/routes/adminRoutes.ts b/backend-node/src/routes/adminRoutes.ts
index b9964962..a0779d50 100644
--- a/backend-node/src/routes/adminRoutes.ts
+++ b/backend-node/src/routes/adminRoutes.ts
@@ -2,6 +2,7 @@ import { Router } from "express";
 import {
   getAdminMenus,
   getUserMenus,
+  getPopMenus,
   getMenuInfo,
   saveMenu, // 메뉴 추가
   updateMenu, // 메뉴 수정
@@ -40,6 +41,7 @@ router.use(authenticateToken);
 // 메뉴 관련 API
 router.get("/menus", getAdminMenus);
 router.get("/user-menus", getUserMenus);
+router.get("/pop-menus", getPopMenus);
 router.get("/menus/:menuId", getMenuInfo);
 router.post("/menus", saveMenu); // 메뉴 추가
 router.post("/menus/:menuObjid/copy", copyMenu); // 메뉴 복사 (NEW!)
diff --git a/backend-node/src/routes/auditLogRoutes.ts b/backend-node/src/routes/auditLogRoutes.ts
index 0d219018..4c6392a8 100644
--- a/backend-node/src/routes/auditLogRoutes.ts
+++ b/backend-node/src/routes/auditLogRoutes.ts
@@ -1,11 +1,12 @@
 import { Router } from "express";
 import { authenticateToken } from "../middleware/authMiddleware";
-import { getAuditLogs, getAuditLogStats, getAuditLogUsers } from "../controllers/auditLogController";
+import { getAuditLogs, getAuditLogStats, getAuditLogUsers, createAuditLog } from "../controllers/auditLogController";
 
 const router = Router();
 
 router.get("/", authenticateToken, getAuditLogs);
 router.get("/stats", authenticateToken, getAuditLogStats);
 router.get("/users", authenticateToken, getAuditLogUsers);
+router.post("/", authenticateToken, createAuditLog);
 
 export default router;
diff --git a/backend-node/src/routes/popActionRoutes.ts b/backend-node/src/routes/popActionRoutes.ts
index 730572d8..d25c6bdc 100644
--- a/backend-node/src/routes/popActionRoutes.ts
+++ b/backend-node/src/routes/popActionRoutes.ts
@@ -17,6 +17,7 @@ interface AutoGenMappingInfo {
   numberingRuleId: string;
   targetColumn: string;
   showResultModal?: boolean;
+  shareAcrossItems?: boolean;
 }
 
 interface HiddenMappingInfo {
@@ -182,6 +183,31 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
                 throw new Error(`유효하지 않은 테이블명: ${cardMapping.targetTable}`);
               }
 
+              const allAutoGen = [
+                ...(fieldMapping?.autoGenMappings ?? []),
+                ...(cardMapping?.autoGenMappings ?? []),
+              ];
+
+              // 일괄 채번: shareAcrossItems=true인 매핑은 루프 전 1회만 채번
+              const sharedCodes: Record<string, string> = {};
+              for (const ag of allAutoGen) {
+                if (!ag.shareAcrossItems) continue;
+                if (!ag.numberingRuleId || !ag.targetColumn) continue;
+                if (!isSafeIdentifier(ag.targetColumn)) continue;
+                try {
+                  const code = await numberingRuleService.allocateCode(
+                    ag.numberingRuleId, companyCode, { ...fieldValues, ...(items[0] ?? {}) },
+                  );
+                  sharedCodes[ag.targetColumn] = code;
+                  generatedCodes.push({ targetColumn: ag.targetColumn, code, showResultModal: ag.showResultModal ?? false });
+                  logger.info("[pop/execute-action] 일괄 채번 완료", {
+                    ruleId: ag.numberingRuleId, targetColumn: ag.targetColumn, code,
+                  });
+                } catch (err: any) {
+                  logger.error("[pop/execute-action] 일괄 채번 실패", { ruleId: ag.numberingRuleId, error: err.message });
+                }
+              }
+
               for (const item of items) {
                 const columns: string[] = ["company_code"];
                 const values: unknown[] = [companyCode];
@@ -225,26 +251,41 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
                   values.push(value);
                 }
 
-                const allAutoGen = [
-                  ...(fieldMapping?.autoGenMappings ?? []),
-                  ...(cardMapping?.autoGenMappings ?? []),
-                ];
                 for (const ag of allAutoGen) {
                   if (!ag.numberingRuleId || !ag.targetColumn) continue;
                   if (!isSafeIdentifier(ag.targetColumn)) continue;
                   if (columns.includes(`"${ag.targetColumn}"`)) continue;
-                  try {
-                    const generatedCode = await numberingRuleService.allocateCode(
-                      ag.numberingRuleId, companyCode, { ...fieldValues, ...item },
-                    );
+
+                  if (ag.shareAcrossItems && sharedCodes[ag.targetColumn]) {
                     columns.push(`"${ag.targetColumn}"`);
-                    values.push(generatedCode);
-                    generatedCodes.push({ targetColumn: ag.targetColumn, code: generatedCode, showResultModal: ag.showResultModal ?? false });
-                  } catch (err: any) {
-                    logger.error("[pop/execute-action] 채번 실패", { ruleId: ag.numberingRuleId, error: err.message });
+                    values.push(sharedCodes[ag.targetColumn]);
+                  } else if (!ag.shareAcrossItems) {
+                    try {
+                      const generatedCode = await numberingRuleService.allocateCode(
+                        ag.numberingRuleId, companyCode, { ...fieldValues, ...item },
+                      );
+                      columns.push(`"${ag.targetColumn}"`);
+                      values.push(generatedCode);
+                      generatedCodes.push({ targetColumn: ag.targetColumn, code: generatedCode, showResultModal: ag.showResultModal ?? false });
+                    } catch (err: any) {
+                      logger.error("[pop/execute-action] 채번 실패", { ruleId: ag.numberingRuleId, error: err.message });
+                    }
                   }
                 }
 
+                if (!columns.includes('"created_date"')) {
+                  columns.push('"created_date"');
+                  values.push(new Date().toISOString());
+                }
+                if (!columns.includes('"updated_date"')) {
+                  columns.push('"updated_date"');
+                  values.push(new Date().toISOString());
+                }
+                if (!columns.includes('"writer"') && userId) {
+                  columns.push('"writer"');
+                  values.push(userId);
+                }
+
                 if (columns.length > 1) {
                   const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
                   await client.query(
@@ -292,8 +333,9 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
               for (let i = 0; i < lookupValues.length; i++) {
                 const item = items[i] ?? {};
                 const resolved = resolveStatusValue("conditional", task.fixedValue ?? "", task.conditionalValue, item);
+                const autoUpdated = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
                 await client.query(
-                  `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1 WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                  `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = $1${autoUpdated} WHERE company_code = $2 AND "${pkColumn}" = $3`,
                   [resolved, companyCode, lookupValues[i]],
                 );
                 processedCount++;
@@ -311,9 +353,10 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
 
               const caseSql = `CASE WHEN COALESCE("${task.compareColumn}"::numeric, 0) ${op} COALESCE("${task.compareWith}"::numeric, 0) THEN $1 ELSE $2 END`;
 
+              const autoUpdatedDb = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
               const placeholders = lookupValues.map((_, i) => `$${i + 4}`).join(", ");
               await client.query(
-                `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = ${caseSql} WHERE company_code = $3 AND "${pkColumn}" IN (${placeholders})`,
+                `UPDATE "${task.targetTable}" SET "${task.targetColumn}" = ${caseSql}${autoUpdatedDb} WHERE company_code = $3 AND "${pkColumn}" IN (${placeholders})`,
                 [thenVal, elseVal, companyCode, ...lookupValues],
               );
               processedCount += lookupValues.length;
@@ -325,7 +368,14 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
                 if (valSource === "linked") {
                   value = item[task.sourceField ?? ""] ?? null;
                 } else {
-                  value = task.fixedValue ?? "";
+                  const raw = task.fixedValue ?? "";
+                  if (raw === "__CURRENT_USER__") {
+                    value = userId;
+                  } else if (raw === "__CURRENT_TIME__") {
+                    value = new Date().toISOString();
+                  } else {
+                    value = raw;
+                  }
                 }
 
                 let setSql: string;
@@ -341,8 +391,9 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
                   setSql = `"${task.targetColumn}" = $1`;
                 }
 
+                const autoUpdatedDate = task.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
                 await client.query(
-                  `UPDATE "${task.targetTable}" SET ${setSql} WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                  `UPDATE "${task.targetTable}" SET ${setSql}${autoUpdatedDate} WHERE company_code = $2 AND "${pkColumn}" = $3`,
                   [value, companyCode, lookupValues[i]],
                 );
                 processedCount++;
@@ -448,6 +499,31 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
           throw new Error(`유효하지 않은 테이블명: ${cardMapping.targetTable}`);
         }
 
+        const allAutoGen = [
+          ...(fieldMapping?.autoGenMappings ?? []),
+          ...(cardMapping?.autoGenMappings ?? []),
+        ];
+
+        // 일괄 채번: shareAcrossItems=true인 매핑은 루프 전 1회만 채번
+        const sharedCodes: Record<string, string> = {};
+        for (const ag of allAutoGen) {
+          if (!ag.shareAcrossItems) continue;
+          if (!ag.numberingRuleId || !ag.targetColumn) continue;
+          if (!isSafeIdentifier(ag.targetColumn)) continue;
+          try {
+            const code = await numberingRuleService.allocateCode(
+              ag.numberingRuleId, companyCode, { ...fieldValues, ...(items[0] ?? {}) },
+            );
+            sharedCodes[ag.targetColumn] = code;
+            generatedCodes.push({ targetColumn: ag.targetColumn, code, showResultModal: ag.showResultModal ?? false });
+            logger.info("[pop/execute-action] 일괄 채번 완료", {
+              ruleId: ag.numberingRuleId, targetColumn: ag.targetColumn, code,
+            });
+          } catch (err: any) {
+            logger.error("[pop/execute-action] 일괄 채번 실패", { ruleId: ag.numberingRuleId, error: err.message });
+          }
+        }
+
         for (const item of items) {
           const columns: string[] = ["company_code"];
           const values: unknown[] = [companyCode];
@@ -467,7 +543,6 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
             }
           }
 
-          // 숨은 필드 매핑 처리 (고정값 / JSON추출 / DB컬럼)
           const allHidden = [
             ...(fieldMapping?.hiddenMappings ?? []),
             ...(cardMapping?.hiddenMappings ?? []),
@@ -494,37 +569,44 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
             values.push(value);
           }
 
-          // 채번 규칙 실행: field + cardList의 autoGenMappings에서 코드 발급
-          const allAutoGen = [
-            ...(fieldMapping?.autoGenMappings ?? []),
-            ...(cardMapping?.autoGenMappings ?? []),
-          ];
           for (const ag of allAutoGen) {
             if (!ag.numberingRuleId || !ag.targetColumn) continue;
             if (!isSafeIdentifier(ag.targetColumn)) continue;
             if (columns.includes(`"${ag.targetColumn}"`)) continue;
-            try {
-              const generatedCode = await numberingRuleService.allocateCode(
-                ag.numberingRuleId,
-                companyCode,
-                { ...fieldValues, ...item },
-              );
+
+            if (ag.shareAcrossItems && sharedCodes[ag.targetColumn]) {
               columns.push(`"${ag.targetColumn}"`);
-              values.push(generatedCode);
-              generatedCodes.push({ targetColumn: ag.targetColumn, code: generatedCode, showResultModal: ag.showResultModal ?? false });
-              logger.info("[pop/execute-action] 채번 완료", {
-                ruleId: ag.numberingRuleId,
-                targetColumn: ag.targetColumn,
-                generatedCode,
-              });
-            } catch (err: any) {
-              logger.error("[pop/execute-action] 채번 실패", {
-                ruleId: ag.numberingRuleId,
-                error: err.message,
-              });
+              values.push(sharedCodes[ag.targetColumn]);
+            } else if (!ag.shareAcrossItems) {
+              try {
+                const generatedCode = await numberingRuleService.allocateCode(
+                  ag.numberingRuleId, companyCode, { ...fieldValues, ...item },
+                );
+                columns.push(`"${ag.targetColumn}"`);
+                values.push(generatedCode);
+                generatedCodes.push({ targetColumn: ag.targetColumn, code: generatedCode, showResultModal: ag.showResultModal ?? false });
+                logger.info("[pop/execute-action] 채번 완료", {
+                  ruleId: ag.numberingRuleId, targetColumn: ag.targetColumn, generatedCode,
+                });
+              } catch (err: any) {
+                logger.error("[pop/execute-action] 채번 실패", { ruleId: ag.numberingRuleId, error: err.message });
+              }
             }
           }
 
+          if (!columns.includes('"created_date"')) {
+            columns.push('"created_date"');
+            values.push(new Date().toISOString());
+          }
+          if (!columns.includes('"updated_date"')) {
+            columns.push('"updated_date"');
+            values.push(new Date().toISOString());
+          }
+          if (!columns.includes('"writer"') && userId) {
+            columns.push('"writer"');
+            values.push(userId);
+          }
+
           if (columns.length > 1) {
             const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
             const sql = `INSERT INTO "${cardMapping.targetTable}" (${columns.join(", ")}) VALUES (${placeholders})`;
@@ -558,6 +640,19 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
           values.push(fieldValues[sourceField] ?? null);
         }
 
+        if (!columns.includes('"created_date"')) {
+          columns.push('"created_date"');
+          values.push(new Date().toISOString());
+        }
+        if (!columns.includes('"updated_date"')) {
+          columns.push('"updated_date"');
+          values.push(new Date().toISOString());
+        }
+        if (!columns.includes('"writer"') && userId) {
+          columns.push('"writer"');
+          values.push(userId);
+        }
+
         if (columns.length > 1) {
           const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
           const sql = `INSERT INTO "${fieldMapping.targetTable}" (${columns.join(", ")}) VALUES (${placeholders})`;
@@ -609,16 +704,18 @@ router.post("/execute-action", authenticateToken, async (req: Request, res: Resp
           }
 
           if (valueType === "fixed") {
+            const autoUpd = rule.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
             const placeholders = lookupValues.map((_, i) => `$${i + 3}`).join(", ");
-            const sql = `UPDATE "${rule.targetTable}" SET "${rule.targetColumn}" = $1 WHERE company_code = $2 AND "${pkColumn}" IN (${placeholders})`;
+            const sql = `UPDATE "${rule.targetTable}" SET "${rule.targetColumn}" = $1${autoUpd} WHERE company_code = $2 AND "${pkColumn}" IN (${placeholders})`;
             await client.query(sql, [fixedValue, companyCode, ...lookupValues]);
             processedCount += lookupValues.length;
           } else {
             for (let i = 0; i < lookupValues.length; i++) {
               const item = items[i] ?? {};
               const resolvedValue = resolveStatusValue(valueType, fixedValue, rule.conditionalValue, item);
+              const autoUpd2 = rule.targetColumn !== "updated_date" ? `, "updated_date" = NOW()` : "";
               await client.query(
-                `UPDATE "${rule.targetTable}" SET "${rule.targetColumn}" = $1 WHERE company_code = $2 AND "${pkColumn}" = $3`,
+                `UPDATE "${rule.targetTable}" SET "${rule.targetColumn}" = $1${autoUpd2} WHERE company_code = $2 AND "${pkColumn}" = $3`,
                 [resolvedValue, companyCode, lookupValues[i]]
               );
               processedCount++;
diff --git a/backend-node/src/routes/processWorkStandardRoutes.ts b/backend-node/src/routes/processWorkStandardRoutes.ts
index 7630b359..c613d55f 100644
--- a/backend-node/src/routes/processWorkStandardRoutes.ts
+++ b/backend-node/src/routes/processWorkStandardRoutes.ts
@@ -33,4 +33,10 @@ router.delete("/work-item-details/:id", ctrl.deleteWorkItemDetail);
 // 전체 저장 (일괄)
 router.put("/save-all", ctrl.saveAll);
 
+// 등록 품목 관리 (화면별 품목 목록)
+router.get("/registered-items/:screenCode", ctrl.getRegisteredItems);
+router.post("/registered-items", ctrl.registerItem);
+router.post("/registered-items/batch", ctrl.registerItemsBatch);
+router.delete("/registered-items/:id", ctrl.unregisterItem);
+
 export default router;
diff --git a/backend-node/src/services/adminService.ts b/backend-node/src/services/adminService.ts
index e5d0c1a0..a27fcc77 100644
--- a/backend-node/src/services/adminService.ts
+++ b/backend-node/src/services/adminService.ts
@@ -621,6 +621,74 @@ export class AdminService {
     }
   }
 
+  /**
+   * POP 메뉴 목록 조회
+   * menu_name_kor에 'POP'이 포함되거나 menu_desc에 [POP] 태그가 있는 L1 메뉴의 하위 active 메뉴를 반환
+   * [POP_LANDING] 태그가 있는 하위 메뉴를 landingMenu로 별도 반환
+   */
+  static async getPopMenuList(paramMap: any): Promise<{ parentMenu: any | null; childMenus: any[]; landingMenu: any | null }> {
+    try {
+      const { userCompanyCode, userType } = paramMap;
+      logger.info("AdminService.getPopMenuList 시작", { userCompanyCode, userType });
+
+      let queryParams: any[] = [];
+      let paramIndex = 1;
+
+      let companyFilter = "";
+      if (userType === "SUPER_ADMIN" && userCompanyCode === "*") {
+        companyFilter = `AND COMPANY_CODE = '*'`;
+      } else {
+        companyFilter = `AND COMPANY_CODE = $${paramIndex}`;
+        queryParams.push(userCompanyCode);
+        paramIndex++;
+      }
+
+      // POP L1 메뉴 조회
+      const parentMenus = await query<any>(
+        `SELECT OBJID, MENU_NAME_KOR, MENU_URL, MENU_DESC, SEQ, COMPANY_CODE, STATUS
+         FROM MENU_INFO
+         WHERE PARENT_OBJ_ID = 0
+           AND MENU_TYPE = 1
+           AND (
+             MENU_DESC LIKE '%[POP]%'
+             OR UPPER(MENU_NAME_KOR) LIKE '%POP%'
+           )
+           ${companyFilter}
+         ORDER BY SEQ
+         LIMIT 1`,
+        queryParams
+      );
+
+      if (parentMenus.length === 0) {
+        logger.info("POP 메뉴 없음 (L1 POP 메뉴 미발견)");
+        return { parentMenu: null, childMenus: [], landingMenu: null };
+      }
+
+      const parentMenu = parentMenus[0];
+
+      // 하위 active 메뉴 조회 (부모와 같은 company_code로 필터링)
+      const childMenus = await query<any>(
+        `SELECT OBJID, MENU_NAME_KOR, MENU_URL, MENU_DESC, SEQ, COMPANY_CODE, STATUS
+         FROM MENU_INFO
+         WHERE PARENT_OBJ_ID = $1
+           AND STATUS = 'active'
+           AND COMPANY_CODE = $2
+         ORDER BY SEQ`,
+        [parentMenu.objid, parentMenu.company_code]
+      );
+
+      // [POP_LANDING] 태그가 있는 메뉴를 랜딩 화면으로 지정
+      const landingMenu = childMenus.find((m: any) => m.menu_desc?.includes("[POP_LANDING]")) || null;
+
+      logger.info(`POP 메뉴 조회 완료: 부모=${parentMenu.menu_name_kor}, 하위=${childMenus.length}개, 랜딩=${landingMenu?.menu_name_kor || '없음'}`);
+
+      return { parentMenu, childMenus, landingMenu };
+    } catch (error) {
+      logger.error("AdminService.getPopMenuList 오류:", error);
+      throw error;
+    }
+  }
+
   /**
    * 메뉴 정보 조회
    */
diff --git a/backend-node/src/services/auditLogService.ts b/backend-node/src/services/auditLogService.ts
index 9ac3e35e..c86a71fd 100644
--- a/backend-node/src/services/auditLogService.ts
+++ b/backend-node/src/services/auditLogService.ts
@@ -66,6 +66,7 @@ export interface AuditLogParams {
 export interface AuditLogEntry {
   id: number;
   company_code: string;
+  company_name: string | null;
   user_id: string;
   user_name: string | null;
   action: string;
@@ -107,6 +108,7 @@ class AuditLogService {
    */
   async log(params: AuditLogParams): Promise<void> {
     try {
+      logger.info(`[AuditLog] 기록 시도: ${params.resourceType} / ${params.action} / ${params.resourceName || params.resourceId || "N/A"}`);
       await query(
         `INSERT INTO system_audit_log 
           (company_code, user_id, user_name, action, resource_type, 
@@ -128,8 +130,9 @@ class AuditLogService {
           params.requestPath || null,
         ]
       );
-    } catch (error) {
-      logger.error("감사 로그 기록 실패 (무시됨)", { error, params });
+      logger.info(`[AuditLog] 기록 성공: ${params.resourceType} / ${params.action}`);
+    } catch (error: any) {
+      logger.error(`[AuditLog] 기록 실패: ${params.resourceType} / ${params.action} - ${error?.message}`, { error, params });
     }
   }
 
@@ -186,40 +189,40 @@ class AuditLogService {
     let paramIndex = 1;
 
     if (!isSuperAdmin && filters.companyCode) {
-      conditions.push(`company_code = $${paramIndex++}`);
+      conditions.push(`sal.company_code = $${paramIndex++}`);
       params.push(filters.companyCode);
     } else if (isSuperAdmin && filters.companyCode) {
-      conditions.push(`company_code = $${paramIndex++}`);
+      conditions.push(`sal.company_code = $${paramIndex++}`);
       params.push(filters.companyCode);
     }
 
     if (filters.userId) {
-      conditions.push(`user_id = $${paramIndex++}`);
+      conditions.push(`sal.user_id = $${paramIndex++}`);
       params.push(filters.userId);
     }
     if (filters.resourceType) {
-      conditions.push(`resource_type = $${paramIndex++}`);
+      conditions.push(`sal.resource_type = $${paramIndex++}`);
       params.push(filters.resourceType);
     }
     if (filters.action) {
-      conditions.push(`action = $${paramIndex++}`);
+      conditions.push(`sal.action = $${paramIndex++}`);
       params.push(filters.action);
     }
     if (filters.tableName) {
-      conditions.push(`table_name = $${paramIndex++}`);
+      conditions.push(`sal.table_name = $${paramIndex++}`);
       params.push(filters.tableName);
     }
     if (filters.dateFrom) {
-      conditions.push(`created_at >= $${paramIndex++}::timestamptz`);
+      conditions.push(`sal.created_at >= $${paramIndex++}::timestamptz`);
       params.push(filters.dateFrom);
     }
     if (filters.dateTo) {
-      conditions.push(`created_at <= $${paramIndex++}::timestamptz`);
+      conditions.push(`sal.created_at <= $${paramIndex++}::timestamptz`);
       params.push(filters.dateTo);
     }
     if (filters.search) {
       conditions.push(
-        `(summary ILIKE $${paramIndex} OR resource_name ILIKE $${paramIndex} OR user_name ILIKE $${paramIndex})`
+        `(sal.summary ILIKE $${paramIndex} OR sal.resource_name ILIKE $${paramIndex} OR sal.user_name ILIKE $${paramIndex})`
       );
       params.push(`%${filters.search}%`);
       paramIndex++;
@@ -233,14 +236,17 @@ class AuditLogService {
     const offset = (page - 1) * limit;
 
     const countResult = await query<{ count: string }>(
-      `SELECT COUNT(*) as count FROM system_audit_log ${whereClause}`,
+      `SELECT COUNT(*) as count FROM system_audit_log sal ${whereClause}`,
       params
     );
     const total = parseInt(countResult[0].count, 10);
 
     const data = await query<AuditLogEntry>(
-      `SELECT * FROM system_audit_log ${whereClause} 
-       ORDER BY created_at DESC 
+      `SELECT sal.*, ci.company_name
+       FROM system_audit_log sal
+       LEFT JOIN company_mng ci ON sal.company_code = ci.company_code
+       ${whereClause} 
+       ORDER BY sal.created_at DESC 
        LIMIT $${paramIndex++} OFFSET $${paramIndex++}`,
       [...params, limit, offset]
     );
diff --git a/backend-node/src/services/tableManagementService.ts b/backend-node/src/services/tableManagementService.ts
index 0273b1fc..2ddae736 100644
--- a/backend-node/src/services/tableManagementService.ts
+++ b/backend-node/src/services/tableManagementService.ts
@@ -4504,26 +4504,30 @@ export class TableManagementService {
 
       const rawColumns = await query<any>(
         `SELECT 
-          column_name as "columnName",
-          column_name as "displayName",
-          data_type as "dataType",
-          udt_name as "dbType",
-          is_nullable as "isNullable",
-          column_default as "defaultValue",
-          character_maximum_length as "maxLength",
-          numeric_precision as "numericPrecision",
-          numeric_scale as "numericScale",
+          c.column_name as "columnName",
+          c.column_name as "displayName",
+          c.data_type as "dataType",
+          c.udt_name as "dbType",
+          c.is_nullable as "isNullable",
+          c.column_default as "defaultValue",
+          c.character_maximum_length as "maxLength",
+          c.numeric_precision as "numericPrecision",
+          c.numeric_scale as "numericScale",
           CASE 
-            WHEN column_name IN (
-              SELECT column_name FROM information_schema.key_column_usage 
-              WHERE table_name = $1 AND constraint_name LIKE '%_pkey'
+            WHEN c.column_name IN (
+              SELECT kcu.column_name FROM information_schema.key_column_usage kcu
+              WHERE kcu.table_name = $1 AND kcu.constraint_name LIKE '%_pkey'
             ) THEN true 
             ELSE false 
-          END as "isPrimaryKey"
-        FROM information_schema.columns
-        WHERE table_name = $1
-          AND table_schema = 'public'
-        ORDER BY ordinal_position`,
+          END as "isPrimaryKey",
+          col_description(
+            (SELECT oid FROM pg_class WHERE relname = $1 AND relnamespace = (SELECT oid FROM pg_namespace WHERE nspname = 'public')),
+            c.ordinal_position
+          ) as "columnComment"
+        FROM information_schema.columns c
+        WHERE c.table_name = $1
+          AND c.table_schema = 'public'
+        ORDER BY c.ordinal_position`,
         [tableName]
       );
 
@@ -4533,10 +4537,10 @@ export class TableManagementService {
         displayName: col.displayName,
         dataType: col.dataType,
         dbType: col.dbType,
-        webType: "text", // 기본값
+        webType: "text",
         inputType: "direct",
         detailSettings: "{}",
-        description: "", // 필수 필드 추가
+        description: col.columnComment || "",
         isNullable: col.isNullable,
         isPrimaryKey: col.isPrimaryKey,
         defaultValue: col.defaultValue,
@@ -4547,6 +4551,7 @@ export class TableManagementService {
         numericScale: col.numericScale ? Number(col.numericScale) : undefined,
         displayOrder: 0,
         isVisible: true,
+        columnComment: col.columnComment || "",
       }));
 
       logger.info(
diff --git a/docs/POP_작업진행_설계서.md b/docs/POP_작업진행_설계서.md
new file mode 100644
index 00000000..3b77ddc5
--- /dev/null
+++ b/docs/POP_작업진행_설계서.md
@@ -0,0 +1,620 @@
+# POP 작업진행 관리 설계서
+
+> 작성일: 2026-03-13
+> 목적: POP 시스템에서 작업지시 기반으로 라우팅/작업기준정보를 조회하고, 공정별 작업 진행 상태를 관리하는 구조 설계
+
+---
+
+## 1. 핵심 설계 원칙
+
+**작업지시에 라우팅ID, 작업기준정보ID 등을 별도 컬럼으로 넣지 않는다.**
+
+- 작업지시(`work_instruction`)에는 `item_id`(품목 ID)만 있으면 충분
+- 품목 → 라우팅 → 작업기준정보는 마스터 데이터 체인으로 조회
+- 작업 진행 상태만 별도 테이블에서 관리
+
+---
+
+## 2. 기존 테이블 구조 (마스터 데이터)
+
+### 2-1. ER 다이어그램
+
+> GitHub / VSCode Mermaid 플러그인에서 렌더링됩니다.
+
+```mermaid
+erDiagram
+    %% ========== 마스터 데이터 (변경 없음) ==========
+
+    item_info {
+        varchar id PK "UUID"
+        varchar item_number "품번"
+        varchar item_name "품명"
+        varchar company_code "회사코드"
+    }
+
+    item_routing_version {
+        varchar id PK "UUID"
+        varchar item_code "품번 (= item_info.item_number)"
+        varchar version_name "버전명"
+        boolean is_default "기본버전 여부"
+        varchar company_code "회사코드"
+    }
+
+    item_routing_detail {
+        varchar id PK "UUID"
+        varchar routing_version_id FK "→ item_routing_version.id"
+        varchar seq_no "공정순서 10,20,30..."
+        varchar process_code FK "→ process_mng.process_code"
+        varchar is_required "필수/선택"
+        varchar is_fixed_order "고정/선택"
+        varchar standard_time "표준시간(분)"
+        varchar company_code "회사코드"
+    }
+
+    process_mng {
+        varchar id PK "UUID"
+        varchar process_code "공정코드"
+        varchar process_name "공정명"
+        varchar process_type "공정유형"
+        varchar company_code "회사코드"
+    }
+
+    process_work_item {
+        varchar id PK "UUID"
+        varchar routing_detail_id FK "→ item_routing_detail.id"
+        varchar work_phase "PRE / IN / POST"
+        varchar title "작업항목명"
+        varchar is_required "Y/N"
+        int sort_order "정렬순서"
+        varchar company_code "회사코드"
+    }
+
+    process_work_item_detail {
+        varchar id PK "UUID"
+        varchar work_item_id FK "→ process_work_item.id"
+        varchar detail_type "check/inspect/input/procedure/info"
+        varchar content "내용"
+        varchar input_type "입력타입"
+        varchar inspection_code "검사코드"
+        varchar unit "단위"
+        varchar lower_limit "하한값"
+        varchar upper_limit "상한값"
+        varchar company_code "회사코드"
+    }
+
+    %% ========== 트랜잭션 데이터 ==========
+
+    work_instruction {
+        varchar id PK "UUID"
+        varchar work_instruction_no "작업지시번호"
+        varchar item_id FK "→ item_info.id ★핵심★"
+        varchar status "waiting/in_progress/completed/cancelled"
+        varchar qty "지시수량"
+        varchar completed_qty "완성수량"
+        varchar worker "작업자"
+        varchar company_code "회사코드"
+    }
+
+    work_order_process {
+        varchar id PK "UUID"
+        varchar wo_id FK "→ work_instruction.id"
+        varchar routing_detail_id FK "→ item_routing_detail.id ★추가★"
+        varchar seq_no "공정순서"
+        varchar process_code "공정코드"
+        varchar process_name "공정명"
+        varchar status "waiting/in_progress/completed/skipped"
+        varchar plan_qty "계획수량"
+        varchar good_qty "양품수량"
+        varchar defect_qty "불량수량"
+        timestamp started_at "시작시간"
+        timestamp completed_at "완료시간"
+        varchar company_code "회사코드"
+    }
+
+    work_order_work_item {
+        varchar id PK "UUID ★신규★"
+        varchar company_code "회사코드"
+        varchar work_order_process_id FK "→ work_order_process.id"
+        varchar work_item_id FK "→ process_work_item.id"
+        varchar work_phase "PRE/IN/POST"
+        varchar status "pending/completed/skipped/failed"
+        varchar completed_by "완료자"
+        timestamp completed_at "완료시간"
+    }
+
+    work_order_work_item_result {
+        varchar id PK "UUID ★신규★"
+        varchar company_code "회사코드"
+        varchar work_order_work_item_id FK "→ work_order_work_item.id"
+        varchar work_item_detail_id FK "→ process_work_item_detail.id"
+        varchar detail_type "check/inspect/input/procedure"
+        varchar result_value "결과값"
+        varchar is_passed "Y/N/null"
+        varchar recorded_by "기록자"
+        timestamp recorded_at "기록시간"
+    }
+
+    %% ========== 관계 ==========
+
+    %% 마스터 체인: 품목 → 라우팅 → 작업기준정보
+    item_info ||--o{ item_routing_version : "item_number = item_code"
+    item_routing_version ||--o{ item_routing_detail : "id = routing_version_id"
+    item_routing_detail }o--|| process_mng : "process_code"
+    item_routing_detail ||--o{ process_work_item : "id = routing_detail_id"
+    process_work_item ||--o{ process_work_item_detail : "id = work_item_id"
+
+    %% 트랜잭션: 작업지시 → 공정진행 → 작업기준정보 진행
+    work_instruction }o--|| item_info : "item_id = id"
+    work_instruction ||--o{ work_order_process : "id = wo_id"
+    work_order_process }o--|| item_routing_detail : "routing_detail_id = id"
+    work_order_process ||--o{ work_order_work_item : "id = work_order_process_id"
+    work_order_work_item }o--|| process_work_item : "work_item_id = id"
+    work_order_work_item ||--o{ work_order_work_item_result : "id = work_order_work_item_id"
+    work_order_work_item_result }o--|| process_work_item_detail : "work_item_detail_id = id"
+```
+
+### 2-1-1. 관계 요약 (텍스트)
+
+```
+[마스터 데이터 체인 - 조회용, 변경 없음]
+
+  item_info ─── 1:N ───→ item_routing_version ─── 1:N ───→ item_routing_detail
+  (품목)      item_number    (라우팅 버전)     routing_      (공정별 상세)
+              = item_code                      version_id
+                                                    │
+                                    process_mng ◄───┘ process_code (공정 마스터)
+                                                    │
+                                                    ├── 1:N ───→ process_work_item ─── 1:N ───→ process_work_item_detail
+                                                    │             (작업기준정보)                   (작업기준정보 상세)
+                                                    │             routing_detail_id                 work_item_id
+                                                    │
+[트랜잭션 데이터 - 상태 관리]                        │
+                                                    │
+  work_instruction ─── 1:N ───→ work_order_process ─┘ routing_detail_id (★추가★)
+  (작업지시)         wo_id       (공정별 진행)
+  item_id → item_info                │
+                                     ├── 1:N ───→ work_order_work_item ─── 1:N ───→ work_order_work_item_result
+                                     │             (작업기준정보 진행)                  (상세 결과값)
+                                     │             work_order_process_id               work_order_work_item_id
+                                     │             work_item_id → process_work_item    work_item_detail_id → process_work_item_detail
+                                     │             ★신규 테이블★                        ★신규 테이블★
+```
+
+### 2-2. 마스터 테이블 상세
+
+#### item_info (품목 마스터)
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| item_number | 품번 | item_routing_version.item_code와 매칭 |
+| item_name | 품명 | |
+| company_code | 회사코드 | 멀티테넌시 |
+
+#### item_routing_version (라우팅 버전)
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| item_code | 품번 | item_info.item_number와 매칭 |
+| version_name | 버전명 | 예: "기본 라우팅", "버전2" |
+| is_default | 기본 버전 여부 | true/false, 기본 버전을 사용 |
+| company_code | 회사코드 | |
+
+#### item_routing_detail (라우팅 상세 - 공정별)
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| routing_version_id | FK → item_routing_version.id | |
+| seq_no | 공정 순서 | 10, 20, 30... |
+| process_code | 공정코드 | FK → process_mng.process_code |
+| is_required | 필수/선택 | "필수" / "선택" |
+| is_fixed_order | 순서고정 여부 | "고정" / "선택" |
+| work_type | 작업유형 | |
+| standard_time | 표준시간(분) | |
+| outsource_supplier | 외주업체 | |
+| company_code | 회사코드 | |
+
+#### process_work_item (작업기준정보)
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| routing_detail_id | FK → item_routing_detail.id | |
+| work_phase | 작업단계 | PRE(작업전) / IN(작업중) / POST(작업후) |
+| title | 작업항목명 | 예: "장비 체크", "소재 준비" |
+| is_required | 필수여부 | Y/N |
+| sort_order | 정렬순서 | |
+| description | 설명 | |
+| company_code | 회사코드 | |
+
+#### process_work_item_detail (작업기준정보 상세)
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| work_item_id | FK → process_work_item.id | |
+| detail_type | 상세유형 | check(체크) / inspect(검사) / input(입력) / procedure(절차) / info(정보) |
+| content | 내용 | 예: "소음검사", "치수검사" |
+| input_type | 입력타입 | select, text 등 |
+| inspection_code | 검사코드 | |
+| inspection_method | 검사방법 | |
+| unit | 단위 | |
+| lower_limit | 하한값 | |
+| upper_limit | 상한값 | |
+| is_required | 필수여부 | Y/N |
+| sort_order | 정렬순서 | |
+| company_code | 회사코드 | |
+
+---
+
+## 3. 작업 진행 테이블 (트랜잭션 데이터)
+
+### 3-1. work_instruction (작업지시) - 기존 테이블
+
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| work_instruction_no | 작업지시번호 | 예: WO-2026-001 |
+| **item_id** | **FK → item_info.id** | **이것만으로 라우팅/작업기준정보 전부 조회 가능** |
+| status | 작업지시 상태 | waiting / in_progress / completed / cancelled |
+| qty | 지시수량 | |
+| completed_qty | 완성수량 | |
+| work_team | 작업팀 | |
+| worker | 작업자 | |
+| equipment_id | 설비 | |
+| start_date | 시작일 | |
+| end_date | 종료일 | |
+| remark | 비고 | |
+| company_code | 회사코드 | |
+
+> **routing 컬럼**: 현재 존재하지만 사용하지 않음 (null). 라우팅 버전을 지정하고 싶으면 이 컬럼에 `item_routing_version.id`를 넣어 특정 버전을 지정할 수 있음. 없으면 `is_default=true` 버전 자동 사용.
+
+### 3-2. work_order_process (공정별 진행) - 기존 테이블, 변경 필요
+
+작업지시가 생성될 때, 해당 품목의 라우팅 공정을 복사해서 이 테이블에 INSERT.
+
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | |
+| wo_id | FK → work_instruction.id | 작업지시 참조 |
+| **routing_detail_id** | **FK → item_routing_detail.id** | **추가 필요 - 라우팅 상세 참조** |
+| seq_no | 공정 순서 | 라우팅에서 복사 |
+| process_code | 공정코드 | 라우팅에서 복사 |
+| process_name | 공정명 | 라우팅에서 복사 (비정규화, 조회 편의) |
+| is_required | 필수여부 | 라우팅에서 복사 |
+| is_fixed_order | 순서고정 | 라우팅에서 복사 |
+| standard_time | 표준시간 | 라우팅에서 복사 |
+| **status** | **공정 상태** | **waiting / in_progress / completed / skipped** |
+| plan_qty | 계획수량 | |
+| input_qty | 투입수량 | |
+| good_qty | 양품수량 | |
+| defect_qty | 불량수량 | |
+| equipment_code | 사용설비 | |
+| accepted_by | 접수자 | |
+| accepted_at | 접수시간 | |
+| started_at | 시작시간 | |
+| completed_at | 완료시간 | |
+| remark | 비고 | |
+| company_code | 회사코드 | |
+
+### 3-3. work_order_work_item (작업기준정보별 진행) - 신규 테이블
+
+POP에서 작업자가 각 작업기준정보 항목을 체크/입력할 때 사용.
+
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | gen_random_uuid() |
+| company_code | 회사코드 | 멀티테넌시 |
+| work_order_process_id | FK → work_order_process.id | 어떤 작업지시의 어떤 공정인지 |
+| work_item_id | FK → process_work_item.id | 어떤 작업기준정보인지 |
+| work_phase | 작업단계 | PRE / IN / POST (마스터에서 복사) |
+| status | 완료상태 | pending / completed / skipped / failed |
+| completed_by | 완료자 | 작업자 ID |
+| completed_at | 완료시간 | |
+| created_date | 생성일 | |
+| updated_date | 수정일 | |
+| writer | 작성자 | |
+
+### 3-4. work_order_work_item_result (작업기준정보 상세 결과) - 신규 테이블
+
+작업기준정보의 상세 항목(체크, 검사, 입력 등)에 대한 실제 결과값 저장.
+
+| 컬럼 | 설명 | 비고 |
+|------|------|------|
+| id | PK (UUID) | gen_random_uuid() |
+| company_code | 회사코드 | 멀티테넌시 |
+| work_order_work_item_id | FK → work_order_work_item.id | |
+| work_item_detail_id | FK → process_work_item_detail.id | 어떤 상세항목인지 |
+| detail_type | 상세유형 | check / inspect / input / procedure (마스터에서 복사) |
+| result_value | 결과값 | 체크: "Y"/"N", 검사: 측정값, 입력: 입력값 |
+| is_passed | 합격여부 | Y / N / null(해당없음) |
+| remark | 비고 | 불합격 사유 등 |
+| recorded_by | 기록자 | |
+| recorded_at | 기록시간 | |
+| created_date | 생성일 | |
+| updated_date | 수정일 | |
+| writer | 작성자 | |
+
+---
+
+## 4. POP 데이터 플로우
+
+### 4-1. 작업지시 등록 시 (ERP 측)
+
+```
+[작업지시 생성]
+  │
+  ├── 1. work_instruction INSERT (item_id, qty, status='waiting' 등)
+  │
+  ├── 2. item_id → item_info.item_number 조회
+  │
+  ├── 3. item_number → item_routing_version 조회 (is_default=true 또는 지정 버전)
+  │
+  ├── 4. routing_version_id → item_routing_detail 조회 (공정 목록)
+  │
+  └── 5. 각 공정별로 work_order_process INSERT
+         ├── wo_id = work_instruction.id
+         ├── routing_detail_id = item_routing_detail.id  ← 핵심!
+         ├── seq_no, process_code, process_name 복사
+         ├── status = 'waiting'
+         └── plan_qty = work_instruction.qty
+```
+
+### 4-2. POP 작업 조회 시
+
+```
+[POP 화면: 작업지시 선택]
+  │
+  ├── 1. work_instruction 목록 조회 (status = 'waiting' or 'in_progress')
+  │
+  ├── 2. 선택한 작업지시의 공정 목록 조회
+  │      SELECT wop.*, pm.process_name
+  │      FROM work_order_process wop
+  │      LEFT JOIN process_mng pm ON wop.process_code = pm.process_code
+  │      WHERE wop.wo_id = {작업지시ID}
+  │      ORDER BY CAST(wop.seq_no AS int)
+  │
+  └── 3. 선택한 공정의 작업기준정보 조회 (마스터 데이터 참조)
+         SELECT pwi.*, pwid.*
+         FROM process_work_item pwi
+         LEFT JOIN process_work_item_detail pwid ON pwi.id = pwid.work_item_id
+         WHERE pwi.routing_detail_id = {work_order_process.routing_detail_id}
+         ORDER BY pwi.work_phase, pwi.sort_order, pwid.sort_order
+```
+
+### 4-3. POP 작업 실행 시
+
+```
+[작업자가 공정 시작]
+  │
+  ├── 1. work_order_process UPDATE
+  │      SET status = 'in_progress', started_at = NOW(), accepted_by = {작업자}
+  │
+  ├── 2. work_instruction UPDATE (첫 공정 시작 시)
+  │      SET status = 'in_progress'
+  │
+  ├── 3. 작업기준정보 항목별 체크/입력 시
+  │      ├── work_order_work_item UPSERT (항목별 상태)
+  │      └── work_order_work_item_result UPSERT (상세 결과값)
+  │
+  └── 4. 공정 완료 시
+         ├── work_order_process UPDATE
+         │    SET status = 'completed', completed_at = NOW(),
+         │        good_qty = {양품}, defect_qty = {불량}
+         │
+         └── (모든 공정 완료 시)
+              work_instruction UPDATE
+              SET status = 'completed', completed_qty = {최종양품}
+```
+
+---
+
+## 5. 핵심 조회 쿼리
+
+### 5-1. 작업지시 → 전체 공정 + 작업기준정보 한방 조회
+
+```sql
+-- 작업지시의 공정별 진행 현황 + 작업기준정보
+SELECT
+  wi.work_instruction_no,
+  wi.qty,
+  wi.status as wi_status,
+  ii.item_number,
+  ii.item_name,
+  wop.id as process_id,
+  wop.seq_no,
+  wop.process_code,
+  wop.process_name,
+  wop.status as process_status,
+  wop.plan_qty,
+  wop.good_qty,
+  wop.defect_qty,
+  wop.started_at,
+  wop.completed_at,
+  wop.routing_detail_id,
+  -- 작업기준정보는 routing_detail_id로 마스터 조회
+  pwi.id as work_item_id,
+  pwi.work_phase,
+  pwi.title as work_item_title,
+  pwi.is_required as work_item_required
+FROM work_instruction wi
+JOIN item_info ii ON wi.item_id = ii.id
+JOIN work_order_process wop ON wi.id = wop.wo_id
+LEFT JOIN process_work_item pwi ON wop.routing_detail_id = pwi.routing_detail_id
+WHERE wi.id = $1
+  AND wi.company_code = $2
+ORDER BY CAST(wop.seq_no AS int), pwi.work_phase, pwi.sort_order;
+```
+
+### 5-2. 특정 공정의 작업기준정보 + 진행 상태 조회
+
+```sql
+-- POP에서 특정 공정 선택 시: 마스터 + 진행 상태 조인
+SELECT
+  pwi.id as work_item_id,
+  pwi.work_phase,
+  pwi.title,
+  pwi.is_required,
+  pwid.id as detail_id,
+  pwid.detail_type,
+  pwid.content,
+  pwid.input_type,
+  pwid.inspection_code,
+  pwid.inspection_method,
+  pwid.unit,
+  pwid.lower_limit,
+  pwid.upper_limit,
+  -- 진행 상태
+  wowi.status as item_status,
+  wowi.completed_by,
+  wowi.completed_at,
+  -- 결과값
+  wowir.result_value,
+  wowir.is_passed,
+  wowir.remark as result_remark
+FROM process_work_item pwi
+LEFT JOIN process_work_item_detail pwid
+  ON pwi.id = pwid.work_item_id
+LEFT JOIN work_order_work_item wowi
+  ON wowi.work_item_id = pwi.id
+  AND wowi.work_order_process_id = $1  -- work_order_process.id
+LEFT JOIN work_order_work_item_result wowir
+  ON wowir.work_order_work_item_id = wowi.id
+  AND wowir.work_item_detail_id = pwid.id
+WHERE pwi.routing_detail_id = $2  -- work_order_process.routing_detail_id
+ORDER BY
+  CASE pwi.work_phase WHEN 'PRE' THEN 1 WHEN 'IN' THEN 2 WHEN 'POST' THEN 3 END,
+  pwi.sort_order,
+  pwid.sort_order;
+```
+
+---
+
+## 6. 변경사항 요약
+
+### 6-1. 기존 테이블 변경
+
+| 테이블 | 변경내용 |
+|--------|---------|
+| work_order_process | `routing_detail_id VARCHAR(500)` 컬럼 추가 |
+
+### 6-2. 신규 테이블
+
+| 테이블 | 용도 |
+|--------|------|
+| work_order_work_item | 작업지시 공정별 작업기준정보 진행 상태 |
+| work_order_work_item_result | 작업기준정보 상세 항목의 실제 결과값 |
+
+### 6-3. 건드리지 않는 것
+
+| 테이블 | 이유 |
+|--------|------|
+| work_instruction | item_id만 있으면 충분. 라우팅/작업기준정보 ID 추가 불필요 |
+| item_routing_version | 마스터 데이터, 변경 없음 |
+| item_routing_detail | 마스터 데이터, 변경 없음 |
+| process_work_item | 마스터 데이터, 변경 없음 |
+| process_work_item_detail | 마스터 데이터, 변경 없음 |
+
+---
+
+## 7. DDL (마이그레이션 SQL)
+
+```sql
+-- 1. work_order_process에 routing_detail_id 추가
+ALTER TABLE work_order_process
+ADD COLUMN IF NOT EXISTS routing_detail_id VARCHAR(500);
+
+CREATE INDEX IF NOT EXISTS idx_wop_routing_detail_id
+ON work_order_process(routing_detail_id);
+
+-- 2. 작업기준정보별 진행 상태 테이블
+CREATE TABLE IF NOT EXISTS work_order_work_item (
+  id VARCHAR(500) PRIMARY KEY DEFAULT gen_random_uuid()::text,
+  company_code VARCHAR(500) NOT NULL,
+  work_order_process_id VARCHAR(500) NOT NULL,
+  work_item_id VARCHAR(500) NOT NULL,
+  work_phase VARCHAR(500),
+  status VARCHAR(500) DEFAULT 'pending',
+  completed_by VARCHAR(500),
+  completed_at TIMESTAMP,
+  created_date TIMESTAMP DEFAULT NOW(),
+  updated_date TIMESTAMP DEFAULT NOW(),
+  writer VARCHAR(500)
+);
+
+CREATE INDEX idx_wowi_process_id ON work_order_work_item(work_order_process_id);
+CREATE INDEX idx_wowi_work_item_id ON work_order_work_item(work_item_id);
+CREATE INDEX idx_wowi_company_code ON work_order_work_item(company_code);
+
+-- 3. 작업기준정보 상세 결과 테이블
+CREATE TABLE IF NOT EXISTS work_order_work_item_result (
+  id VARCHAR(500) PRIMARY KEY DEFAULT gen_random_uuid()::text,
+  company_code VARCHAR(500) NOT NULL,
+  work_order_work_item_id VARCHAR(500) NOT NULL,
+  work_item_detail_id VARCHAR(500) NOT NULL,
+  detail_type VARCHAR(500),
+  result_value VARCHAR(500),
+  is_passed VARCHAR(500),
+  remark TEXT,
+  recorded_by VARCHAR(500),
+  recorded_at TIMESTAMP DEFAULT NOW(),
+  created_date TIMESTAMP DEFAULT NOW(),
+  updated_date TIMESTAMP DEFAULT NOW(),
+  writer VARCHAR(500)
+);
+
+CREATE INDEX idx_wowir_work_order_work_item_id ON work_order_work_item_result(work_order_work_item_id);
+CREATE INDEX idx_wowir_detail_id ON work_order_work_item_result(work_item_detail_id);
+CREATE INDEX idx_wowir_company_code ON work_order_work_item_result(company_code);
+```
+
+---
+
+## 8. 상태값 정의
+
+### work_instruction.status (작업지시 상태)
+| 값 | 의미 |
+|----|------|
+| waiting | 대기 |
+| in_progress | 진행중 |
+| completed | 완료 |
+| cancelled | 취소 |
+
+### work_order_process.status (공정 상태)
+| 값 | 의미 |
+|----|------|
+| waiting | 대기 (아직 시작 안 함) |
+| in_progress | 진행중 (작업자가 시작) |
+| completed | 완료 |
+| skipped | 건너뜀 (선택 공정인 경우) |
+
+### work_order_work_item.status (작업기준정보 항목 상태)
+| 값 | 의미 |
+|----|------|
+| pending | 미완료 |
+| completed | 완료 |
+| skipped | 건너뜀 |
+| failed | 실패 (검사 불합격 등) |
+
+### work_order_work_item_result.is_passed (검사 합격여부)
+| 값 | 의미 |
+|----|------|
+| Y | 합격 |
+| N | 불합격 |
+| null | 해당없음 (체크/입력 항목) |
+
+---
+
+## 9. 설계 의도 요약
+
+1. **마스터와 트랜잭션 분리**: 라우팅/작업기준정보는 마스터(템플릿), 실제 진행은 트랜잭션 테이블에서 관리
+2. **조회 경로**: `work_instruction.item_id` → `item_info.item_number` → `item_routing_version` → `item_routing_detail` → `process_work_item` → `process_work_item_detail`
+3. **진행 경로**: `work_order_process.routing_detail_id`로 마스터 작업기준정보를 참조하되, 실제 진행/결과는 `work_order_work_item` + `work_order_work_item_result`에 저장
+4. **중복 저장 최소화**: 작업지시에 공정/작업기준정보 ID를 넣지 않음. 품목만 있으면 전부 파생 조회 가능
+5. **work_order_process**: 작업지시 생성 시 라우팅 공정을 복사하는 이유는 진행 중 수량/상태/시간 등 트랜잭션 데이터를 기록해야 하기 때문 (마스터가 변경되어도 이미 발행된 작업지시의 공정은 유지)
+
+---
+
+## 10. 주의사항
+
+- `work_order_process`에 공정 정보를 복사(스냅샷)하는 이유: 마스터 라우팅이 나중에 변경되어도 이미 진행 중인 작업지시의 공정 구성은 영향받지 않아야 함
+- `routing_detail_id`는 "이 공정이 어떤 마스터 라우팅에서 왔는지" 추적용. 작업기준정보 조회 키로 사용
+- POP에서 작업기준정보를 표시할 때는 항상 마스터(`process_work_item`)를 조회하고, 결과만 트랜잭션 테이블에 저장
+- 모든 테이블에 `company_code` 필수 (멀티테넌시)
diff --git a/frontend/app/(auth)/login/page.tsx b/frontend/app/(auth)/login/page.tsx
index 62e48e08..73a8de80 100644
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@@ -6,8 +6,17 @@ import { LoginForm } from "@/components/auth/LoginForm";
 import { LoginFooter } from "@/components/auth/LoginFooter";
 
 export default function LoginPage() {
-  const { formData, isLoading, error, showPassword, handleInputChange, handleLogin, togglePasswordVisibility } =
-    useLogin();
+  const {
+    formData,
+    isLoading,
+    error,
+    showPassword,
+    isPopMode,
+    handleInputChange,
+    handleLogin,
+    togglePasswordVisibility,
+    togglePopMode,
+  } = useLogin();
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
@@ -19,9 +28,11 @@ export default function LoginPage() {
           isLoading={isLoading}
           error={error}
           showPassword={showPassword}
+          isPopMode={isPopMode}
           onInputChange={handleInputChange}
           onSubmit={handleLogin}
           onTogglePassword={togglePasswordVisibility}
+          onTogglePop={togglePopMode}
         />
 
         <LoginFooter />
diff --git a/frontend/app/(main)/admin/audit-log/page.tsx b/frontend/app/(main)/admin/audit-log/page.tsx
index 8fbe5e95..747d4640 100644
--- a/frontend/app/(main)/admin/audit-log/page.tsx
+++ b/frontend/app/(main)/admin/audit-log/page.tsx
@@ -77,14 +77,12 @@ const RESOURCE_TYPE_CONFIG: Record<
   NODE_FLOW: { label: "플로우 제어", icon: GitBranch, color: "bg-teal-100 text-teal-700" },
   USER: { label: "사용자", icon: User, color: "bg-amber-100 text-orange-700" },
   ROLE: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
-  PERMISSION: { label: "권한", icon: Shield, color: "bg-destructive/10 text-destructive" },
   COMPANY: { label: "회사", icon: Building2, color: "bg-indigo-100 text-indigo-700" },
   CODE_CATEGORY: { label: "코드 카테고리", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
   CODE: { label: "코드", icon: Hash, color: "bg-cyan-100 text-cyan-700" },
   DATA: { label: "데이터", icon: Database, color: "bg-muted text-foreground" },
   TABLE: { label: "테이블", icon: Database, color: "bg-muted text-foreground" },
   NUMBERING_RULE: { label: "채번 규칙", icon: FileText, color: "bg-amber-100 text-amber-700" },
-  BATCH: { label: "배치", icon: RefreshCw, color: "bg-teal-100 text-teal-700" },
 };
 
 const ACTION_CONFIG: Record<string, { label: string; color: string }> = {
@@ -817,7 +815,7 @@ export default function AuditLogPage() {
                             </Badge>
                             {entry.company_code && entry.company_code !== "*" && (
                               <span className="text-muted-foreground text-[10px]">
-                                [{entry.company_code}]
+                                [{entry.company_name || entry.company_code}]
                               </span>
                             )}
                           </div>
@@ -862,9 +860,11 @@ export default function AuditLogPage() {
                 </div>
                 <div>
                   <label className="text-muted-foreground text-xs">
-                    회사코드
+                    회사
                   </label>
-                  <p className="font-medium">{selectedEntry.company_code}</p>
+                  <p className="font-medium">
+                    {selectedEntry.company_name || selectedEntry.company_code}
+                  </p>
                 </div>
                 <div>
                   <label className="text-muted-foreground text-xs">
diff --git a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
index ec16c27d..7fe11270 100644
--- a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
+++ b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx
@@ -3,7 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { useParams, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw } from "lucide-react";
+import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw, LayoutGrid, Monitor } from "lucide-react";
 import { screenApi } from "@/lib/api/screen";
 import { ScreenDefinition } from "@/types/screen";
 import { useRouter } from "next/navigation";
@@ -285,14 +285,23 @@ function PopScreenViewPage() {
               </div>
             )}
 
+            {/* 일반 모드 네비게이션 바 */}
+            {!isPreviewMode && (
+              <div className="sticky top-0 z-50 flex h-10 items-center justify-between border-b bg-white/80 px-3 backdrop-blur">
+                <Button variant="ghost" size="sm" onClick={() => router.push("/pop")} className="gap-1 text-xs">
+                  <LayoutGrid className="h-3.5 w-3.5" />
+                  POP 대시보드
+                </Button>
+                <span className="text-xs text-gray-500">{screen.screenName}</span>
+                <Button variant="ghost" size="sm" onClick={() => router.push("/")} className="gap-1 text-xs">
+                  <Monitor className="h-3.5 w-3.5" />
+                  PC 모드
+                </Button>
+              </div>
+            )}
+
             {/* POP 화면 컨텐츠 */}
             <div className={`flex-1 flex flex-col overflow-auto ${isPreviewMode ? "py-4 items-center" : "bg-white"}`}>
-              {/* 현재 모드 표시 (일반 모드) */}
-              {!isPreviewMode && (
-                <div className="absolute top-2 right-2 z-10 bg-black/50 text-white text-xs px-2 py-1 rounded">
-                  {currentModeKey.replace("_", " ")}
-                </div>
-              )}
 
               <div
                 className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-foreground" : "w-full min-h-full"}`}
diff --git a/frontend/components/admin/MenuFormModal.tsx b/frontend/components/admin/MenuFormModal.tsx
index 7771ed76..254deff7 100644
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -82,12 +82,19 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
   });
 
   // 화면 할당 관련 상태
-  const [urlType, setUrlType] = useState<"direct" | "screen" | "dashboard">("screen"); // URL 직접 입력 or 화면 할당 or 대시보드 할당 (기본값: 화면 할당)
+  const [urlType, setUrlType] = useState<"direct" | "screen" | "dashboard" | "pop">("screen");
   const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
   const [screens, setScreens] = useState<ScreenDefinition[]>([]);
   const [screenSearchText, setScreenSearchText] = useState("");
   const [isScreenDropdownOpen, setIsScreenDropdownOpen] = useState(false);
 
+  // POP 화면 할당 관련 상태
+  const [selectedPopScreen, setSelectedPopScreen] = useState<ScreenDefinition | null>(null);
+  const [popScreenSearchText, setPopScreenSearchText] = useState("");
+  const [isPopScreenDropdownOpen, setIsPopScreenDropdownOpen] = useState(false);
+  const [isPopLanding, setIsPopLanding] = useState(false);
+  const [hasOtherPopLanding, setHasOtherPopLanding] = useState(false);
+
   // 대시보드 할당 관련 상태
   const [selectedDashboard, setSelectedDashboard] = useState<any | null>(null);
   const [dashboards, setDashboards] = useState<any[]>([]);
@@ -196,8 +203,27 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     toast.success(`대시보드가 선택되었습니다: ${dashboard.title}`);
   };
 
+  // POP 화면 선택 시 URL 자동 설정
+  const handlePopScreenSelect = (screen: ScreenDefinition) => {
+    const actualScreenId = screen.screenId || screen.id;
+    if (!actualScreenId) {
+      toast.error("화면 ID를 찾을 수 없습니다.");
+      return;
+    }
+
+    setSelectedPopScreen(screen);
+    setIsPopScreenDropdownOpen(false);
+
+    const popUrl = `/pop/screens/${actualScreenId}`;
+
+    setFormData((prev) => ({
+      ...prev,
+      menuUrl: popUrl,
+    }));
+  };
+
   // URL 타입 변경 시 처리
-  const handleUrlTypeChange = (type: "direct" | "screen" | "dashboard") => {
+  const handleUrlTypeChange = (type: "direct" | "screen" | "dashboard" | "pop") => {
     // console.log("🔄 URL 타입 변경:", {
     // from: urlType,
     // to: type,
@@ -208,36 +234,53 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     setUrlType(type);
 
     if (type === "direct") {
-      // 직접 입력 모드로 변경 시 선택된 화면 초기화
       setSelectedScreen(null);
-      // URL 필드와 screenCode 초기화 (사용자가 직접 입력할 수 있도록)
+      setSelectedPopScreen(null);
       setFormData((prev) => ({
         ...prev,
         menuUrl: "",
-        screenCode: undefined, // 화면 코드도 함께 초기화
+        screenCode: undefined,
       }));
-    } else {
-      // 화면 할당 모드로 변경 시
-      // 기존에 선택된 화면이 있고, 해당 화면의 URL이 있다면 유지
+    } else if (type === "pop") {
+      setSelectedScreen(null);
+      if (selectedPopScreen) {
+        const actualScreenId = selectedPopScreen.screenId || selectedPopScreen.id;
+        setFormData((prev) => ({
+          ...prev,
+          menuUrl: `/pop/screens/${actualScreenId}`,
+        }));
+      } else {
+        setFormData((prev) => ({
+          ...prev,
+          menuUrl: "",
+        }));
+      }
+    } else if (type === "screen") {
+      setSelectedPopScreen(null);
       if (selectedScreen) {
-        console.log("📋 기존 선택된 화면 유지:", selectedScreen.screenName);
-        // 현재 선택된 화면으로 URL 재생성
         const actualScreenId = selectedScreen.screenId || selectedScreen.id;
         let screenUrl = `/screens/${actualScreenId}`;
-
-        // 관리자 메뉴인 경우 mode=admin 파라미터 추가
         const isAdminMenu = menuType === "0" || menuType === "admin" || formData.menuType === "0";
         if (isAdminMenu) {
           screenUrl += "?mode=admin";
         }
-
         setFormData((prev) => ({
           ...prev,
           menuUrl: screenUrl,
-          screenCode: selectedScreen.screenCode, // 화면 코드도 함께 유지
+          screenCode: selectedScreen.screenCode,
         }));
       } else {
-        // 선택된 화면이 없으면 URL과 screenCode 초기화
+        setFormData((prev) => ({
+          ...prev,
+          menuUrl: "",
+          screenCode: undefined,
+        }));
+      }
+    } else {
+      // dashboard
+      setSelectedScreen(null);
+      setSelectedPopScreen(null);
+      if (!selectedDashboard) {
         setFormData((prev) => ({
           ...prev,
           menuUrl: "",
@@ -297,8 +340,8 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
 
         const menuUrl = menu.menu_url || menu.MENU_URL || "";
 
-        // URL이 "/screens/"로 시작하면 화면 할당으로 판단 (실제 라우팅 패턴에 맞게 수정)
-        const isScreenUrl = menuUrl.startsWith("/screens/");
+        const isPopScreenUrl = menuUrl.startsWith("/pop/screens/");
+        const isScreenUrl = !isPopScreenUrl && menuUrl.startsWith("/screens/");
 
         setFormData({
           objid: menu.objid || menu.OBJID,
@@ -360,10 +403,31 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               }, 500);
             }
           }
+        } else if (isPopScreenUrl) {
+          setUrlType("pop");
+          setSelectedScreen(null);
+
+          // [POP_LANDING] 태그 감지
+          const menuDesc = menu.menu_desc || menu.MENU_DESC || "";
+          setIsPopLanding(menuDesc.includes("[POP_LANDING]"));
+
+          const popScreenId = menuUrl.match(/\/pop\/screens\/(\d+)/)?.[1];
+          if (popScreenId) {
+            const setPopScreenFromId = () => {
+              const screen = screens.find((s) => s.screenId.toString() === popScreenId || s.id?.toString() === popScreenId);
+              if (screen) {
+                setSelectedPopScreen(screen);
+              }
+            };
+            if (screens.length > 0) {
+              setPopScreenFromId();
+            } else {
+              setTimeout(setPopScreenFromId, 500);
+            }
+          }
         } else if (menuUrl.startsWith("/dashboard/")) {
           setUrlType("dashboard");
           setSelectedScreen(null);
-          // 대시보드 ID 추출 및 선택은 useEffect에서 처리됨
         } else {
           setUrlType("direct");
           setSelectedScreen(null);
@@ -408,6 +472,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     } else {
       console.log("메뉴 등록 모드 - parentId:", parentId, "menuType:", menuType);
       setIsEdit(false);
+      setIsPopLanding(false);
 
       // 메뉴 타입 변환 (0 -> 0, 1 -> 1, admin -> 0, user -> 1)
       let defaultMenuType = "1"; // 기본값은 사용자
@@ -470,6 +535,31 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     }
   }, [isOpen, formData.companyCode]);
 
+  // POP 기본 화면 중복 체크: 같은 부모 하위에 이미 [POP_LANDING]이 있는 다른 메뉴가 있는지 확인
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const checkOtherPopLanding = async () => {
+      try {
+        const res = await menuApi.getPopMenus();
+        if (res.success && res.data?.landingMenu) {
+          const landingObjId = res.data.landingMenu.objid?.toString();
+          const currentObjId = formData.objid?.toString();
+          // 현재 수정 중인 메뉴가 아닌 다른 메뉴에 [POP_LANDING]이 있으면 중복
+          setHasOtherPopLanding(!!landingObjId && landingObjId !== currentObjId);
+        } else {
+          setHasOtherPopLanding(false);
+        }
+      } catch {
+        setHasOtherPopLanding(false);
+      }
+    };
+
+    if (urlType === "pop") {
+      checkOtherPopLanding();
+    }
+  }, [isOpen, urlType, formData.objid]);
+
   // 화면 목록 및 대시보드 목록 로드
   useEffect(() => {
     if (isOpen) {
@@ -517,6 +607,22 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     }
   }, [dashboards, isEdit, formData.menuUrl, urlType, selectedDashboard]);
 
+  // POP 화면 목록 로드 완료 후 기존 할당 설정
+  useEffect(() => {
+    if (screens.length > 0 && isEdit && formData.menuUrl && urlType === "pop") {
+      const menuUrl = formData.menuUrl;
+      if (menuUrl.startsWith("/pop/screens/")) {
+        const popScreenId = menuUrl.match(/\/pop\/screens\/(\d+)/)?.[1];
+        if (popScreenId && !selectedPopScreen) {
+          const screen = screens.find((s) => s.screenId.toString() === popScreenId || s.id?.toString() === popScreenId);
+          if (screen) {
+            setSelectedPopScreen(screen);
+          }
+        }
+      }
+    }
+  }, [screens, isEdit, formData.menuUrl, urlType, selectedPopScreen]);
+
   // 드롭다운 외부 클릭 시 닫기
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -533,16 +639,20 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
         setIsDashboardDropdownOpen(false);
         setDashboardSearchText("");
       }
+      if (!target.closest(".pop-screen-dropdown")) {
+        setIsPopScreenDropdownOpen(false);
+        setPopScreenSearchText("");
+      }
     };
 
-    if (isLangKeyDropdownOpen || isScreenDropdownOpen || isDashboardDropdownOpen) {
+    if (isLangKeyDropdownOpen || isScreenDropdownOpen || isDashboardDropdownOpen || isPopScreenDropdownOpen) {
       document.addEventListener("mousedown", handleClickOutside);
     }
 
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isLangKeyDropdownOpen, isScreenDropdownOpen]);
+  }, [isLangKeyDropdownOpen, isScreenDropdownOpen, isDashboardDropdownOpen, isPopScreenDropdownOpen]);
 
   const loadCompanies = async () => {
     try {
@@ -590,10 +700,17 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
     try {
       setLoading(true);
 
+      // POP 기본 화면 태그 처리
+      let finalMenuDesc = formData.menuDesc;
+      if (urlType === "pop") {
+        const descWithoutTag = finalMenuDesc.replace(/\[POP_LANDING\]/g, "").trim();
+        finalMenuDesc = isPopLanding ? `${descWithoutTag} [POP_LANDING]`.trim() : descWithoutTag;
+      }
+
       // 백엔드에 전송할 데이터 변환
       const submitData = {
         ...formData,
-        // 상태를 소문자로 변환 (백엔드에서 소문자 기대)
+        menuDesc: finalMenuDesc,
         status: formData.status.toLowerCase(),
       };
 
@@ -853,7 +970,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
             <Label htmlFor="menuUrl">{getText(MENU_MANAGEMENT_KEYS.FORM_MENU_URL)}</Label>
 
             {/* URL 타입 선택 */}
-            <RadioGroup value={urlType} onValueChange={handleUrlTypeChange} className="mb-3 flex space-x-6">
+            <RadioGroup value={urlType} onValueChange={handleUrlTypeChange} className="mb-3 flex flex-wrap gap-x-6 gap-y-2">
               <div className="flex items-center space-x-2">
                 <RadioGroupItem value="screen" id="screen" />
                 <Label htmlFor="screen" className="cursor-pointer">
@@ -866,6 +983,12 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
                   대시보드 할당
                 </Label>
               </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="pop" id="pop" />
+                <Label htmlFor="pop" className="cursor-pointer">
+                  POP 화면 할당
+                </Label>
+              </div>
               <div className="flex items-center space-x-2">
                 <RadioGroupItem value="direct" id="direct" />
                 <Label htmlFor="direct" className="cursor-pointer">
@@ -1031,6 +1154,106 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
               </div>
             )}
 
+            {/* POP 화면 할당 */}
+            {urlType === "pop" && (
+              <div className="space-y-2">
+                <div className="relative">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setIsPopScreenDropdownOpen(!isPopScreenDropdownOpen)}
+                    className="w-full justify-between"
+                  >
+                    <span className="text-left">
+                      {selectedPopScreen ? selectedPopScreen.screenName : "POP 화면을 선택하세요"}
+                    </span>
+                    <ChevronDown className="h-4 w-4" />
+                  </Button>
+
+                  {isPopScreenDropdownOpen && (
+                    <div className="pop-screen-dropdown absolute top-full right-0 left-0 z-50 mt-1 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
+                      <div className="sticky top-0 border-b bg-white p-2">
+                        <div className="relative">
+                          <Search className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+                          <Input
+                            placeholder="POP 화면 검색..."
+                            value={popScreenSearchText}
+                            onChange={(e) => setPopScreenSearchText(e.target.value)}
+                            className="pl-8"
+                          />
+                        </div>
+                      </div>
+
+                      <div className="max-h-48 overflow-y-auto">
+                        {screens
+                          .filter(
+                            (screen) =>
+                              screen.screenName.toLowerCase().includes(popScreenSearchText.toLowerCase()) ||
+                              screen.screenCode.toLowerCase().includes(popScreenSearchText.toLowerCase()),
+                          )
+                          .map((screen, index) => (
+                            <div
+                              key={`pop-screen-${screen.screenId || screen.id || index}-${screen.screenCode || index}`}
+                              onClick={() => handlePopScreenSelect(screen)}
+                              className="cursor-pointer border-b px-3 py-2 last:border-b-0 hover:bg-gray-100"
+                            >
+                              <div className="flex items-center justify-between">
+                                <div>
+                                  <div className="text-sm font-medium">{screen.screenName}</div>
+                                  <div className="text-xs text-gray-500">{screen.screenCode}</div>
+                                </div>
+                                <div className="text-xs text-gray-400">ID: {screen.screenId || screen.id || "N/A"}</div>
+                              </div>
+                            </div>
+                          ))}
+                        {screens.filter(
+                          (screen) =>
+                            screen.screenName.toLowerCase().includes(popScreenSearchText.toLowerCase()) ||
+                            screen.screenCode.toLowerCase().includes(popScreenSearchText.toLowerCase()),
+                        ).length === 0 && <div className="px-3 py-2 text-sm text-gray-500">검색 결과가 없습니다.</div>}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {selectedPopScreen && (
+                  <div className="bg-accent rounded-md border p-3">
+                    <div className="text-sm font-medium text-blue-900">{selectedPopScreen.screenName}</div>
+                    <div className="text-primary text-xs">코드: {selectedPopScreen.screenCode}</div>
+                    <div className="text-primary text-xs">생성된 URL: {formData.menuUrl}</div>
+                  </div>
+                )}
+
+                {/* POP 기본 화면 설정 */}
+                <div className="flex items-center space-x-2 rounded-md border p-3">
+                  <input
+                    type="checkbox"
+                    id="popLanding"
+                    checked={isPopLanding}
+                    disabled={!isPopLanding && hasOtherPopLanding}
+                    onChange={(e) => setIsPopLanding(e.target.checked)}
+                    className="h-4 w-4 rounded border-gray-300 accent-primary disabled:cursor-not-allowed disabled:opacity-50"
+                  />
+                  <label
+                    htmlFor="popLanding"
+                    className={`text-sm font-medium ${!isPopLanding && hasOtherPopLanding ? "text-muted-foreground" : ""}`}
+                  >
+                    POP 기본 화면으로 설정
+                  </label>
+                  {!isPopLanding && hasOtherPopLanding && (
+                    <span className="text-xs text-muted-foreground">
+                      (이미 다른 메뉴가 기본 화면으로 설정되어 있습니다)
+                    </span>
+                  )}
+                </div>
+                {isPopLanding && (
+                  <p className="text-xs text-muted-foreground">
+                    프로필에서 POP 모드 전환 시 이 화면으로 바로 이동합니다.
+                  </p>
+                )}
+              </div>
+            )}
+
             {/* URL 직접 입력 */}
             {urlType === "direct" && (
               <Input
diff --git a/frontend/components/auth/LoginForm.tsx b/frontend/components/auth/LoginForm.tsx
index d0ddd1a5..bf40542f 100644
--- a/frontend/components/auth/LoginForm.tsx
+++ b/frontend/components/auth/LoginForm.tsx
@@ -2,7 +2,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import { Eye, EyeOff, Loader2, Monitor } from "lucide-react";
 import { LoginFormData } from "@/types/auth";
 import { ErrorMessage } from "./ErrorMessage";
 
@@ -11,9 +12,11 @@ interface LoginFormProps {
   isLoading: boolean;
   error: string;
   showPassword: boolean;
+  isPopMode: boolean;
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (e: React.FormEvent) => void;
   onTogglePassword: () => void;
+  onTogglePop: () => void;
 }
 
 /**
@@ -24,9 +27,11 @@ export function LoginForm({
   isLoading,
   error,
   showPassword,
+  isPopMode,
   onInputChange,
   onSubmit,
   onTogglePassword,
+  onTogglePop,
 }: LoginFormProps) {
   return (
     <Card className="border shadow-lg">
@@ -82,6 +87,19 @@ export function LoginForm({
             </div>
           </div>
 
+          {/* POP 모드 토글 */}
+          <div className="flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5">
+            <div className="flex items-center gap-2">
+              <Monitor className="h-4 w-4 text-slate-500" />
+              <span className="text-sm text-slate-600">POP 모드</span>
+            </div>
+            <Switch
+              checked={isPopMode}
+              onCheckedChange={onTogglePop}
+              disabled={isLoading}
+            />
+          </div>
+
           {/* 로그인 버튼 */}
           <Button
             type="submit"
diff --git a/frontend/components/common/BarcodeScanModal.tsx b/frontend/components/common/BarcodeScanModal.tsx
index ac2bbe93..e3fc6c76 100644
--- a/frontend/components/common/BarcodeScanModal.tsx
+++ b/frontend/components/common/BarcodeScanModal.tsx
@@ -42,9 +42,12 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
   const codeReaderRef = useRef<BrowserMultiFormatReader | null>(null);
   const scanIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
-  // 바코드 리더 초기화
+  // 바코드 리더 초기화 + 모달 열릴 때 상태 리셋
   useEffect(() => {
     if (open) {
+      setScannedCode("");
+      setError("");
+      setIsScanning(false);
       codeReaderRef.current = new BrowserMultiFormatReader();
     }
 
@@ -276,7 +279,7 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
               {/* 스캔 가이드 오버레이 */}
               {isScanning && (
                 <div className="absolute inset-0 flex items-center justify-center">
-                  <div className="h-32 w-32 border-4 border-primary animate-pulse rounded-lg" />
+                  <div className="h-3/5 w-4/5 rounded-lg border-4 border-primary/70 animate-pulse" />
                   <div className="absolute bottom-4 left-0 right-0 text-center">
                     <div className="inline-flex items-center gap-2 rounded-full bg-background/80 px-4 py-2 text-xs font-medium">
                       <Scan className="h-4 w-4 animate-pulse text-primary" />
@@ -355,6 +358,20 @@ export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
             </Button>
           )}
 
+          {scannedCode && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                setScannedCode("");
+                startScanning();
+              }}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Camera className="mr-2 h-4 w-4" />
+              다시 스캔
+            </Button>
+          )}
+
           {scannedCode && !autoSubmit && (
             <Button
               onClick={handleConfirm}
diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx
index dca348c2..9fff1d01 100644
--- a/frontend/components/common/ScreenModal.tsx
+++ b/frontend/components/common/ScreenModal.tsx
@@ -98,10 +98,43 @@ export const ScreenModal: React.FC<ScreenModalProps> = ({ className }) => {
     const savedMode = localStorage.getItem("screenModal_continuousMode");
     if (savedMode === "true") {
       setContinuousMode(true);
-      // console.log("🔄 연속 모드 복원: true");
     }
   }, []);
 
+  // dataBinding: 테이블 선택 시 바인딩된 input의 formData를 자동 업데이트
+  useEffect(() => {
+    if (!modalState.isOpen || !screenData?.components?.length) return;
+
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail?.source || !detail?.data) return;
+
+      const bindingUpdates: Record<string, any> = {};
+      for (const comp of screenData.components) {
+        const db =
+          comp.componentConfig?.dataBinding ||
+          (comp as any).dataBinding;
+        if (!db?.sourceComponentId || !db?.sourceColumn) continue;
+        if (db.sourceComponentId !== detail.source) continue;
+
+        const colName = (comp as any).columnName || comp.componentConfig?.columnName;
+        if (!colName) continue;
+
+        const selectedRow = detail.data[0];
+        const value = selectedRow?.[db.sourceColumn] ?? "";
+        bindingUpdates[colName] = value;
+      }
+
+      if (Object.keys(bindingUpdates).length > 0) {
+        setFormData((prev) => ({ ...prev, ...bindingUpdates }));
+        formDataChangedRef.current = true;
+      }
+    };
+
+    window.addEventListener("v2-table-selection", handler);
+    return () => window.removeEventListener("v2-table-selection", handler);
+  }, [modalState.isOpen, screenData?.components]);
+
   // 화면의 실제 크기 계산 함수
   const calculateScreenDimensions = (components: ComponentData[]) => {
     if (components.length === 0) {
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 095552d5..c80cb581 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -19,11 +19,12 @@ import {
   User,
   Building2,
   FileCheck,
+  Monitor,
 } from "lucide-react";
 import { useMenu } from "@/contexts/MenuContext";
 import { useAuth } from "@/hooks/useAuth";
 import { useProfile } from "@/hooks/useProfile";
-import { MenuItem } from "@/lib/api/menu";
+import { MenuItem, menuApi } from "@/lib/api/menu";
 import { menuScreenApi } from "@/lib/api/screen";
 import { apiClient } from "@/lib/api/client";
 import { toast } from "sonner";
@@ -453,6 +454,31 @@ function AppLayoutInner({ children }: AppLayoutProps) {
     e.dataTransfer.setData("text/plain", menuName);
   };
 
+  // POP 모드 진입 핸들러
+  const handlePopModeClick = async () => {
+    try {
+      const response = await menuApi.getPopMenus();
+      if (response.success && response.data) {
+        const { childMenus, landingMenu } = response.data;
+
+        if (landingMenu?.menu_url) {
+          router.push(landingMenu.menu_url);
+        } else if (childMenus.length === 0) {
+          toast.info("설정된 POP 화면이 없습니다");
+        } else if (childMenus.length === 1) {
+          router.push(childMenus[0].menu_url);
+        } else {
+          router.push("/pop");
+        }
+      } else {
+        toast.info("설정된 POP 화면이 없습니다");
+      }
+    } catch (error) {
+      toast.error("POP 메뉴 조회 중 오류가 발생했습니다");
+    }
+  };
+
+  // 메뉴 트리 렌더링 (기존 MainLayout 스타일 적용)
   const renderMenu = (menu: any, level: number = 0) => {
     const isExpanded = expandedMenus.has(menu.id);
     const isLeaf = !menu.hasChildren;
@@ -576,6 +602,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                 <FileCheck className="mr-2 h-4 w-4" />
                 <span>결재함</span>
               </DropdownMenuItem>
+              <DropdownMenuItem onClick={handlePopModeClick}>
+                <Monitor className="mr-2 h-4 w-4" />
+                <span>POP 모드</span>
+              </DropdownMenuItem>
               <DropdownMenuSeparator />
               <div className="px-1 py-0.5">
                 <ThemeToggle />
@@ -748,6 +778,10 @@ function AppLayoutInner({ children }: AppLayoutProps) {
                   <FileCheck className="mr-2 h-4 w-4" />
                   <span>결재함</span>
                 </DropdownMenuItem>
+                <DropdownMenuItem onClick={handlePopModeClick}>
+                  <Monitor className="mr-2 h-4 w-4" />
+                  <span>POP 모드</span>
+                </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem onClick={handleLogout}>
                   <LogOut className="mr-2 h-4 w-4" />
diff --git a/frontend/components/layout/MainHeader.tsx b/frontend/components/layout/MainHeader.tsx
index f04dcca3..2b6ab40d 100644
--- a/frontend/components/layout/MainHeader.tsx
+++ b/frontend/components/layout/MainHeader.tsx
@@ -6,13 +6,14 @@ interface MainHeaderProps {
   user: any;
   onSidebarToggle: () => void;
   onProfileClick: () => void;
+  onPopModeClick?: () => void;
   onLogout: () => void;
 }
 
 /**
  * 메인 헤더 컴포넌트
  */
-export function MainHeader({ user, onSidebarToggle, onProfileClick, onLogout }: MainHeaderProps) {
+export function MainHeader({ user, onSidebarToggle, onProfileClick, onPopModeClick, onLogout }: MainHeaderProps) {
   return (
     <header className="bg-background/95 fixed top-0 z-50 h-14 min-h-14 w-full flex-shrink-0 border-b backdrop-blur">
       <div className="flex h-full w-full items-center justify-between px-6">
@@ -27,7 +28,7 @@ export function MainHeader({ user, onSidebarToggle, onProfileClick, onLogout }:
 
         {/* Right side - Admin Button + User Menu */}
         <div className="flex h-8 items-center gap-2">
-          <UserDropdown user={user} onProfileClick={onProfileClick} onLogout={onLogout} />
+          <UserDropdown user={user} onProfileClick={onProfileClick} onPopModeClick={onPopModeClick} onLogout={onLogout} />
         </div>
       </div>
     </header>
diff --git a/frontend/components/layout/UserDropdown.tsx b/frontend/components/layout/UserDropdown.tsx
index e112110c..7f769289 100644
--- a/frontend/components/layout/UserDropdown.tsx
+++ b/frontend/components/layout/UserDropdown.tsx
@@ -8,19 +8,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, User, FileCheck } from "lucide-react";
+import { LogOut, FileCheck, Monitor, User } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 interface UserDropdownProps {
   user: any;
   onProfileClick: () => void;
+  onPopModeClick?: () => void;
   onLogout: () => void;
 }
 
 /**
  * 사용자 드롭다운 메뉴 컴포넌트
  */
-export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownProps) {
+export function UserDropdown({ user, onProfileClick, onPopModeClick, onLogout }: UserDropdownProps) {
   const router = useRouter();
 
   if (!user) return null;
@@ -73,7 +74,6 @@ export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownPro
                   ? `${user.deptName}, ${user.positionName}`
                   : user.deptName || user.positionName || "부서 정보 없음"}
               </p>
-              {/* 사진 상태 표시 */}
             </div>
           </div>
         </DropdownMenuLabel>
@@ -86,6 +86,12 @@ export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownPro
           <FileCheck className="mr-2 h-4 w-4" />
           <span>결재함</span>
         </DropdownMenuItem>
+        {onPopModeClick && (
+          <DropdownMenuItem onClick={onPopModeClick}>
+            <Monitor className="mr-2 h-4 w-4" />
+            <span>POP 모드</span>
+          </DropdownMenuItem>
+        )}
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={onLogout}>
           <LogOut className="mr-2 h-4 w-4" />
diff --git a/frontend/components/pop/dashboard/DashboardHeader.tsx b/frontend/components/pop/dashboard/DashboardHeader.tsx
index a16cbb05..20136c59 100644
--- a/frontend/components/pop/dashboard/DashboardHeader.tsx
+++ b/frontend/components/pop/dashboard/DashboardHeader.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { Moon, Sun } from "lucide-react";
+import { Moon, Sun, Monitor } from "lucide-react";
 import { WeatherInfo, UserInfo, CompanyInfo } from "./types";
 
 interface DashboardHeaderProps {
@@ -11,6 +11,7 @@ interface DashboardHeaderProps {
   company: CompanyInfo;
   onThemeToggle: () => void;
   onUserClick: () => void;
+  onPcModeClick?: () => void;
 }
 
 export function DashboardHeader({
@@ -20,6 +21,7 @@ export function DashboardHeader({
   company,
   onThemeToggle,
   onUserClick,
+  onPcModeClick,
 }: DashboardHeaderProps) {
   const [mounted, setMounted] = useState(false);
   const [currentTime, setCurrentTime] = useState(new Date());
@@ -81,6 +83,17 @@ export function DashboardHeader({
           <div className="pop-dashboard-company-sub">{company.subTitle}</div>
         </div>
 
+        {/* PC 모드 복귀 */}
+        {onPcModeClick && (
+          <button
+            className="pop-dashboard-theme-toggle"
+            onClick={onPcModeClick}
+            title="PC 모드로 돌아가기"
+          >
+            <Monitor size={16} />
+          </button>
+        )}
+
         {/* 사용자 배지 */}
         <button className="pop-dashboard-user-badge" onClick={onUserClick}>
           <div className="pop-dashboard-user-avatar">{user.avatar}</div>
diff --git a/frontend/components/pop/dashboard/PopDashboard.tsx b/frontend/components/pop/dashboard/PopDashboard.tsx
index dde9498b..0f8a1b48 100644
--- a/frontend/components/pop/dashboard/PopDashboard.tsx
+++ b/frontend/components/pop/dashboard/PopDashboard.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 import { DashboardHeader } from "./DashboardHeader";
 import { NoticeBanner } from "./NoticeBanner";
 import { KpiBar } from "./KpiBar";
@@ -8,6 +9,8 @@ import { MenuGrid } from "./MenuGrid";
 import { ActivityList } from "./ActivityList";
 import { NoticeList } from "./NoticeList";
 import { DashboardFooter } from "./DashboardFooter";
+import { MenuItem as DashboardMenuItem } from "./types";
+import { menuApi, PopMenuItem } from "@/lib/api/menu";
 import {
   KPI_ITEMS,
   MENU_ITEMS,
@@ -17,10 +20,31 @@ import {
 } from "./data";
 import "./dashboard.css";
 
-export function PopDashboard() {
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
+const CATEGORY_COLORS: DashboardMenuItem["category"][] = [
+  "production",
+  "material",
+  "quality",
+  "equipment",
+  "safety",
+];
+
+function convertPopMenuToMenuItem(item: PopMenuItem, index: number): DashboardMenuItem {
+  return {
+    id: item.objid,
+    title: item.menu_name_kor,
+    count: 0,
+    description: item.menu_desc?.replace("[POP]", "").trim() || "",
+    status: "",
+    category: CATEGORY_COLORS[index % CATEGORY_COLORS.length],
+    href: item.menu_url || "#",
+  };
+}
+
+export function PopDashboard() {
+  const router = useRouter();
+  const [theme, setTheme] = useState<"dark" | "light">("dark");
+  const [menuItems, setMenuItems] = useState<DashboardMenuItem[]>(MENU_ITEMS);
 
-  // 로컬 스토리지에서 테마 로드
   useEffect(() => {
     const savedTheme = localStorage.getItem("popTheme") as "dark" | "light" | null;
     if (savedTheme) {
@@ -28,6 +52,22 @@ export function PopDashboard() {
     }
   }, []);
 
+  // API에서 POP 메뉴 로드
+  useEffect(() => {
+    const loadPopMenus = async () => {
+      try {
+        const response = await menuApi.getPopMenus();
+        if (response.success && response.data && response.data.childMenus.length > 0) {
+          const converted = response.data.childMenus.map(convertPopMenuToMenuItem);
+          setMenuItems(converted);
+        }
+      } catch {
+        // API 실패 시 기존 하드코딩 데이터 유지
+      }
+    };
+    loadPopMenus();
+  }, []);
+
   const handleThemeToggle = () => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
@@ -40,6 +80,10 @@ export function PopDashboard() {
     }
   };
 
+  const handlePcModeClick = () => {
+    router.push("/");
+  };
+
   const handleActivityMore = () => {
     alert("전체 활동 내역 화면으로 이동합니다.");
   };
@@ -58,13 +102,14 @@ export function PopDashboard() {
           company={{ name: "탑씰", subTitle: "현장 관리 시스템" }}
           onThemeToggle={handleThemeToggle}
           onUserClick={handleUserClick}
+          onPcModeClick={handlePcModeClick}
         />
 
         <NoticeBanner text={NOTICE_MARQUEE_TEXT} />
 
         <KpiBar items={KPI_ITEMS} />
 
-        <MenuGrid items={MENU_ITEMS} />
+        <MenuGrid items={menuItems} />
 
         <div className="pop-dashboard-bottom-section">
           <ActivityList items={ACTIVITY_ITEMS} onMoreClick={handleActivityMore} />
diff --git a/frontend/components/pop/designer/PopDesigner.tsx b/frontend/components/pop/designer/PopDesigner.tsx
index 902eb9a9..36241817 100644
--- a/frontend/components/pop/designer/PopDesigner.tsx
+++ b/frontend/components/pop/designer/PopDesigner.tsx
@@ -150,7 +150,7 @@ export default function PopDesigner({
       try {
         const loadedLayout = await screenApi.getLayoutPop(selectedScreen.screenId);
         
-        if (loadedLayout && isV5Layout(loadedLayout) && Object.keys(loadedLayout.components).length > 0) {
+        if (loadedLayout && isV5Layout(loadedLayout) && loadedLayout.components && Object.keys(loadedLayout.components).length > 0) {
           // v5 레이아웃 로드
           // 기존 레이아웃 호환성: gapPreset이 없으면 기본값 추가
           if (!loadedLayout.settings.gapPreset) {
diff --git a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
index b7d42bc2..32ff5e06 100644
--- a/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
+++ b/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx
@@ -69,10 +69,12 @@ const COMPONENT_TYPE_LABELS: Record<string, string> = {
   "pop-icon": "아이콘",
   "pop-dashboard": "대시보드",
   "pop-card-list": "카드 목록",
+  "pop-card-list-v2": "카드 목록 V2",
   "pop-field": "필드",
   "pop-button": "버튼",
   "pop-string-list": "리스트 목록",
   "pop-search": "검색",
+  "pop-status-bar": "상태 바",
   "pop-list": "리스트",
   "pop-indicator": "인디케이터",
   "pop-scanner": "스캐너",
@@ -169,9 +171,7 @@ export default function ComponentEditorPanel({
               </div>
               <div className="space-y-1">
                 {allComponents.map((comp) => {
-                  const label = comp.label
-                    || COMPONENT_TYPE_LABELS[comp.type]
-                    || comp.type;
+                  const label = comp.label || comp.id;
                   const isActive = comp.id === selectedComponentId;
                   return (
                     <button
diff --git a/frontend/components/pop/designer/panels/ComponentPalette.tsx b/frontend/components/pop/designer/panels/ComponentPalette.tsx
index c510afa3..3817b54d 100644
--- a/frontend/components/pop/designer/panels/ComponentPalette.tsx
+++ b/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, List, Search, TextCursorInput } from "lucide-react";
+import { Square, FileText, MousePointer, BarChart3, LayoutGrid, MousePointerClick, List, Search, TextCursorInput, ScanLine, UserCircle, BarChart2 } from "lucide-react";
 import { DND_ITEM_TYPES } from "../constants";
 
 // 컴포넌트 정의
@@ -45,6 +45,12 @@ const PALETTE_ITEMS: PaletteItem[] = [
     icon: LayoutGrid,
     description: "테이블 데이터를 카드 형태로 표시",
   },
+  {
+    type: "pop-card-list-v2",
+    label: "카드 목록 V2",
+    icon: LayoutGrid,
+    description: "슬롯 기반 카드 (CSS Grid + 셀 타입별 렌더링)",
+  },
   {
     type: "pop-button",
     label: "버튼",
@@ -63,12 +69,30 @@ const PALETTE_ITEMS: PaletteItem[] = [
     icon: Search,
     description: "조건 입력 (텍스트/날짜/선택/모달)",
   },
+  {
+    type: "pop-status-bar",
+    label: "상태 바",
+    icon: BarChart2,
+    description: "상태별 건수 대시보드 + 필터",
+  },
   {
     type: "pop-field",
     label: "입력 필드",
     icon: TextCursorInput,
     description: "저장용 값 입력 (섹션별 멀티필드)",
   },
+  {
+    type: "pop-scanner",
+    label: "스캐너",
+    icon: ScanLine,
+    description: "바코드/QR 카메라 스캔",
+  },
+  {
+    type: "pop-profile",
+    label: "프로필",
+    icon: UserCircle,
+    description: "사용자 프로필 / PC 전환 / 로그아웃",
+  },
 ];
 
 // 드래그 가능한 컴포넌트 아이템
diff --git a/frontend/components/pop/designer/panels/ConnectionEditor.tsx b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
index c8135edb..84b56935 100644
--- a/frontend/components/pop/designer/panels/ConnectionEditor.tsx
+++ b/frontend/components/pop/designer/panels/ConnectionEditor.tsx
@@ -4,7 +4,6 @@ import React from "react";
 import { ArrowRight, Link2, Unlink2, Plus, Trash2, Pencil, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
@@ -19,7 +18,6 @@ import {
 } from "../types/pop-layout";
 import {
   PopComponentRegistry,
-  type ComponentConnectionMeta,
 } from "@/lib/registry/PopComponentRegistry";
 import { getTableColumns } from "@/lib/api/tableManagement";
 
@@ -36,15 +34,6 @@ interface ConnectionEditorProps {
   onRemoveConnection?: (connectionId: string) => void;
 }
 
-// ========================================
-// 소스 컴포넌트에 filter 타입 sendable이 있는지 판단
-// ========================================
-
-function hasFilterSendable(meta: ComponentConnectionMeta | undefined): boolean {
-  if (!meta?.sendable) return false;
-  return meta.sendable.some((s) => s.category === "filter" || s.type === "filter_value");
-}
-
 // ========================================
 // ConnectionEditor
 // ========================================
@@ -84,17 +73,13 @@ export default function ConnectionEditor({
     );
   }
 
-  const isFilterSource = hasFilterSendable(meta);
-
   return (
     <div className="space-y-6">
       {hasSendable && (
         <SendSection
           component={component}
-          meta={meta!}
           allComponents={allComponents}
           outgoing={outgoing}
-          isFilterSource={isFilterSource}
           onAddConnection={onAddConnection}
           onUpdateConnection={onUpdateConnection}
           onRemoveConnection={onRemoveConnection}
@@ -112,47 +97,14 @@ export default function ConnectionEditor({
   );
 }
 
-// ========================================
-// 대상 컴포넌트에서 정보 추출
-// ========================================
-
-function extractDisplayColumns(comp: PopComponentDefinitionV5 | undefined): string[] {
-  if (!comp?.config) return [];
-  const cfg = comp.config as Record<string, unknown>;
-  const cols: string[] = [];
-
-  if (Array.isArray(cfg.listColumns)) {
-    (cfg.listColumns as Array<{ columnName?: string }>).forEach((c) => {
-      if (c.columnName && !cols.includes(c.columnName)) cols.push(c.columnName);
-    });
-  }
-
-  if (Array.isArray(cfg.selectedColumns)) {
-    (cfg.selectedColumns as string[]).forEach((c) => {
-      if (!cols.includes(c)) cols.push(c);
-    });
-  }
-
-  return cols;
-}
-
-function extractTableName(comp: PopComponentDefinitionV5 | undefined): string {
-  if (!comp?.config) return "";
-  const cfg = comp.config as Record<string, unknown>;
-  const ds = cfg.dataSource as { tableName?: string } | undefined;
-  return ds?.tableName || "";
-}
-
 // ========================================
 // 보내기 섹션
 // ========================================
 
 interface SendSectionProps {
   component: PopComponentDefinitionV5;
-  meta: ComponentConnectionMeta;
   allComponents: PopComponentDefinitionV5[];
   outgoing: PopDataConnection[];
-  isFilterSource: boolean;
   onAddConnection?: (conn: Omit<PopDataConnection, "id">) => void;
   onUpdateConnection?: (connectionId: string, conn: Omit<PopDataConnection, "id">) => void;
   onRemoveConnection?: (connectionId: string) => void;
@@ -160,10 +112,8 @@ interface SendSectionProps {
 
 function SendSection({
   component,
-  meta,
   allComponents,
   outgoing,
-  isFilterSource,
   onAddConnection,
   onUpdateConnection,
   onRemoveConnection,
@@ -180,34 +130,20 @@ function SendSection({
       {outgoing.map((conn) => (
         <div key={conn.id}>
           {editingId === conn.id ? (
-            isFilterSource ? (
-              <FilterConnectionForm
-                component={component}
-                meta={meta}
-                allComponents={allComponents}
-                initial={conn}
-                onSubmit={(data) => {
-                  onUpdateConnection?.(conn.id, data);
-                  setEditingId(null);
-                }}
-                onCancel={() => setEditingId(null)}
-                submitLabel="수정"
-              />
-            ) : (
-              <SimpleConnectionForm
-                component={component}
-                allComponents={allComponents}
-                initial={conn}
-                onSubmit={(data) => {
-                  onUpdateConnection?.(conn.id, data);
-                  setEditingId(null);
-                }}
-                onCancel={() => setEditingId(null)}
-                submitLabel="수정"
-              />
-            )
+            <SimpleConnectionForm
+              component={component}
+              allComponents={allComponents}
+              initial={conn}
+              onSubmit={(data) => {
+                onUpdateConnection?.(conn.id, data);
+                setEditingId(null);
+              }}
+              onCancel={() => setEditingId(null)}
+              submitLabel="수정"
+            />
           ) : (
-            <div className="flex items-center gap-1 rounded border bg-primary/10/50 px-3 py-2">
+            <div className="space-y-1 rounded border bg-primary/10 px-3 py-2">
+              <div className="flex items-center gap-1">
               <span className="flex-1 truncate text-xs">
                 {conn.label || `→ ${allComponents.find((c) => c.id === conn.targetComponent)?.label || conn.targetComponent}`}
               </span>
@@ -225,27 +161,33 @@ function SendSection({
                   <Trash2 className="h-3 w-3" />
                 </button>
               )}
+              </div>
+              {conn.filterConfig?.targetColumn && (
+                <div className="flex flex-wrap gap-1">
+                  <span className="rounded bg-white px-1.5 py-0.5 text-[9px] text-muted-foreground">
+                    {conn.filterConfig.targetColumn}
+                  </span>
+                  <span className="rounded bg-white px-1.5 py-0.5 text-[9px] text-muted-foreground">
+                    {conn.filterConfig.filterMode}
+                  </span>
+                  {conn.filterConfig.isSubTable && (
+                    <span className="rounded bg-amber-100 px-1.5 py-0.5 text-[9px] text-amber-700">
+                      하위 테이블
+                    </span>
+                  )}
+                </div>
+              )}
             </div>
           )}
         </div>
       ))}
 
-      {isFilterSource ? (
-        <FilterConnectionForm
-          component={component}
-          meta={meta}
-          allComponents={allComponents}
-          onSubmit={(data) => onAddConnection?.(data)}
-          submitLabel="연결 추가"
-        />
-      ) : (
-        <SimpleConnectionForm
-          component={component}
-          allComponents={allComponents}
-          onSubmit={(data) => onAddConnection?.(data)}
-          submitLabel="연결 추가"
-        />
-      )}
+      <SimpleConnectionForm
+        component={component}
+        allComponents={allComponents}
+        onSubmit={(data) => onAddConnection?.(data)}
+        submitLabel="연결 추가"
+      />
     </div>
   );
 }
@@ -263,6 +205,19 @@ interface SimpleConnectionFormProps {
   submitLabel: string;
 }
 
+function extractSubTableName(comp: PopComponentDefinitionV5): string | null {
+  const cfg = comp.config as Record<string, unknown> | undefined;
+  if (!cfg) return null;
+
+  const grid = cfg.cardGrid as { cells?: Array<{ timelineSource?: { processTable?: string } }> } | undefined;
+  if (grid?.cells) {
+    for (const cell of grid.cells) {
+      if (cell.timelineSource?.processTable) return cell.timelineSource.processTable;
+    }
+  }
+  return null;
+}
+
 function SimpleConnectionForm({
   component,
   allComponents,
@@ -274,6 +229,18 @@ function SimpleConnectionForm({
   const [selectedTargetId, setSelectedTargetId] = React.useState(
     initial?.targetComponent || ""
   );
+  const [isSubTable, setIsSubTable] = React.useState(
+    initial?.filterConfig?.isSubTable || false
+  );
+  const [targetColumn, setTargetColumn] = React.useState(
+    initial?.filterConfig?.targetColumn || ""
+  );
+  const [filterMode, setFilterMode] = React.useState<string>(
+    initial?.filterConfig?.filterMode || "equals"
+  );
+
+  const [subColumns, setSubColumns] = React.useState<string[]>([]);
+  const [loadingColumns, setLoadingColumns] = React.useState(false);
 
   const targetCandidates = allComponents.filter((c) => {
     if (c.id === component.id) return false;
@@ -281,14 +248,39 @@ function SimpleConnectionForm({
     return reg?.connectionMeta?.receivable && reg.connectionMeta.receivable.length > 0;
   });
 
+  const sourceReg = PopComponentRegistry.getComponent(component.type);
+  const targetComp = allComponents.find((c) => c.id === selectedTargetId);
+  const targetReg = targetComp ? PopComponentRegistry.getComponent(targetComp.type) : null;
+  const isFilterConnection = sourceReg?.connectionMeta?.sendable?.some((s) => s.type === "filter_value")
+    && targetReg?.connectionMeta?.receivable?.some((r) => r.type === "filter_value");
+
+  const subTableName = targetComp ? extractSubTableName(targetComp) : null;
+
+  React.useEffect(() => {
+    if (!isSubTable || !subTableName) {
+      setSubColumns([]);
+      return;
+    }
+    setLoadingColumns(true);
+    getTableColumns(subTableName)
+      .then((res) => {
+        const cols = res.success && res.data?.columns;
+        if (Array.isArray(cols)) {
+          setSubColumns(cols.map((c) => c.columnName || "").filter(Boolean));
+        }
+      })
+      .catch(() => setSubColumns([]))
+      .finally(() => setLoadingColumns(false));
+  }, [isSubTable, subTableName]);
+
   const handleSubmit = () => {
     if (!selectedTargetId) return;
 
-    const targetComp = allComponents.find((c) => c.id === selectedTargetId);
+    const tComp = allComponents.find((c) => c.id === selectedTargetId);
     const srcLabel = component.label || component.id;
-    const tgtLabel = targetComp?.label || targetComp?.id || "?";
+    const tgtLabel = tComp?.label || tComp?.id || "?";
 
-    onSubmit({
+    const conn: Omit<PopDataConnection, "id"> = {
       sourceComponent: component.id,
       sourceField: "",
       sourceOutput: "_auto",
@@ -296,10 +288,23 @@ function SimpleConnectionForm({
       targetField: "",
       targetInput: "_auto",
       label: `${srcLabel} → ${tgtLabel}`,
-    });
+    };
+
+    if (isFilterConnection && isSubTable && targetColumn) {
+      conn.filterConfig = {
+        targetColumn,
+        filterMode: filterMode as "equals" | "contains" | "starts_with" | "range",
+        isSubTable: true,
+      };
+    }
+
+    onSubmit(conn);
 
     if (!initial) {
       setSelectedTargetId("");
+      setIsSubTable(false);
+      setTargetColumn("");
+      setFilterMode("equals");
     }
   };
 
@@ -319,224 +324,12 @@ function SimpleConnectionForm({
 
       <div className="space-y-1">
         <span className="text-[10px] text-muted-foreground">어디로?</span>
-        <Select
-          value={selectedTargetId}
-          onValueChange={setSelectedTargetId}
-        >
-          <SelectTrigger className="h-7 text-xs">
-            <SelectValue placeholder="컴포넌트 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            {targetCandidates.map((c) => (
-              <SelectItem key={c.id} value={c.id} className="text-xs">
-                {c.label || c.id}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Button
-        size="sm"
-        variant="outline"
-        className="h-7 w-full text-xs"
-        disabled={!selectedTargetId}
-        onClick={handleSubmit}
-      >
-        {!initial && <Plus className="mr-1 h-3 w-3" />}
-        {submitLabel}
-      </Button>
-    </div>
-  );
-}
-
-// ========================================
-// 필터 연결 폼 (검색 컴포넌트용: 기존 UI 유지)
-// ========================================
-
-interface FilterConnectionFormProps {
-  component: PopComponentDefinitionV5;
-  meta: ComponentConnectionMeta;
-  allComponents: PopComponentDefinitionV5[];
-  initial?: PopDataConnection;
-  onSubmit: (data: Omit<PopDataConnection, "id">) => void;
-  onCancel?: () => void;
-  submitLabel: string;
-}
-
-function FilterConnectionForm({
-  component,
-  meta,
-  allComponents,
-  initial,
-  onSubmit,
-  onCancel,
-  submitLabel,
-}: FilterConnectionFormProps) {
-  const [selectedOutput, setSelectedOutput] = React.useState(
-    initial?.sourceOutput || meta.sendable[0]?.key || ""
-  );
-  const [selectedTargetId, setSelectedTargetId] = React.useState(
-    initial?.targetComponent || ""
-  );
-  const [selectedTargetInput, setSelectedTargetInput] = React.useState(
-    initial?.targetInput || ""
-  );
-  const [filterColumns, setFilterColumns] = React.useState<string[]>(
-    initial?.filterConfig?.targetColumns ||
-    (initial?.filterConfig?.targetColumn ? [initial.filterConfig.targetColumn] : [])
-  );
-  const [filterMode, setFilterMode] = React.useState<
-    "equals" | "contains" | "starts_with" | "range"
-  >(initial?.filterConfig?.filterMode || "contains");
-
-  const targetCandidates = allComponents.filter((c) => {
-    if (c.id === component.id) return false;
-    const reg = PopComponentRegistry.getComponent(c.type);
-    return reg?.connectionMeta?.receivable && reg.connectionMeta.receivable.length > 0;
-  });
-
-  const targetComp = selectedTargetId
-    ? allComponents.find((c) => c.id === selectedTargetId)
-    : null;
-
-  const targetMeta = targetComp
-    ? PopComponentRegistry.getComponent(targetComp.type)?.connectionMeta
-    : null;
-
-  React.useEffect(() => {
-    if (!selectedOutput || !targetMeta?.receivable?.length) return;
-    if (selectedTargetInput) return;
-
-    const receivables = targetMeta.receivable;
-    const exactMatch = receivables.find((r) => r.key === selectedOutput);
-    if (exactMatch) {
-      setSelectedTargetInput(exactMatch.key);
-      return;
-    }
-    if (receivables.length === 1) {
-      setSelectedTargetInput(receivables[0].key);
-    }
-  }, [selectedOutput, targetMeta, selectedTargetInput]);
-
-  const displayColumns = React.useMemo(
-    () => extractDisplayColumns(targetComp || undefined),
-    [targetComp]
-  );
-
-  const tableName = React.useMemo(
-    () => extractTableName(targetComp || undefined),
-    [targetComp]
-  );
-  const [allDbColumns, setAllDbColumns] = React.useState<string[]>([]);
-  const [dbColumnsLoading, setDbColumnsLoading] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!tableName) {
-      setAllDbColumns([]);
-      return;
-    }
-    let cancelled = false;
-    setDbColumnsLoading(true);
-    getTableColumns(tableName).then((res) => {
-      if (cancelled) return;
-      if (res.success && res.data?.columns) {
-        setAllDbColumns(res.data.columns.map((c) => c.columnName));
-      } else {
-        setAllDbColumns([]);
-      }
-      setDbColumnsLoading(false);
-    });
-    return () => { cancelled = true; };
-  }, [tableName]);
-
-  const displaySet = React.useMemo(() => new Set(displayColumns), [displayColumns]);
-  const dataOnlyColumns = React.useMemo(
-    () => allDbColumns.filter((c) => !displaySet.has(c)),
-    [allDbColumns, displaySet]
-  );
-  const hasAnyColumns = displayColumns.length > 0 || dataOnlyColumns.length > 0;
-
-  const toggleColumn = (col: string) => {
-    setFilterColumns((prev) =>
-      prev.includes(col) ? prev.filter((c) => c !== col) : [...prev, col]
-    );
-  };
-
-  const handleSubmit = () => {
-    if (!selectedOutput || !selectedTargetId || !selectedTargetInput) return;
-
-    const isEvent = isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput);
-
-    onSubmit({
-      sourceComponent: component.id,
-      sourceField: "",
-      sourceOutput: selectedOutput,
-      targetComponent: selectedTargetId,
-      targetField: "",
-      targetInput: selectedTargetInput,
-      filterConfig:
-        !isEvent && filterColumns.length > 0
-          ? {
-              targetColumn: filterColumns[0],
-              targetColumns: filterColumns,
-              filterMode,
-            }
-          : undefined,
-      label: buildConnectionLabel(
-        component,
-        selectedOutput,
-        allComponents.find((c) => c.id === selectedTargetId),
-        selectedTargetInput,
-        filterColumns
-      ),
-    });
-
-    if (!initial) {
-      setSelectedTargetId("");
-      setSelectedTargetInput("");
-      setFilterColumns([]);
-    }
-  };
-
-  return (
-    <div className="space-y-2 rounded border border-dashed p-3">
-      {onCancel && (
-        <div className="flex items-center justify-between">
-          <p className="text-[10px] font-medium text-muted-foreground">연결 수정</p>
-          <button onClick={onCancel} className="text-muted-foreground hover:text-foreground">
-            <X className="h-3 w-3" />
-          </button>
-        </div>
-      )}
-      {!onCancel && (
-        <p className="text-[10px] font-medium text-muted-foreground">새 연결 추가</p>
-      )}
-
-      <div className="space-y-1">
-        <span className="text-[10px] text-muted-foreground">보내는 값</span>
-        <Select value={selectedOutput} onValueChange={setSelectedOutput}>
-          <SelectTrigger className="h-7 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {meta.sendable.map((s) => (
-              <SelectItem key={s.key} value={s.key} className="text-xs">
-                {s.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="space-y-1">
-        <span className="text-[10px] text-muted-foreground">받는 컴포넌트</span>
         <Select
           value={selectedTargetId}
           onValueChange={(v) => {
             setSelectedTargetId(v);
-            setSelectedTargetInput("");
-            setFilterColumns([]);
+            setIsSubTable(false);
+            setTargetColumn("");
           }}
         >
           <SelectTrigger className="h-7 text-xs">
@@ -552,109 +345,62 @@ function FilterConnectionForm({
         </Select>
       </div>
 
-      {targetMeta && (
-        <div className="space-y-1">
-          <span className="text-[10px] text-muted-foreground">받는 방식</span>
-          <Select value={selectedTargetInput} onValueChange={setSelectedTargetInput}>
-            <SelectTrigger className="h-7 text-xs">
-              <SelectValue placeholder="선택" />
-            </SelectTrigger>
-            <SelectContent>
-              {targetMeta.receivable.map((r) => (
-                <SelectItem key={r.key} value={r.key} className="text-xs">
-                  {r.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      {selectedTargetInput && !isEventTypeConnection(meta, selectedOutput, targetMeta, selectedTargetInput) && (
-        <div className="space-y-2 rounded bg-muted p-2">
-          <p className="text-[10px] font-medium text-muted-foreground">필터할 컬럼</p>
-
-          {dbColumnsLoading ? (
-            <div className="flex items-center gap-2 py-2">
-              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-              <span className="text-[10px] text-muted-foreground">컬럼 조회 중...</span>
-            </div>
-          ) : hasAnyColumns ? (
-            <div className="space-y-2">
-              {displayColumns.length > 0 && (
-                <div className="space-y-1">
-                  <p className="text-[9px] font-medium text-emerald-600">화면 표시 컬럼</p>
-                  {displayColumns.map((col) => (
-                    <div key={col} className="flex items-center gap-2">
-                      <Checkbox
-                        id={`col-${col}-${initial?.id || "new"}`}
-                        checked={filterColumns.includes(col)}
-                        onCheckedChange={() => toggleColumn(col)}
-                      />
-                      <label
-                        htmlFor={`col-${col}-${initial?.id || "new"}`}
-                        className="cursor-pointer text-xs"
-                      >
-                        {col}
-                      </label>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {dataOnlyColumns.length > 0 && (
-                <div className="space-y-1">
-                  {displayColumns.length > 0 && (
-                    <div className="my-1 h-px bg-muted/80" />
-                  )}
-                  <p className="text-[9px] font-medium text-amber-600">데이터 전용 컬럼</p>
-                  {dataOnlyColumns.map((col) => (
-                    <div key={col} className="flex items-center gap-2">
-                      <Checkbox
-                        id={`col-${col}-${initial?.id || "new"}`}
-                        checked={filterColumns.includes(col)}
-                        onCheckedChange={() => toggleColumn(col)}
-                      />
-                      <label
-                        htmlFor={`col-${col}-${initial?.id || "new"}`}
-                        className="cursor-pointer text-xs text-muted-foreground"
-                      >
-                        {col}
-                      </label>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          ) : (
-            <Input
-              value={filterColumns[0] || ""}
-              onChange={(e) => setFilterColumns(e.target.value ? [e.target.value] : [])}
-              placeholder="컬럼명 입력"
-              className="h-7 text-xs"
+      {isFilterConnection && selectedTargetId && subTableName && (
+        <div className="space-y-2 rounded bg-muted/50 p-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id={`isSubTable_${component.id}`}
+              checked={isSubTable}
+              onCheckedChange={(v) => {
+                setIsSubTable(v === true);
+                if (!v) setTargetColumn("");
+              }}
             />
-          )}
-
-          {filterColumns.length > 0 && (
-            <p className="text-[10px] text-primary">
-              {filterColumns.length}개 컬럼 중 하나라도 일치하면 표시
-            </p>
-          )}
-
-          <div className="space-y-1">
-            <p className="text-[10px] text-muted-foreground">필터 방식</p>
-            <Select value={filterMode} onValueChange={(v: any) => setFilterMode(v)}>
-              <SelectTrigger className="h-7 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="contains" className="text-xs">포함</SelectItem>
-                <SelectItem value="equals" className="text-xs">일치</SelectItem>
-                <SelectItem value="starts_with" className="text-xs">시작</SelectItem>
-                <SelectItem value="range" className="text-xs">범위</SelectItem>
-              </SelectContent>
-            </Select>
+            <label htmlFor={`isSubTable_${component.id}`} className="text-[10px] text-muted-foreground cursor-pointer">
+              하위 테이블 기준으로 필터 ({subTableName})
+            </label>
           </div>
+
+          {isSubTable && (
+            <div className="space-y-2 pl-5">
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">대상 컬럼</span>
+                {loadingColumns ? (
+                  <div className="flex items-center gap-1 py-1">
+                    <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+                    <span className="text-[10px] text-muted-foreground">컬럼 로딩 중...</span>
+                  </div>
+                ) : (
+                  <Select value={targetColumn} onValueChange={setTargetColumn}>
+                    <SelectTrigger className="h-7 text-xs">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {subColumns.filter(Boolean).map((col) => (
+                        <SelectItem key={col} value={col} className="text-xs">
+                          {col}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">비교 방식</span>
+                <Select value={filterMode} onValueChange={setFilterMode}>
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="equals" className="text-xs">일치 (equals)</SelectItem>
+                    <SelectItem value="contains" className="text-xs">포함 (contains)</SelectItem>
+                    <SelectItem value="starts_with" className="text-xs">시작 (starts_with)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
         </div>
       )}
 
@@ -662,7 +408,7 @@ function FilterConnectionForm({
         size="sm"
         variant="outline"
         className="h-7 w-full text-xs"
-        disabled={!selectedOutput || !selectedTargetId || !selectedTargetInput}
+        disabled={!selectedTargetId}
         onClick={handleSubmit}
       >
         {!initial && <Plus className="mr-1 h-3 w-3" />}
@@ -722,32 +468,3 @@ function ReceiveSection({
   );
 }
 
-// ========================================
-// 유틸
-// ========================================
-
-function isEventTypeConnection(
-  sourceMeta: ComponentConnectionMeta | undefined,
-  outputKey: string,
-  targetMeta: ComponentConnectionMeta | null | undefined,
-  inputKey: string,
-): boolean {
-  const sourceItem = sourceMeta?.sendable?.find((s) => s.key === outputKey);
-  const targetItem = targetMeta?.receivable?.find((r) => r.key === inputKey);
-  return sourceItem?.type === "event" || targetItem?.type === "event";
-}
-
-function buildConnectionLabel(
-  source: PopComponentDefinitionV5,
-  _outputKey: string,
-  target: PopComponentDefinitionV5 | undefined,
-  _inputKey: string,
-  columns?: string[]
-): string {
-  const srcLabel = source.label || source.id;
-  const tgtLabel = target?.label || target?.id || "?";
-  const colInfo = columns && columns.length > 0
-    ? ` [${columns.join(", ")}]`
-    : "";
-  return `${srcLabel} → ${tgtLabel}${colInfo}`;
-}
diff --git a/frontend/components/pop/designer/renderers/PopRenderer.tsx b/frontend/components/pop/designer/renderers/PopRenderer.tsx
index 598f0e90..a9c7db6e 100644
--- a/frontend/components/pop/designer/renderers/PopRenderer.tsx
+++ b/frontend/components/pop/designer/renderers/PopRenderer.tsx
@@ -72,10 +72,14 @@ const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
   "pop-icon": "아이콘",
   "pop-dashboard": "대시보드",
   "pop-card-list": "카드 목록",
+  "pop-card-list-v2": "카드 목록 V2",
   "pop-button": "버튼",
   "pop-string-list": "리스트 목록",
   "pop-search": "검색",
+  "pop-status-bar": "상태 바",
   "pop-field": "입력",
+  "pop-scanner": "스캐너",
+  "pop-profile": "프로필",
 };
 
 // ========================================
@@ -554,7 +558,7 @@ function ComponentContent({ component, effectivePosition, isDesignMode, isSelect
     if (ActualComp) {
       // 아이콘 컴포넌트는 클릭 이벤트가 필요하므로 pointer-events 허용
       // CardList 컴포넌트도 버튼 클릭이 필요하므로 pointer-events 허용
-      const needsPointerEvents = component.type === "pop-icon" || component.type === "pop-card-list";
+      const needsPointerEvents = component.type === "pop-icon" || component.type === "pop-card-list" || component.type === "pop-card-list-v2";
       
       return (
         <div className={cn(
diff --git a/frontend/components/pop/designer/types/pop-layout.ts b/frontend/components/pop/designer/types/pop-layout.ts
index a02bf02b..9fb9a847 100644
--- a/frontend/components/pop/designer/types/pop-layout.ts
+++ b/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" | "pop-string-list" | "pop-search" | "pop-field";
+export type PopComponentType = "pop-sample" | "pop-text" | "pop-icon" | "pop-dashboard" | "pop-card-list" | "pop-card-list-v2" | "pop-button" | "pop-string-list" | "pop-search" | "pop-status-bar" | "pop-field" | "pop-scanner" | "pop-profile";
 
 /**
  * 데이터 흐름 정의
@@ -33,6 +33,7 @@ export interface PopDataConnection {
     targetColumn: string;
     targetColumns?: string[];
     filterMode: "equals" | "contains" | "starts_with" | "range";
+    isSubTable?: boolean;
   };
   label?: string;
 }
@@ -358,10 +359,14 @@ export const DEFAULT_COMPONENT_GRID_SIZE: Record<PopComponentType, { colSpan: nu
   "pop-icon": { colSpan: 1, rowSpan: 2 },
   "pop-dashboard": { colSpan: 6, rowSpan: 3 },
   "pop-card-list": { colSpan: 4, rowSpan: 3 },
+  "pop-card-list-v2": { colSpan: 4, rowSpan: 3 },
   "pop-button": { colSpan: 2, rowSpan: 1 },
   "pop-string-list": { colSpan: 4, rowSpan: 3 },
-  "pop-search": { colSpan: 4, rowSpan: 2 },
+  "pop-search": { colSpan: 2, rowSpan: 1 },
+  "pop-status-bar": { colSpan: 6, rowSpan: 1 },
   "pop-field": { colSpan: 6, rowSpan: 2 },
+  "pop-scanner": { colSpan: 1, rowSpan: 1 },
+  "pop-profile": { colSpan: 1, rowSpan: 1 },
 };
 
 /**
diff --git a/frontend/components/screen/CopyScreenModal.tsx b/frontend/components/screen/CopyScreenModal.tsx
index f8190ce7..0d7840d1 100644
--- a/frontend/components/screen/CopyScreenModal.tsx
+++ b/frontend/components/screen/CopyScreenModal.tsx
@@ -1165,6 +1165,28 @@ export default function CopyScreenModal({
         }
       }
 
+      // 그룹 복제 요약 감사 로그 1건 기록
+      try {
+        await apiClient.post("/audit-log", {
+          action: "COPY",
+          resourceType: "SCREEN",
+          resourceId: String(sourceGroup.id),
+          resourceName: sourceGroup.group_name,
+          summary: `그룹 "${sourceGroup.group_name}" → "${rootGroupName}" 복제 (그룹 ${stats.groups}개, 화면 ${stats.screens}개)${finalCompanyCode !== sourceGroup.company_code ? ` [${sourceGroup.company_code} → ${finalCompanyCode}]` : ""}`,
+          changes: {
+            after: {
+              원본그룹: sourceGroup.group_name,
+              대상그룹: rootGroupName,
+              복제그룹수: stats.groups,
+              복제화면수: stats.screens,
+              대상회사: finalCompanyCode,
+            },
+          },
+        });
+      } catch (auditError) {
+        console.warn("그룹 복제 감사 로그 기록 실패 (무시):", auditError);
+      }
+
       toast.success(
         `그룹 복제가 완료되었습니다! (그룹 ${stats.groups}개 + 화면 ${stats.screens}개)`
       );
diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 17615147..4726cf39 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -47,6 +47,7 @@ interface RealtimePreviewProps {
   selectedTabComponentId?: string; // 🆕 선택된 탭 컴포넌트 ID
   onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void; // 🆕 분할 패널 내부 컴포넌트 선택 콜백
   selectedPanelComponentId?: string; // 🆕 선택된 분할 패널 컴포넌트 ID
+  onNestedPanelSelect?: (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => void;
   onResize?: (componentId: string, newSize: { width: number; height: number }) => void; // 🆕 리사이즈 콜백
 
   // 버튼 액션을 위한 props
@@ -150,6 +151,7 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
   selectedTabComponentId, // 🆕 선택된 탭 컴포넌트 ID
   onSelectPanelComponent, // 🆕 분할 패널 내부 컴포넌트 선택 콜백
   selectedPanelComponentId, // 🆕 선택된 분할 패널 컴포넌트 ID
+  onNestedPanelSelect,
   onResize, // 🆕 리사이즈 콜백
 }) => {
   // 🆕 화면 다국어 컨텍스트
@@ -768,10 +770,11 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
           selectedTabComponentId={selectedTabComponentId}
           onSelectPanelComponent={onSelectPanelComponent}
           selectedPanelComponentId={selectedPanelComponentId}
+          onNestedPanelSelect={onNestedPanelSelect}
         />
       </div>
 
-      {/* 선택된 컴포넌트 정보 표시 - 🔧 오른쪽으로 이동 (라벨과 겹치지 않도록) */}
+      {/* 선택된 컴포넌트 정보 표시 */}
       {isSelected && (
         <div className="bg-primary text-primary-foreground absolute -top-7 right-0 rounded-md px-2.5 py-1 text-xs font-medium shadow-sm">
           {type === "widget" && (
@@ -782,7 +785,18 @@ const RealtimePreviewDynamicComponent: React.FC<RealtimePreviewProps> = ({
           )}
           {type !== "widget" && (
             <div className="flex items-center gap-1.5">
-              <span>{component.componentConfig?.type || type}</span>
+              <span>{(() => {
+                const ft = (component as any).componentConfig?.fieldType;
+                if (ft) {
+                  const labels: Record<string, string> = {
+                    text: "텍스트", number: "숫자", textarea: "여러줄",
+                    select: "셀렉트", category: "카테고리", entity: "엔티티",
+                    numbering: "채번",
+                  };
+                  return labels[ft] || ft;
+                }
+                return (component as any).componentConfig?.type || componentType || type;
+              })()}</span>
             </div>
           )}
         </div>
diff --git a/frontend/components/screen/ResponsiveGridRenderer.tsx b/frontend/components/screen/ResponsiveGridRenderer.tsx
index 8f671c21..c718c70e 100644
--- a/frontend/components/screen/ResponsiveGridRenderer.tsx
+++ b/frontend/components/screen/ResponsiveGridRenderer.tsx
@@ -109,6 +109,8 @@ interface ProcessedRow {
   mainComponent?: ComponentData;
   overlayComps: ComponentData[];
   normalComps: ComponentData[];
+  rowMinY?: number;
+  rowMaxBottom?: number;
 }
 
 function FullWidthOverlayRow({
@@ -202,6 +204,66 @@ function FullWidthOverlayRow({
   );
 }
 
+function ProportionalRenderer({
+  components,
+  canvasWidth,
+  canvasHeight,
+  renderComponent,
+}: ResponsiveGridRendererProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerW, setContainerW] = useState(0);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerW(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const topLevel = components.filter((c) => !c.parentId);
+  const ratio = containerW > 0 ? containerW / canvasWidth : 1;
+
+  const maxBottom = topLevel.reduce((max, c) => {
+    const bottom = c.position.y + (c.size?.height || 40);
+    return Math.max(max, bottom);
+  }, 0);
+
+  return (
+    <div
+      ref={containerRef}
+      data-screen-runtime="true"
+      className="bg-background relative w-full overflow-x-hidden"
+      style={{ minHeight: containerW > 0 ? `${maxBottom * ratio}px` : "200px" }}
+    >
+      {containerW > 0 &&
+        topLevel.map((component) => {
+          const typeId = getComponentTypeId(component);
+          return (
+            <div
+              key={component.id}
+              data-component-id={component.id}
+              data-component-type={typeId}
+              style={{
+                position: "absolute",
+                left: `${(component.position.x / canvasWidth) * 100}%`,
+                top: `${component.position.y * ratio}px`,
+                width: `${((component.size?.width || 100) / canvasWidth) * 100}%`,
+                height: `${(component.size?.height || 40) * ratio}px`,
+                zIndex: component.position.z || 1,
+              }}
+            >
+              {renderComponent(component)}
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
 export function ResponsiveGridRenderer({
   components,
   canvasWidth,
@@ -211,6 +273,18 @@ export function ResponsiveGridRenderer({
   const { isMobile } = useResponsive();
 
   const topLevel = components.filter((c) => !c.parentId);
+  const hasFullWidthComponent = topLevel.some((c) => isFullWidthComponent(c));
+
+  if (!isMobile && !hasFullWidthComponent) {
+    return (
+      <ProportionalRenderer
+        components={components}
+        canvasWidth={canvasWidth}
+        canvasHeight={canvasHeight}
+        renderComponent={renderComponent}
+      />
+    );
+  }
 
   const rows = groupComponentsIntoRows(topLevel);
   const processedRows: ProcessedRow[] = [];
@@ -227,6 +301,10 @@ export function ResponsiveGridRenderer({
       }
     }
 
+    const allComps = [...fullWidthComps, ...normalComps];
+    const rowMinY = allComps.length > 0 ? Math.min(...allComps.map(c => c.position.y)) : 0;
+    const rowMaxBottom = allComps.length > 0 ? Math.max(...allComps.map(c => c.position.y + (c.size?.height || 40))) : 0;
+
     if (fullWidthComps.length > 0 && normalComps.length > 0) {
       for (const fwComp of fullWidthComps) {
         processedRows.push({
@@ -234,6 +312,8 @@ export function ResponsiveGridRenderer({
           mainComponent: fwComp,
           overlayComps: normalComps,
           normalComps: [],
+          rowMinY,
+          rowMaxBottom,
         });
       }
     } else if (fullWidthComps.length > 0) {
@@ -243,6 +323,8 @@ export function ResponsiveGridRenderer({
           mainComponent: fwComp,
           overlayComps: [],
           normalComps: [],
+          rowMinY,
+          rowMaxBottom,
         });
       }
     } else {
@@ -250,6 +332,8 @@ export function ResponsiveGridRenderer({
         type: "normal",
         overlayComps: [],
         normalComps,
+        rowMinY,
+        rowMaxBottom,
       });
     }
   }
@@ -261,21 +345,71 @@ export function ResponsiveGridRenderer({
       style={{ minHeight: "200px" }}
     >
       {processedRows.map((processedRow, rowIndex) => {
+        const rowMarginTop = (() => {
+          if (rowIndex === 0) return 0;
+          const prevRow = processedRows[rowIndex - 1];
+          const prevBottom = prevRow.rowMaxBottom ?? 0;
+          const currTop = processedRow.rowMinY ?? 0;
+          const designGap = currTop - prevBottom;
+          if (designGap <= 0) return 0;
+          return Math.min(Math.max(Math.round(designGap * 0.5), 4), 48);
+        })();
+
         if (processedRow.type === "fullwidth" && processedRow.mainComponent) {
           return (
-            <FullWidthOverlayRow
-              key={`row-${rowIndex}`}
-              main={processedRow.mainComponent}
-              overlayComps={processedRow.overlayComps}
-              canvasWidth={canvasWidth}
-              renderComponent={renderComponent}
-            />
+            <div key={`row-${rowIndex}`} style={{ marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined }}>
+              <FullWidthOverlayRow
+                main={processedRow.mainComponent}
+                overlayComps={processedRow.overlayComps}
+                canvasWidth={canvasWidth}
+                renderComponent={renderComponent}
+              />
+            </div>
           );
         }
 
         const { normalComps } = processedRow;
         const allButtons = normalComps.every((c) => isButtonComponent(c));
-        const gap = isMobile ? 8 : allButtons ? 8 : getRowGap(normalComps, canvasWidth);
+
+        // 데스크톱에서 버튼만 있는 행: 디자이너의 x, width를 비율로 적용
+        if (allButtons && normalComps.length > 0 && !isMobile) {
+          const rowHeight = Math.max(...normalComps.map(c => c.size?.height || 40));
+
+          return (
+            <div
+              key={`row-${rowIndex}`}
+              className="relative w-full flex-shrink-0"
+              style={{
+                height: `${rowHeight}px`,
+                marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined,
+              }}
+            >
+              {normalComps.map((component) => {
+                const typeId = getComponentTypeId(component);
+                const leftPct = (component.position.x / canvasWidth) * 100;
+                const widthPct = ((component.size?.width || 90) / canvasWidth) * 100;
+
+                return (
+                  <div
+                    key={component.id}
+                    data-component-id={component.id}
+                    data-component-type={typeId}
+                    style={{
+                      position: "absolute",
+                      left: `${leftPct}%`,
+                      width: `${widthPct}%`,
+                      height: `${component.size?.height || 40}px`,
+                    }}
+                  >
+                    {renderComponent(component)}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        }
+
+        const gap = isMobile ? 8 : getRowGap(normalComps, canvasWidth);
 
         const hasFlexHeightComp = normalComps.some((c) => {
           const h = c.size?.height || 0;
@@ -287,10 +421,9 @@ export function ResponsiveGridRenderer({
             key={`row-${rowIndex}`}
             className={cn(
               "flex w-full flex-wrap overflow-hidden",
-              allButtons && "justify-end px-2 py-1",
               hasFlexHeightComp ? "min-h-0 flex-1" : "flex-shrink-0"
             )}
-            style={{ gap: `${gap}px` }}
+            style={{ gap: `${gap}px`, marginTop: rowMarginTop > 0 ? `${rowMarginTop}px` : undefined }}
           >
             {normalComps.map((component) => {
               const typeId = getComponentTypeId(component);
@@ -334,13 +467,13 @@ export function ResponsiveGridRenderer({
                   style={{
                     width: isFullWidth ? "100%" : undefined,
                     flexBasis: useFlexHeight ? undefined : flexBasis,
-                    flexGrow: 1,
+                    flexGrow: percentWidth,
                     flexShrink: 1,
                     minWidth: isMobile ? "100%" : undefined,
-                    minHeight: useFlexHeight ? "300px" : undefined,
-                    height: useFlexHeight ? "100%" : (component.size?.height
+                    minHeight: useFlexHeight ? "300px" : (component.size?.height
                       ? `${component.size.height}px`
-                      : "auto"),
+                      : undefined),
+                    height: useFlexHeight ? "100%" : "auto",
                   }}
                 >
                   {renderComponent(component)}
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 10e1153d..d22a9c14 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -475,6 +475,7 @@ export default function ScreenDesigner({
 
   // 테이블 데이터
   const [tables, setTables] = useState<TableInfo[]>([]);
+  const [tableRefreshCounter, setTableRefreshCounter] = useState(0);
   const [searchTerm, setSearchTerm] = useState("");
 
   // 🆕 검색어로 필터링된 테이블 목록
@@ -1434,8 +1435,16 @@ export default function ScreenDesigner({
     selectedScreen?.restApiConnectionId,
     selectedScreen?.restApiEndpoint,
     selectedScreen?.restApiJsonPath,
+    tableRefreshCounter,
   ]);
 
+  // 필드 타입 변경 시 테이블 컬럼 정보 갱신 (화면 디자이너에서 input_type 변경 반영)
+  useEffect(() => {
+    const handler = () => setTableRefreshCounter((c) => c + 1);
+    window.addEventListener("table-columns-refresh", handler);
+    return () => window.removeEventListener("table-columns-refresh", handler);
+  }, []);
+
   // 테이블 선택 핸들러 - 사이드바에서 테이블 선택 시 호출
   const handleTableSelect = useCallback(
     async (tableName: string) => {
@@ -2861,9 +2870,190 @@ export default function ScreenDesigner({
         }
       }
 
-      // 🎯 탭 컨테이너 내부 드롭 처리 (중첩 구조 지원)
+      // 🎯 컨테이너 드롭 우선순위: 가장 안쪽(innermost) 컨테이너 우선
+      // 분할패널과 탭 둘 다 감지될 경우, DOM 트리에서 더 가까운 쪽을 우선 처리
       const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
-      if (tabsContainer) {
+      const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
+
+      // 분할패널이 탭보다 안쪽에 있으면 분할패널 우선 처리
+      const splitPanelFirst =
+        splitPanelContainer &&
+        (!tabsContainer || tabsContainer.contains(splitPanelContainer));
+
+      if (splitPanelFirst && splitPanelContainer) {
+        const containerId = splitPanelContainer.getAttribute("data-component-id");
+        const panelSide = splitPanelContainer.getAttribute("data-panel-side");
+        if (containerId && panelSide) {
+          // 분할 패널을 최상위 또는 중첩(탭 안)에서 찾기
+          let targetComponent: any = layout.components.find((c) => c.id === containerId);
+          let parentTabsId: string | null = null;
+          let parentTabId: string | null = null;
+          let parentSplitId: string | null = null;
+          let parentSplitSide: string | null = null;
+
+          if (!targetComponent) {
+            // 탭 안에 중첩된 분할패널 찾기
+            // top-level: overrides.type / overrides.tabs
+            // nested: componentType / componentConfig.tabs
+            for (const comp of layout.components) {
+              const compType = (comp as any)?.componentType || (comp as any)?.overrides?.type;
+              const compConfig = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
+
+              if (compType === "tabs-widget" || compType === "v2-tabs-widget") {
+                const tabs = compConfig.tabs || [];
+                for (const tab of tabs) {
+                  const found = (tab.components || []).find((c: any) => c.id === containerId);
+                  if (found) {
+                    targetComponent = found;
+                    parentTabsId = comp.id;
+                    parentTabId = tab.id;
+                    break;
+                  }
+                }
+                if (targetComponent) break;
+              }
+
+              if (compType === "split-panel-layout" || compType === "v2-split-panel-layout") {
+                for (const side of ["leftPanel", "rightPanel"] as const) {
+                  const panelComps = compConfig[side]?.components || [];
+                  for (const pc of panelComps) {
+                    const pct = pc.componentType || pc.overrides?.type;
+                    if (pct === "tabs-widget" || pct === "v2-tabs-widget") {
+                      const tabs = (pc.componentConfig || pc.overrides || {}).tabs || [];
+                      for (const tab of tabs) {
+                        const found = (tab.components || []).find((c: any) => c.id === containerId);
+                        if (found) {
+                          targetComponent = found;
+                          parentSplitId = comp.id;
+                          parentSplitSide = side === "leftPanel" ? "left" : "right";
+                          parentTabsId = pc.id;
+                          parentTabId = tab.id;
+                          break;
+                        }
+                      }
+                      if (targetComponent) break;
+                    }
+                  }
+                  if (targetComponent) break;
+                }
+                if (targetComponent) break;
+              }
+            }
+          }
+
+
+
+          const compType = (targetComponent as any)?.componentType;
+          if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
+            const currentConfig = (targetComponent as any).componentConfig || {};
+            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+            const panelConfig = currentConfig[panelKey] || {};
+            const currentComponents = panelConfig.components || [];
+
+            const panelRect = splitPanelContainer.getBoundingClientRect();
+            const cs1 = window.getComputedStyle(splitPanelContainer);
+            const dropX = (e.clientX - panelRect.left - (parseFloat(cs1.paddingLeft) || 0)) / zoomLevel;
+            const dropY = (e.clientY - panelRect.top - (parseFloat(cs1.paddingTop) || 0)) / zoomLevel;
+
+            const componentType = component.id || component.componentType || "v2-text-display";
+
+            const newPanelComponent = {
+              id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+              componentType: componentType,
+              label: component.name || component.label || "새 컴포넌트",
+              position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+              size: component.defaultSize || { width: 200, height: 100 },
+              componentConfig: component.defaultConfig || {},
+            };
+
+            const updatedPanelConfig = {
+              ...panelConfig,
+              components: [...currentComponents, newPanelComponent],
+            };
+
+            const updatedSplitPanel = {
+              ...targetComponent,
+              componentConfig: {
+                ...currentConfig,
+                [panelKey]: updatedPanelConfig,
+              },
+            };
+
+            let newLayout;
+            if (parentTabsId && parentTabId) {
+              // 중첩: (최상위 분할패널 →) 탭 → 분할패널
+              const updateTabsComponent = (tabsComp: any) => {
+                const ck = tabsComp.componentConfig ? "componentConfig" : "overrides";
+                const cfg = tabsComp[ck] || {};
+                const tabs = cfg.tabs || [];
+                return {
+                  ...tabsComp,
+                  [ck]: {
+                    ...cfg,
+                    tabs: tabs.map((tab: any) =>
+                      tab.id === parentTabId
+                        ? {
+                            ...tab,
+                            components: (tab.components || []).map((c: any) =>
+                              c.id === containerId ? updatedSplitPanel : c,
+                            ),
+                          }
+                        : tab,
+                    ),
+                  },
+                };
+              };
+
+              if (parentSplitId && parentSplitSide) {
+                // 최상위 분할패널 → 탭 → 분할패널
+                const pKey = parentSplitSide === "left" ? "leftPanel" : "rightPanel";
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) => {
+                    if (c.id === parentSplitId) {
+                      const sc = (c as any).componentConfig || {};
+                      return {
+                        ...c,
+                        componentConfig: {
+                          ...sc,
+                          [pKey]: {
+                            ...sc[pKey],
+                            components: (sc[pKey]?.components || []).map((pc: any) =>
+                              pc.id === parentTabsId ? updateTabsComponent(pc) : pc,
+                            ),
+                          },
+                        },
+                      };
+                    }
+                    return c;
+                  }),
+                };
+              } else {
+                // 최상위 탭 → 분할패널
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) =>
+                    c.id === parentTabsId ? updateTabsComponent(c) : c,
+                  ),
+                };
+              }
+            } else {
+              // 최상위 분할패널
+              newLayout = {
+                ...layout,
+                components: layout.components.map((c) => (c.id === containerId ? updatedSplitPanel : c)),
+              };
+            }
+
+            setLayout(newLayout);
+            saveToHistory(newLayout);
+            toast.success(`컴포넌트가 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
+            return;
+          }
+        }
+      }
+
+      if (tabsContainer && !splitPanelFirst) {
         const containerId = tabsContainer.getAttribute("data-component-id");
         const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
         if (containerId && activeTabId) {
@@ -3004,69 +3194,6 @@ export default function ScreenDesigner({
         }
       }
 
-      // 🎯 분할 패널 커스텀 모드 컨테이너 내부 드롭 처리
-      const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
-      if (splitPanelContainer) {
-        const containerId = splitPanelContainer.getAttribute("data-component-id");
-        const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
-        if (containerId && panelSide) {
-          const targetComponent = layout.components.find((c) => c.id === containerId);
-          const compType = (targetComponent as any)?.componentType;
-          if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
-            const currentConfig = (targetComponent as any).componentConfig || {};
-            const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
-            const panelConfig = currentConfig[panelKey] || {};
-            const currentComponents = panelConfig.components || [];
-
-            // 드롭 위치 계산
-            const panelRect = splitPanelContainer.getBoundingClientRect();
-            const dropX = (e.clientX - panelRect.left) / zoomLevel;
-            const dropY = (e.clientY - panelRect.top) / zoomLevel;
-
-            // 새 컴포넌트 생성
-            const componentType = component.id || component.componentType || "v2-text-display";
-
-            console.log("🎯 분할 패널에 컴포넌트 드롭:", {
-              componentId: component.id,
-              componentType: componentType,
-              panelSide: panelSide,
-              dropPosition: { x: dropX, y: dropY },
-            });
-
-            const newPanelComponent = {
-              id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-              componentType: componentType,
-              label: component.name || component.label || "새 컴포넌트",
-              position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
-              size: component.defaultSize || { width: 200, height: 100 },
-              componentConfig: component.defaultConfig || {},
-            };
-
-            const updatedPanelConfig = {
-              ...panelConfig,
-              components: [...currentComponents, newPanelComponent],
-            };
-
-            const updatedComponent = {
-              ...targetComponent,
-              componentConfig: {
-                ...currentConfig,
-                [panelKey]: updatedPanelConfig,
-              },
-            };
-
-            const newLayout = {
-              ...layout,
-              components: layout.components.map((c) => (c.id === containerId ? updatedComponent : c)),
-            };
-
-            setLayout(newLayout);
-            saveToHistory(newLayout);
-            toast.success(`컴포넌트가 ${panelSide === "left" ? "좌측" : "우측"} 패널에 추가되었습니다`);
-            return; // 분할 패널 처리 완료
-          }
-        }
-      }
 
       const rect = canvasRef.current?.getBoundingClientRect();
       if (!rect) return;
@@ -3378,15 +3505,12 @@ export default function ScreenDesigner({
       e.preventDefault();
 
       const dragData = e.dataTransfer.getData("application/json");
-      // console.log("🎯 드롭 이벤트:", { dragData });
       if (!dragData) {
-        // console.log("❌ 드래그 데이터가 없습니다");
         return;
       }
 
       try {
         const parsedData = JSON.parse(dragData);
-        // console.log("📋 파싱된 데이터:", parsedData);
 
         // 템플릿 드래그인 경우
         if (parsedData.type === "template") {
@@ -3480,9 +3604,225 @@ export default function ScreenDesigner({
           }
         }
 
-        // 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리 (중첩 구조 지원)
+        // 🎯 컨테이너 감지: innermost 우선 (분할패널 > 탭)
         const tabsContainer = dropTarget.closest('[data-tabs-container="true"]');
-        if (tabsContainer && type === "column" && column) {
+        const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
+
+        // 분할패널이 탭 안에 있으면 분할패널이 innermost → 분할패널 우선
+        const splitPanelFirst =
+          splitPanelContainer &&
+          (!tabsContainer || tabsContainer.contains(splitPanelContainer));
+
+        // 🎯 분할패널 커스텀 모드 컨테이너 내부에 컬럼 드롭 시 처리 (우선 처리)
+        if (splitPanelFirst && splitPanelContainer && type === "column" && column) {
+          const containerId = splitPanelContainer.getAttribute("data-component-id");
+          let panelSide = splitPanelContainer.getAttribute("data-panel-side");
+
+          // panelSide가 없으면 드롭 좌표와 splitRatio로 좌/우 판별
+          if (!panelSide) {
+            const splitRatio = parseInt(splitPanelContainer.getAttribute("data-split-ratio") || "40", 10);
+            const containerRect = splitPanelContainer.getBoundingClientRect();
+            const relativeX = e.clientX - containerRect.left;
+            const splitPoint = containerRect.width * (splitRatio / 100);
+            panelSide = relativeX < splitPoint ? "left" : "right";
+          }
+
+          if (containerId && panelSide) {
+            // 최상위에서 찾기
+            let targetComponent: any = layout.components.find((c) => c.id === containerId);
+            let parentTabsId: string | null = null;
+            let parentTabId: string | null = null;
+            let parentSplitId: string | null = null;
+            let parentSplitSide: string | null = null;
+
+            if (!targetComponent) {
+              // 탭 안 중첩 분할패널 찾기
+              // top-level 컴포넌트: overrides.type / overrides.tabs
+              // nested 컴포넌트: componentType / componentConfig.tabs
+              for (const comp of layout.components) {
+                const ct = (comp as any)?.componentType || (comp as any)?.overrides?.type;
+                const compConfig = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
+
+                if (ct === "tabs-widget" || ct === "v2-tabs-widget") {
+                  const tabs = compConfig.tabs || [];
+                  for (const tab of tabs) {
+                    const found = (tab.components || []).find((c: any) => c.id === containerId);
+                    if (found) {
+                      targetComponent = found;
+                      parentTabsId = comp.id;
+                      parentTabId = tab.id;
+                      break;
+                    }
+                  }
+                  if (targetComponent) break;
+                }
+                // 분할패널 → 탭 → 분할패널 중첩
+                if (ct === "split-panel-layout" || ct === "v2-split-panel-layout") {
+                  for (const side of ["leftPanel", "rightPanel"] as const) {
+                    const panelComps = compConfig[side]?.components || [];
+                    for (const pc of panelComps) {
+                      const pct = pc.componentType || pc.overrides?.type;
+                      if (pct === "tabs-widget" || pct === "v2-tabs-widget") {
+                        const tabs = (pc.componentConfig || pc.overrides || {}).tabs || [];
+                        for (const tab of tabs) {
+                          const found = (tab.components || []).find((c: any) => c.id === containerId);
+                          if (found) {
+                            targetComponent = found;
+                            parentSplitId = comp.id;
+                            parentSplitSide = side === "leftPanel" ? "left" : "right";
+                            parentTabsId = pc.id;
+                            parentTabId = tab.id;
+                            break;
+                          }
+                        }
+                        if (targetComponent) break;
+                      }
+                    }
+                    if (targetComponent) break;
+                  }
+                  if (targetComponent) break;
+                }
+              }
+            }
+
+            const compType = (targetComponent as any)?.componentType;
+            if (targetComponent && (compType === "split-panel-layout" || compType === "v2-split-panel-layout")) {
+              const currentConfig = (targetComponent as any).componentConfig || {};
+              const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+              const panelConfig = currentConfig[panelKey] || {};
+              const currentComponents = panelConfig.components || [];
+
+              const panelRect = splitPanelContainer.getBoundingClientRect();
+              const computedStyle = window.getComputedStyle(splitPanelContainer);
+              const padLeft = parseFloat(computedStyle.paddingLeft) || 0;
+              const padTop = parseFloat(computedStyle.paddingTop) || 0;
+              const dropX = (e.clientX - panelRect.left - padLeft) / zoomLevel;
+              const dropY = (e.clientY - panelRect.top - padTop) / zoomLevel;
+
+              const v2Mapping = createV2ConfigFromColumn({
+                widgetType: column.widgetType,
+                columnName: column.columnName,
+                columnLabel: column.columnLabel,
+                codeCategory: column.codeCategory,
+                inputType: column.inputType,
+                required: column.required,
+                detailSettings: column.detailSettings,
+                referenceTable: column.referenceTable,
+                referenceColumn: column.referenceColumn,
+                displayColumn: column.displayColumn,
+              });
+
+              const newPanelComponent = {
+                id: `panel_comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+                componentType: v2Mapping.componentType,
+                label: column.columnLabel || column.columnName,
+                position: { x: Math.max(0, dropX), y: Math.max(0, dropY) },
+                size: { width: 200, height: 36 },
+                inputType: column.inputType || column.widgetType,
+                widgetType: column.widgetType,
+                componentConfig: {
+                  ...v2Mapping.componentConfig,
+                  columnName: column.columnName,
+                  tableName: column.tableName,
+                  inputType: column.inputType || column.widgetType,
+                },
+              };
+
+              const updatedSplitPanel = {
+                ...targetComponent,
+                componentConfig: {
+                  ...currentConfig,
+                  [panelKey]: {
+                    ...panelConfig,
+                    displayMode: "custom",
+                    components: [...currentComponents, newPanelComponent],
+                  },
+                },
+              };
+
+              let newLayout;
+
+              if (parentSplitId && parentSplitSide && parentTabsId && parentTabId) {
+                // 분할패널 → 탭 → 분할패널 3중 중첩
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) => {
+                    if (c.id !== parentSplitId) return c;
+                    const sc = (c as any).componentConfig || {};
+                    const pk = parentSplitSide === "left" ? "leftPanel" : "rightPanel";
+                    return {
+                      ...c,
+                      componentConfig: {
+                        ...sc,
+                        [pk]: {
+                          ...sc[pk],
+                          components: (sc[pk]?.components || []).map((pc: any) => {
+                            if (pc.id !== parentTabsId) return pc;
+                            return {
+                              ...pc,
+                              componentConfig: {
+                                ...pc.componentConfig,
+                                tabs: (pc.componentConfig?.tabs || []).map((tab: any) => {
+                                  if (tab.id !== parentTabId) return tab;
+                                  return {
+                                    ...tab,
+                                    components: (tab.components || []).map((tc: any) =>
+                                      tc.id === containerId ? updatedSplitPanel : tc,
+                                    ),
+                                  };
+                                }),
+                              },
+                            };
+                          }),
+                        },
+                      },
+                    };
+                  }),
+                };
+              } else if (parentTabsId && parentTabId) {
+                // 탭 → 분할패널 2중 중첩
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) => {
+                    if (c.id !== parentTabsId) return c;
+                    // top-level은 overrides, nested는 componentConfig
+                    const configKey = (c as any).componentConfig ? "componentConfig" : "overrides";
+                    const tabsConfig = (c as any)[configKey] || {};
+                    return {
+                      ...c,
+                      [configKey]: {
+                        ...tabsConfig,
+                        tabs: (tabsConfig.tabs || []).map((tab: any) => {
+                          if (tab.id !== parentTabId) return tab;
+                          return {
+                            ...tab,
+                            components: (tab.components || []).map((tc: any) =>
+                              tc.id === containerId ? updatedSplitPanel : tc,
+                            ),
+                          };
+                        }),
+                      },
+                    };
+                  }),
+                };
+              } else {
+                // 최상위 분할패널
+                newLayout = {
+                  ...layout,
+                  components: layout.components.map((c) => (c.id === containerId ? updatedSplitPanel : c)),
+                };
+              }
+
+              toast.success("컬럼이 분할패널에 추가되었습니다");
+              setLayout(newLayout);
+              saveToHistory(newLayout);
+              return;
+            }
+          }
+        }
+
+        // 🎯 탭 컨테이너 내부에 컬럼 드롭 시 처리 (중첩 구조 지원)
+        if (tabsContainer && !splitPanelFirst && type === "column" && column) {
           const containerId = tabsContainer.getAttribute("data-component-id");
           const activeTabId = tabsContainer.getAttribute("data-active-tab-id");
           if (containerId && activeTabId) {
@@ -3648,9 +3988,8 @@ export default function ScreenDesigner({
           }
         }
 
-        // 🎯 분할 패널 커스텀 모드 컨테이너 내부에 컬럼 드롭 시 처리
-        const splitPanelContainer = dropTarget.closest('[data-split-panel-container="true"]');
-        if (splitPanelContainer && type === "column" && column) {
+        // 🎯 분할 패널 커스텀 모드 (탭 밖 최상위) 컬럼 드롭 처리
+        if (splitPanelContainer && !splitPanelFirst && type === "column" && column) {
           const containerId = splitPanelContainer.getAttribute("data-component-id");
           const panelSide = splitPanelContainer.getAttribute("data-panel-side"); // "left" or "right"
           if (containerId && panelSide) {
@@ -3662,12 +4001,11 @@ export default function ScreenDesigner({
               const panelConfig = currentConfig[panelKey] || {};
               const currentComponents = panelConfig.components || [];
 
-              // 드롭 위치 계산
               const panelRect = splitPanelContainer.getBoundingClientRect();
-              const dropX = (e.clientX - panelRect.left) / zoomLevel;
-              const dropY = (e.clientY - panelRect.top) / zoomLevel;
+              const cs2 = window.getComputedStyle(splitPanelContainer);
+              const dropX = (e.clientX - panelRect.left - (parseFloat(cs2.paddingLeft) || 0)) / zoomLevel;
+              const dropY = (e.clientY - panelRect.top - (parseFloat(cs2.paddingTop) || 0)) / zoomLevel;
 
-              // V2 컴포넌트 매핑 사용
               const v2Mapping = createV2ConfigFromColumn({
                 widgetType: column.widgetType,
                 columnName: column.columnName,
@@ -6415,15 +6753,6 @@ export default function ScreenDesigner({
                             const { splitPanelId, panelSide } = selectedPanelComponentInfo;
                             const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
 
-                            console.log("🔧 updatePanelComponentProperty 호출:", {
-                              componentId,
-                              path,
-                              value,
-                              splitPanelId,
-                              panelSide,
-                            });
-
-                            // 🆕 안전한 깊은 경로 업데이트 헬퍼 함수
                             const setNestedValue = (obj: any, pathStr: string, val: any): any => {
                               const result = JSON.parse(JSON.stringify(obj));
                               const parts = pathStr.split(".");
@@ -6440,9 +6769,27 @@ export default function ScreenDesigner({
                               return result;
                             };
 
+                            // 중첩 구조 포함 분할패널 찾기 헬퍼
+                            const findSplitPanelInLayout = (components: any[]): { found: any; path: "top" | "nested"; parentTabId?: string; parentTabTabId?: string } | null => {
+                              const direct = components.find((c) => c.id === splitPanelId);
+                              if (direct) return { found: direct, path: "top" };
+                              for (const comp of components) {
+                                const ct = (comp as any)?.componentType || (comp as any)?.overrides?.type;
+                                const cfg = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
+                                if (ct === "tabs-widget" || ct === "v2-tabs-widget") {
+                                  for (const tab of (cfg.tabs || [])) {
+                                    const nested = (tab.components || []).find((c: any) => c.id === splitPanelId);
+                                    if (nested) return { found: nested, path: "nested", parentTabId: comp.id, parentTabTabId: tab.id };
+                                  }
+                                }
+                              }
+                              return null;
+                            };
+
                             setLayout((prevLayout) => {
-                              const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
-                              if (!splitPanelComponent) return prevLayout;
+                              const result = findSplitPanelInLayout(prevLayout.components);
+                              if (!result) return prevLayout;
+                              const splitPanelComponent = result.found;
 
                               const currentConfig = (splitPanelComponent as any).componentConfig || {};
                               const panelConfig = currentConfig[panelKey] || {};
@@ -6478,17 +6825,37 @@ export default function ScreenDesigner({
                                 },
                               };
 
-                              // selectedPanelComponentInfo 업데이트
                               setSelectedPanelComponentInfo((prev) =>
                                 prev ? { ...prev, component: updatedComp } : null,
                               );
 
-                              return {
-                                ...prevLayout,
-                                components: prevLayout.components.map((c) =>
-                                  c.id === splitPanelId ? updatedComponent : c,
-                                ),
+                              // 중첩 구조 반영
+                              const applyUpdatedSplitPanel = (layout: any, updated: any, info: any) => {
+                                if (info.path === "top") {
+                                  return { ...layout, components: layout.components.map((c: any) => c.id === splitPanelId ? updated : c) };
+                                }
+                                return {
+                                  ...layout,
+                                  components: layout.components.map((c: any) => {
+                                    if (c.id !== info.parentTabId) return c;
+                                    const cfgKey = c.componentConfig?.tabs ? "componentConfig" : "overrides";
+                                    const cfg = c[cfgKey] || {};
+                                    return {
+                                      ...c,
+                                      [cfgKey]: {
+                                        ...cfg,
+                                        tabs: (cfg.tabs || []).map((t: any) =>
+                                          t.id === info.parentTabTabId
+                                            ? { ...t, components: (t.components || []).map((tc: any) => tc.id === splitPanelId ? updated : tc) }
+                                            : t,
+                                        ),
+                                      },
+                                    };
+                                  }),
+                                };
                               };
+
+                              return applyUpdatedSplitPanel(prevLayout, updatedComponent, result);
                             });
                           };
 
@@ -6498,8 +6865,23 @@ export default function ScreenDesigner({
                             const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
 
                             setLayout((prevLayout) => {
-                              const splitPanelComponent = prevLayout.components.find((c) => c.id === splitPanelId);
-                              if (!splitPanelComponent) return prevLayout;
+                              const findResult = (() => {
+                                const direct = prevLayout.components.find((c: any) => c.id === splitPanelId);
+                                if (direct) return { found: direct, path: "top" as const };
+                                for (const comp of prevLayout.components) {
+                                  const ct = (comp as any)?.componentType || (comp as any)?.overrides?.type;
+                                  const cfg = (comp as any)?.componentConfig || (comp as any)?.overrides || {};
+                                  if (ct === "tabs-widget" || ct === "v2-tabs-widget") {
+                                    for (const tab of (cfg.tabs || [])) {
+                                      const nested = (tab.components || []).find((c: any) => c.id === splitPanelId);
+                                      if (nested) return { found: nested, path: "nested" as const, parentTabId: comp.id, parentTabTabId: tab.id };
+                                    }
+                                  }
+                                }
+                                return null;
+                              })();
+                              if (!findResult) return prevLayout;
+                              const splitPanelComponent = findResult.found;
 
                               const currentConfig = (splitPanelComponent as any).componentConfig || {};
                               const panelConfig = currentConfig[panelKey] || {};
@@ -6520,11 +6902,27 @@ export default function ScreenDesigner({
 
                               setSelectedPanelComponentInfo(null);
 
+                              if (findResult.path === "top") {
+                                return { ...prevLayout, components: prevLayout.components.map((c: any) => c.id === splitPanelId ? updatedComponent : c) };
+                              }
                               return {
                                 ...prevLayout,
-                                components: prevLayout.components.map((c) =>
-                                  c.id === splitPanelId ? updatedComponent : c,
-                                ),
+                                components: prevLayout.components.map((c: any) => {
+                                  if (c.id !== findResult.parentTabId) return c;
+                                  const cfgKey = c.componentConfig?.tabs ? "componentConfig" : "overrides";
+                                  const cfg = c[cfgKey] || {};
+                                  return {
+                                    ...c,
+                                    [cfgKey]: {
+                                      ...cfg,
+                                      tabs: (cfg.tabs || []).map((t: any) =>
+                                        t.id === findResult.parentTabTabId
+                                          ? { ...t, components: (t.components || []).map((tc: any) => tc.id === splitPanelId ? updatedComponent : tc) }
+                                          : t,
+                                      ),
+                                    },
+                                  };
+                                }),
                               };
                             });
                           };
@@ -7128,6 +7526,7 @@ export default function ScreenDesigner({
                                 onSelectPanelComponent={(panelSide, compId, comp) =>
                                   handleSelectPanelComponent(component.id, panelSide, compId, comp)
                                 }
+                                onNestedPanelSelect={handleSelectPanelComponent}
                                 selectedPanelComponentId={
                                   selectedPanelComponentInfo?.splitPanelId === component.id
                                     ? selectedPanelComponentInfo.componentId
diff --git a/frontend/components/screen/config-panels/AlertConfigPanel.tsx b/frontend/components/screen/config-panels/AlertConfigPanel.tsx
index f842789e..8bae4f44 100644
--- a/frontend/components/screen/config-panels/AlertConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/AlertConfigPanel.tsx
@@ -1,70 +1,80 @@
 "use client";
 
 import React from "react";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-import { ComponentData } from "@/types/screen";
+import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
+import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
 
 interface AlertConfigPanelProps {
-  component: ComponentData;
-  onUpdateProperty: (path: string, value: any) => void;
+  config?: Record<string, any>;
+  onChange?: (key: string, value: any) => void;
+  component?: any;
+  onUpdateProperty?: (path: string, value: any) => void;
 }
 
-export const AlertConfigPanel: React.FC<AlertConfigPanelProps> = ({ component, onUpdateProperty }) => {
-  const config = component.componentConfig || {};
+const sections: ConfigSectionDefinition[] = [
+  {
+    id: "content",
+    title: "콘텐츠",
+    fields: [
+      {
+        key: "title",
+        label: "제목",
+        type: "text",
+        placeholder: "알림 제목을 입력하세요",
+      },
+      {
+        key: "message",
+        label: "메시지",
+        type: "textarea",
+        placeholder: "알림 메시지를 입력하세요",
+      },
+    ],
+  },
+  {
+    id: "style",
+    title: "스타일",
+    fields: [
+      {
+        key: "type",
+        label: "알림 타입",
+        type: "select",
+        options: [
+          { label: "정보 (Info)", value: "info" },
+          { label: "경고 (Warning)", value: "warning" },
+          { label: "성공 (Success)", value: "success" },
+          { label: "오류 (Error)", value: "error" },
+        ],
+      },
+      {
+        key: "showIcon",
+        label: "아이콘 표시",
+        type: "switch",
+      },
+    ],
+  },
+];
+
+export const AlertConfigPanel: React.FC<AlertConfigPanelProps> = ({
+  config: directConfig,
+  onChange: directOnChange,
+  component,
+  onUpdateProperty,
+}) => {
+  const config = directConfig || component?.componentConfig || {};
+
+  const handleChange = (key: string, value: any) => {
+    if (directOnChange) {
+      directOnChange(key, value);
+    } else if (onUpdateProperty) {
+      onUpdateProperty(`componentConfig.${key}`, value);
+    }
+  };
 
   return (
-    <div className="space-y-4">
-      <div>
-        <Label htmlFor="alert-title">제목</Label>
-        <Input
-          id="alert-title"
-          value={config.title || "알림 제목"}
-          onChange={(e) => onUpdateProperty("componentConfig.title", e.target.value)}
-          placeholder="알림 제목을 입력하세요"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="alert-message">메시지</Label>
-        <Textarea
-          id="alert-message"
-          value={config.message || "알림 메시지입니다."}
-          onChange={(e) => onUpdateProperty("componentConfig.message", e.target.value)}
-          placeholder="알림 메시지를 입력하세요"
-          rows={3}
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="alert-type">알림 타입</Label>
-        <Select
-          value={config.type || "info"}
-          onValueChange={(value) => onUpdateProperty("componentConfig.type", value)}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="알림 타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="info">정보 (Info)</SelectItem>
-            <SelectItem value="warning">경고 (Warning)</SelectItem>
-            <SelectItem value="success">성공 (Success)</SelectItem>
-            <SelectItem value="error">오류 (Error)</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="show-icon"
-          checked={config.showIcon ?? true}
-          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showIcon", checked)}
-        />
-        <Label htmlFor="show-icon">아이콘 표시</Label>
-      </div>
-    </div>
+    <ConfigPanelBuilder
+      config={config}
+      onChange={handleChange}
+      sections={sections}
+    />
   );
 };
diff --git a/frontend/components/screen/config-panels/BadgeConfigPanel.tsx b/frontend/components/screen/config-panels/BadgeConfigPanel.tsx
index 5713f388..0e8afc09 100644
--- a/frontend/components/screen/config-panels/BadgeConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/BadgeConfigPanel.tsx
@@ -1,65 +1,79 @@
 "use client";
 
 import React from "react";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { ComponentData } from "@/types/screen";
+import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
+import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
 
 interface BadgeConfigPanelProps {
-  component: ComponentData;
-  onUpdateProperty: (path: string, value: any) => void;
+  config?: Record<string, any>;
+  onChange?: (key: string, value: any) => void;
+  component?: any;
+  onUpdateProperty?: (path: string, value: any) => void;
 }
 
-export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({ component, onUpdateProperty }) => {
-  const config = component.componentConfig || {};
+const sections: ConfigSectionDefinition[] = [
+  {
+    id: "content",
+    title: "콘텐츠",
+    fields: [
+      {
+        key: "text",
+        label: "뱃지 텍스트",
+        type: "text",
+        placeholder: "뱃지 텍스트를 입력하세요",
+      },
+    ],
+  },
+  {
+    id: "style",
+    title: "스타일",
+    fields: [
+      {
+        key: "variant",
+        label: "뱃지 스타일",
+        type: "select",
+        options: [
+          { label: "기본 (Default)", value: "default" },
+          { label: "보조 (Secondary)", value: "secondary" },
+          { label: "위험 (Destructive)", value: "destructive" },
+          { label: "외곽선 (Outline)", value: "outline" },
+        ],
+      },
+      {
+        key: "size",
+        label: "뱃지 크기",
+        type: "select",
+        options: [
+          { label: "작음 (Small)", value: "small" },
+          { label: "기본 (Default)", value: "default" },
+          { label: "큼 (Large)", value: "large" },
+        ],
+      },
+    ],
+  },
+];
+
+export const BadgeConfigPanel: React.FC<BadgeConfigPanelProps> = ({
+  config: directConfig,
+  onChange: directOnChange,
+  component,
+  onUpdateProperty,
+}) => {
+  const config = directConfig || component?.componentConfig || {};
+
+  const handleChange = (key: string, value: any) => {
+    if (directOnChange) {
+      directOnChange(key, value);
+    } else if (onUpdateProperty) {
+      onUpdateProperty(`componentConfig.${key}`, value);
+    }
+  };
 
   return (
-    <div className="space-y-4">
-      <div>
-        <Label htmlFor="badge-text">뱃지 텍스트</Label>
-        <Input
-          id="badge-text"
-          value={config.text || "상태"}
-          onChange={(e) => onUpdateProperty("componentConfig.text", e.target.value)}
-          placeholder="뱃지 텍스트를 입력하세요"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="badge-variant">뱃지 스타일</Label>
-        <Select
-          value={config.variant || "default"}
-          onValueChange={(value) => onUpdateProperty("componentConfig.variant", value)}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="뱃지 스타일 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="default">기본 (Default)</SelectItem>
-            <SelectItem value="secondary">보조 (Secondary)</SelectItem>
-            <SelectItem value="destructive">위험 (Destructive)</SelectItem>
-            <SelectItem value="outline">외곽선 (Outline)</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div>
-        <Label htmlFor="badge-size">뱃지 크기</Label>
-        <Select
-          value={config.size || "default"}
-          onValueChange={(value) => onUpdateProperty("componentConfig.size", value)}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="뱃지 크기 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="small">작음 (Small)</SelectItem>
-            <SelectItem value="default">기본 (Default)</SelectItem>
-            <SelectItem value="large">큼 (Large)</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-    </div>
+    <ConfigPanelBuilder
+      config={config}
+      onChange={handleChange}
+      sections={sections}
+    />
   );
 };
diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
index 295371c0..b59d87e5 100644
--- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx
@@ -1,5473 +1,64 @@
 "use client";
 
-import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import {
-  Check,
-  ChevronsUpDown,
-  Search,
-  Plus,
-  X,
-  ChevronUp,
-  ChevronDown,
-  Type,
-  Database,
-  Info,
-  RotateCcw,
-} from "lucide-react";
-import { cn } from "@/lib/utils";
+import React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentData } from "@/types/screen";
-import { apiClient } from "@/lib/api/client";
-import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
-import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
-import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
-import { QuickInsertConfigSection } from "./QuickInsertConfigSection";
-import { getApprovalDefinitions, type ApprovalDefinition } from "@/lib/api/approval";
-import DOMPurify from "isomorphic-dompurify";
-import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
-import { icons as allLucideIcons } from "lucide-react";
-import {
-  actionIconMap,
-  noIconActions,
-  NO_ICON_MESSAGE,
-  iconSizePresets,
-  getLucideIcon,
-  addToIconMap,
-  getDefaultIconForAction,
-} from "@/lib/button-icon-map";
-
-// 🆕 제목 블록 타입
-interface TitleBlock {
-  id: string;
-  type: "text" | "field";
-  value: string; // text: 텍스트 내용, field: 컬럼명
-  tableName?: string; // field일 때 테이블명
-  label?: string; // field일 때 표시용 라벨
-}
+import { BasicTab } from "./button-config/BasicTab";
+import { ActionTab } from "./button-config/ActionTab";
+import { DataflowTab } from "./button-config/DataflowTab";
+import { AdvancedTab } from "./button-config/AdvancedTab";
 
 interface ButtonConfigPanelProps {
   component: ComponentData;
   onUpdateProperty: (path: string, value: any) => void;
-  allComponents?: ComponentData[]; // 🆕 플로우 위젯 감지용
-  currentTableName?: string; // 현재 화면의 테이블명 (자동 감지용)
-  currentScreenCompanyCode?: string; // 현재 편집 중인 화면의 회사 코드
-}
-
-interface ScreenOption {
-  id: number;
-  name: string;
-  description?: string;
+  allComponents?: ComponentData[];
+  currentTableName?: string;
+  currentScreenCompanyCode?: string;
 }
 
 export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   component,
   onUpdateProperty,
-  allComponents = [], // 🆕 기본값 빈 배열
-  currentTableName, // 현재 화면의 테이블명
-  currentScreenCompanyCode, // 현재 편집 중인 화면의 회사 코드
+  allComponents = [],
+  currentTableName,
+  currentScreenCompanyCode,
 }) => {
-  // 🔧 component가 없는 경우 방어 처리
   if (!component) {
     return <div className="text-muted-foreground p-4 text-sm">컴포넌트 정보를 불러올 수 없습니다.</div>;
   }
 
-  // 🔧 component에서 직접 읽기 (useMemo 제거)
-  const config = component.componentConfig || {};
-  const currentAction = component.componentConfig?.action || {};
-
-  // 로컬 상태 관리 (실시간 입력 반영)
-  const [localInputs, setLocalInputs] = useState({
-    text: config.text !== undefined ? config.text : "버튼",
-    actionType: String(config.action?.type || "save"),
-    modalTitle: String(config.action?.modalTitle || ""),
-    modalDescription: String(config.action?.modalDescription || ""),
-    editModalTitle: String(config.action?.editModalTitle || ""),
-    editModalDescription: String(config.action?.editModalDescription || ""),
-    targetUrl: String(config.action?.targetUrl || ""),
-    groupByColumn: String(config.action?.groupByColumns?.[0] || ""),
-  });
-
-  // 아이콘 설정 상태
-  const [displayMode, setDisplayMode] = useState<"text" | "icon" | "icon-text">(config.displayMode || "text");
-  const [selectedIcon, setSelectedIcon] = useState<string>(config.icon?.name || "");
-  const [selectedIconType, setSelectedIconType] = useState<"lucide" | "svg">(config.icon?.type || "lucide");
-  const [iconSize, setIconSize] = useState<string>(config.icon?.size || "보통");
-  const [iconColor, setIconColor] = useState<string>(config.icon?.color || "");
-  const [iconGap, setIconGap] = useState<number>(config.iconGap ?? 6);
-  const [iconTextPosition, setIconTextPosition] = useState<"right" | "left" | "bottom" | "top">(
-    config.iconTextPosition || "right",
-  );
-
-  // 커스텀 아이콘 UI 상태
-  const [lucideSearchOpen, setLucideSearchOpen] = useState(false);
-  const [lucideSearchTerm, setLucideSearchTerm] = useState("");
-  const [svgPasteOpen, setSvgPasteOpen] = useState(false);
-  const [svgInput, setSvgInput] = useState("");
-  const [svgName, setSvgName] = useState("");
-  const [svgError, setSvgError] = useState("");
-
-  const [screens, setScreens] = useState<ScreenOption[]>([]);
-  const [screensLoading, setScreensLoading] = useState(false);
-  const [modalScreenOpen, setModalScreenOpen] = useState(false);
-  const [navScreenOpen, setNavScreenOpen] = useState(false);
-  const [modalSearchTerm, setModalSearchTerm] = useState("");
-  const [navSearchTerm, setNavSearchTerm] = useState("");
-
-  // 테이블 컬럼 목록 상태
-  const [tableColumns, setTableColumns] = useState<string[]>([]);
-  const [columnsLoading, setColumnsLoading] = useState(false);
-  const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
-  const [displayColumnSearch, setDisplayColumnSearch] = useState("");
-
-  // 🆕 제목 블록 빌더 상태
-  const [titleBlocks, setTitleBlocks] = useState<TitleBlock[]>([]);
-  const [availableTables, setAvailableTables] = useState<Array<{ name: string; label: string }>>([]); // 시스템의 모든 테이블 목록
-  const [tableColumnsMap, setTableColumnsMap] = useState<Record<string, Array<{ name: string; label: string }>>>({});
-  const [blockTableSearches, setBlockTableSearches] = useState<Record<string, string>>({}); // 블록별 테이블 검색어
-  const [blockColumnSearches, setBlockColumnSearches] = useState<Record<string, string>>({}); // 블록별 컬럼 검색어
-  const [blockTablePopoverOpen, setBlockTablePopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 테이블 Popover 열림 상태
-  const [blockColumnPopoverOpen, setBlockColumnPopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 컬럼 Popover 열림 상태
-
-  // 🆕 데이터 전달 필드 매핑용 상태 (멀티 테이블 매핑 지원)
-  const [mappingSourceColumnsMap, setMappingSourceColumnsMap] = useState<
-    Record<string, Array<{ name: string; label: string }>>
-  >({});
-  const [mappingTargetColumns, setMappingTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [mappingSourcePopoverOpen, setMappingSourcePopoverOpen] = useState<Record<string, boolean>>({});
-  const [mappingTargetPopoverOpen, setMappingTargetPopoverOpen] = useState<Record<string, boolean>>({});
-  const [mappingSourceSearch, setMappingSourceSearch] = useState<Record<string, string>>({});
-  const [mappingTargetSearch, setMappingTargetSearch] = useState<Record<string, string>>({});
-  const [activeMappingGroupIndex, setActiveMappingGroupIndex] = useState(0);
-
-  // 🆕 openModalWithData 전용 필드 매핑 상태
-  const [modalSourceColumns, setModalSourceColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [modalTargetColumns, setModalTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [modalSourcePopoverOpen, setModalSourcePopoverOpen] = useState<Record<number, boolean>>({});
-  const [modalTargetPopoverOpen, setModalTargetPopoverOpen] = useState<Record<number, boolean>>({});
-
-  // 결재 유형 목록 상태
-  const [approvalDefinitions, setApprovalDefinitions] = useState<ApprovalDefinition[]>([]);
-  const [approvalDefinitionsLoading, setApprovalDefinitionsLoading] = useState(false);
-
-  // 🆕 그룹화 컬럼 선택용 상태
-  const [currentTableColumns, setCurrentTableColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [groupByColumnOpen, setGroupByColumnOpen] = useState(false);
-  const [groupByColumnSearch, setGroupByColumnSearch] = useState("");
-  const [modalSourceSearch, setModalSourceSearch] = useState<Record<number, string>>({});
-  const [modalTargetSearch, setModalTargetSearch] = useState<Record<number, string>>({});
-
-  // 🆕 modal 액션용 필드 매핑 상태
-  const [modalActionSourceTable, setModalActionSourceTable] = useState<string | null>(null);
-  const [modalActionTargetTable, setModalActionTargetTable] = useState<string | null>(null);
-  const [modalActionSourceColumns, setModalActionSourceColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [modalActionTargetColumns, setModalActionTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
-  const [modalActionFieldMappings, setModalActionFieldMappings] = useState<
-    Array<{ sourceField: string; targetField: string }>
-  >([]);
-  const [modalFieldMappingSourceOpen, setModalFieldMappingSourceOpen] = useState<Record<number, boolean>>({});
-  const [modalFieldMappingTargetOpen, setModalFieldMappingTargetOpen] = useState<Record<number, boolean>>({});
-  const [modalFieldMappingSourceSearch, setModalFieldMappingSourceSearch] = useState<Record<number, string>>({});
-  const [modalFieldMappingTargetSearch, setModalFieldMappingTargetSearch] = useState<Record<number, string>>({});
-
-  // 🎯 플로우 위젯이 화면에 있는지 확인
-  const hasFlowWidget = useMemo(() => {
-    const found = allComponents.some((comp: any) => {
-      // ScreenDesigner에서 저장하는 componentType 속성 확인!
-      const compType = comp.componentType || comp.widgetType || "";
-
-      // "flow-widget" 체크
-      const isFlow = compType === "flow-widget" || compType?.toLowerCase().includes("flow");
-      return isFlow;
-    });
-    return found;
-  }, [allComponents]);
-
-  // 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
-  useEffect(() => {
-    const latestConfig = component.componentConfig || {};
-    const latestAction = latestConfig.action || {};
-
-    setLocalInputs({
-      text: latestConfig.text !== undefined ? latestConfig.text : "버튼",
-      actionType: String(latestAction.type || "save"),
-      modalTitle: String(latestAction.modalTitle || ""),
-      modalDescription: String(latestAction.modalDescription || ""),
-      editModalTitle: String(latestAction.editModalTitle || ""),
-      editModalDescription: String(latestAction.editModalDescription || ""),
-      targetUrl: String(latestAction.targetUrl || ""),
-      groupByColumn: String(latestAction.groupByColumns?.[0] || ""),
-    });
-
-    // 🆕 제목 블록 초기화
-    if (latestAction.modalTitleBlocks && latestAction.modalTitleBlocks.length > 0) {
-      setTitleBlocks(latestAction.modalTitleBlocks);
-    } else {
-      // 기본값: 빈 배열
-      setTitleBlocks([]);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [component.id, component.componentConfig?.action?.type]);
-
-  // 🆕 제목 블록 핸들러
-  const addTextBlock = () => {
-    const newBlock: TitleBlock = {
-      id: `text-${Date.now()}`,
-      type: "text",
-      value: "",
-    };
-    const updatedBlocks = [...titleBlocks, newBlock];
-    setTitleBlocks(updatedBlocks);
-    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
-  };
-
-  const addFieldBlock = () => {
-    const newBlock: TitleBlock = {
-      id: `field-${Date.now()}`,
-      type: "field",
-      value: "",
-      tableName: "",
-      label: "",
-    };
-    const updatedBlocks = [...titleBlocks, newBlock];
-    setTitleBlocks(updatedBlocks);
-    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
-  };
-
-  const updateBlock = (id: string, updates: Partial<TitleBlock>) => {
-    const updatedBlocks = titleBlocks.map((block) => (block.id === id ? { ...block, ...updates } : block));
-    setTitleBlocks(updatedBlocks);
-    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
-  };
-
-  const removeBlock = (id: string) => {
-    const updatedBlocks = titleBlocks.filter((block) => block.id !== id);
-    setTitleBlocks(updatedBlocks);
-    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
-  };
-
-  const moveBlockUp = (id: string) => {
-    const index = titleBlocks.findIndex((b) => b.id === id);
-    if (index <= 0) return;
-    const newBlocks = [...titleBlocks];
-    [newBlocks[index - 1], newBlocks[index]] = [newBlocks[index], newBlocks[index - 1]];
-    setTitleBlocks(newBlocks);
-    onUpdateProperty("componentConfig.action.modalTitleBlocks", newBlocks);
-  };
-
-  const moveBlockDown = (id: string) => {
-    const index = titleBlocks.findIndex((b) => b.id === id);
-    if (index < 0 || index >= titleBlocks.length - 1) return;
-    const newBlocks = [...titleBlocks];
-    [newBlocks[index], newBlocks[index + 1]] = [newBlocks[index + 1], newBlocks[index]];
-    setTitleBlocks(newBlocks);
-    onUpdateProperty("componentConfig.action.modalTitleBlocks", newBlocks);
-  };
-
-  // 🆕 제목 미리보기 생성
-  const generateTitlePreview = (): string => {
-    if (titleBlocks.length === 0) return "(제목 없음)";
-    return titleBlocks
-      .map((block) => {
-        if (block.type === "text") {
-          return block.value || "(텍스트)";
-        } else {
-          return block.label || block.value || "(필드)";
-        }
-      })
-      .join("");
-  };
-
-  // 🆕 시스템의 모든 테이블 목록 로드
-  useEffect(() => {
-    const fetchAllTables = async () => {
-      try {
-        const response = await apiClient.get("/table-management/tables");
-
-        if (response.data.success && response.data.data) {
-          const tables = response.data.data.map((table: any) => ({
-            name: table.tableName,
-            label: table.displayName || table.tableName,
-          }));
-          setAvailableTables(tables);
-        }
-      } catch (error) {
-        console.error("테이블 목록 로드 실패:", error);
-      }
-    };
-
-    fetchAllTables();
-  }, []);
-
-  // 🆕 특정 테이블의 컬럼 로드
-  const loadTableColumns = async (tableName: string) => {
-    if (!tableName || tableColumnsMap[tableName]) return;
-
-    try {
-      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
-      console.log(`📥 테이블 ${tableName} 컬럼 응답:`, response.data);
-
-      if (response.data.success) {
-        // data가 배열인지 확인
-        let columnData = response.data.data;
-
-        // data.columns 형태일 수도 있음
-        if (!Array.isArray(columnData) && columnData?.columns) {
-          columnData = columnData.columns;
-        }
-
-        // data.data 형태일 수도 있음
-        if (!Array.isArray(columnData) && columnData?.data) {
-          columnData = columnData.data;
-        }
-
-        if (Array.isArray(columnData)) {
-          const columns = columnData.map((col: any) => {
-            const name = col.name || col.columnName;
-            const label = col.displayName || col.label || col.columnLabel || name;
-            console.log(`  - 컬럼: ${name} → "${label}"`);
-            return { name, label };
-          });
-          setTableColumnsMap((prev) => ({ ...prev, [tableName]: columns }));
-          console.log(`✅ 테이블 ${tableName} 컬럼 로드 성공:`, columns.length, "개");
-        } else {
-          console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
-        }
-      }
-    } catch (error) {
-      console.error("컬럼 로드 실패:", error);
-    }
-  };
-
-  // 멀티 테이블 매핑: 소스/타겟 테이블 컬럼 로드
-  const loadMappingColumns = useCallback(async (tableName: string): Promise<Array<{ name: string; label: string }>> => {
-    try {
-      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
-      if (response.data.success) {
-        let columnData = response.data.data;
-        if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
-        if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
-        if (Array.isArray(columnData)) {
-          return columnData.map((col: any) => ({
-            name: col.name || col.columnName,
-            label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
-          }));
-        }
-      }
-    } catch (error) {
-      console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
-    }
-    return [];
-  }, []);
-
-  useEffect(() => {
-    const multiTableMappings: Array<{ sourceTable: string }> = config.action?.dataTransfer?.multiTableMappings || [];
-    const legacySourceTable = config.action?.dataTransfer?.sourceTable;
-    const targetTable = config.action?.dataTransfer?.targetTable;
-
-    const loadAll = async () => {
-      const sourceTableNames = multiTableMappings.map((m) => m.sourceTable).filter(Boolean);
-      if (legacySourceTable && !sourceTableNames.includes(legacySourceTable)) {
-        sourceTableNames.push(legacySourceTable);
-      }
-
-      const newMap: Record<string, Array<{ name: string; label: string }>> = {};
-      for (const tbl of sourceTableNames) {
-        if (!mappingSourceColumnsMap[tbl]) {
-          newMap[tbl] = await loadMappingColumns(tbl);
-        }
-      }
-      if (Object.keys(newMap).length > 0) {
-        setMappingSourceColumnsMap((prev) => ({ ...prev, ...newMap }));
-      }
-
-      if (targetTable && mappingTargetColumns.length === 0) {
-        const cols = await loadMappingColumns(targetTable);
-        setMappingTargetColumns(cols);
-      }
-    };
-
-    loadAll();
-  }, [
-    config.action?.dataTransfer?.multiTableMappings,
-    config.action?.dataTransfer?.sourceTable,
-    config.action?.dataTransfer?.targetTable,
-    loadMappingColumns,
-  ]);
-
-  // 🆕 modal 액션: 대상 화면 테이블 조회 및 필드 매핑 로드
-  useEffect(() => {
-    const actionType = config.action?.type;
-    if (actionType !== "modal") return;
-
-    const autoDetect = config.action?.autoDetectDataSource;
-    if (!autoDetect) {
-      // 데이터 전달이 비활성화되면 상태 초기화
-      setModalActionSourceTable(null);
-      setModalActionTargetTable(null);
-      setModalActionSourceColumns([]);
-      setModalActionTargetColumns([]);
-      return;
-    }
-
-    const targetScreenId = config.action?.targetScreenId;
-    if (!targetScreenId) return;
-
-    const loadModalActionMappingData = async () => {
-      // 1. 소스 테이블 감지 (현재 화면)
-      let sourceTableName: string | null = currentTableName || null;
-
-      // allComponents에서 분할패널/테이블리스트/통합목록 감지
-      for (const comp of allComponents) {
-        const compType = comp.componentType || (comp as any).componentConfig?.type;
-        const compConfig = (comp as any).componentConfig || {};
-
-        if (compType === "split-panel-layout" || compType === "screen-split-panel") {
-          sourceTableName = compConfig.leftPanel?.tableName || compConfig.tableName || null;
-          if (sourceTableName) break;
-        }
-        if (compType === "table-list") {
-          sourceTableName = compConfig.tableName || compConfig.selectedTable || null;
-          if (sourceTableName) break;
-        }
-        if (compType === "v2-list") {
-          sourceTableName = compConfig.dataSource?.table || compConfig.tableName || null;
-          if (sourceTableName) break;
-        }
-      }
-
-      setModalActionSourceTable(sourceTableName);
-
-      // 2. 대상 화면의 테이블 조회
-      let targetTableName: string | null = null;
-      try {
-        const screenResponse = await apiClient.get(`/screen-management/screens/${targetScreenId}`);
-        if (screenResponse.data.success && screenResponse.data.data) {
-          targetTableName = screenResponse.data.data.tableName || null;
-        } else if (screenResponse.data?.tableName) {
-          // 직접 데이터 반환 형식인 경우
-          targetTableName = screenResponse.data.tableName || null;
-        }
-      } catch (error) {
-        console.error("대상 화면 정보 로드 실패:", error);
-      }
-
-      setModalActionTargetTable(targetTableName);
-
-      // 3. 소스 테이블 컬럼 로드
-      if (sourceTableName) {
-        try {
-          const response = await apiClient.get(`/table-management/tables/${sourceTableName}/columns`);
-          if (response.data.success) {
-            let columnData = response.data.data;
-            if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
-            if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
-            if (Array.isArray(columnData)) {
-              const columns = columnData.map((col: any) => ({
-                name: col.name || col.columnName,
-                label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
-              }));
-              setModalActionSourceColumns(columns);
-            }
-          }
-        } catch (error) {
-          console.error("소스 테이블 컬럼 로드 실패:", error);
-        }
-      }
-
-      // 4. 대상 테이블 컬럼 로드
-      if (targetTableName) {
-        try {
-          const response = await apiClient.get(`/table-management/tables/${targetTableName}/columns`);
-          if (response.data.success) {
-            let columnData = response.data.data;
-            if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
-            if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
-            if (Array.isArray(columnData)) {
-              const columns = columnData.map((col: any) => ({
-                name: col.name || col.columnName,
-                label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
-              }));
-              setModalActionTargetColumns(columns);
-            }
-          }
-        } catch (error) {
-          console.error("대상 테이블 컬럼 로드 실패:", error);
-        }
-      }
-
-      // 5. 기존 필드 매핑 로드 또는 자동 매핑 생성
-      const existingMappings = config.action?.fieldMappings || [];
-      if (existingMappings.length > 0) {
-        setModalActionFieldMappings(existingMappings);
-      } else if (sourceTableName && targetTableName && sourceTableName === targetTableName) {
-        // 테이블이 같으면 자동 매핑 (동일 컬럼명)
-        setModalActionFieldMappings([]); // 빈 배열 = 자동 매핑
-      }
-    };
-
-    loadModalActionMappingData();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    config.action?.type,
-    config.action?.autoDetectDataSource,
-    config.action?.targetScreenId,
-    currentTableName,
+  const tabProps = {
+    component,
+    onUpdateProperty,
     allComponents,
-  ]);
-
-  // 🆕 현재 테이블 컬럼 로드 (그룹화 컬럼 선택용)
-  useEffect(() => {
-    if (!currentTableName) return;
-
-    const loadCurrentTableColumns = async () => {
-      try {
-        const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
-        if (response.data.success) {
-          let columnData = response.data.data;
-          if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
-          if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
-          if (Array.isArray(columnData)) {
-            const columns = columnData.map((col: any) => ({
-              name: col.name || col.columnName,
-              label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
-            }));
-            setCurrentTableColumns(columns);
-          }
-        }
-      } catch (error) {
-        console.error("현재 테이블 컬럼 로드 실패:", error);
-      }
-    };
-
-    loadCurrentTableColumns();
-  }, [currentTableName]);
-
-  // 🆕 openModalWithData 소스/타겟 테이블 컬럼 로드
-  useEffect(() => {
-    const actionType = config.action?.type;
-    if (actionType !== "openModalWithData") return;
-
-    const loadModalMappingColumns = async () => {
-      // 소스 테이블: 현재 화면의 분할 패널 또는 테이블에서 감지
-      let sourceTableName: string | null = null;
-
-      console.log("[openModalWithData] 컬럼 로드 시작:", {
-        allComponentsCount: allComponents.length,
-        currentTableName,
-        targetScreenId: config.action?.targetScreenId,
-      });
-
-      // 모든 컴포넌트 타입 로그
-      allComponents.forEach((comp, idx) => {
-        const compType = comp.componentType || (comp as any).componentConfig?.type;
-        console.log(
-          `  [${idx}] componentType: ${compType}, tableName: ${(comp as any).componentConfig?.tableName || (comp as any).componentConfig?.leftPanel?.tableName || "N/A"}`,
-        );
-      });
-
-      for (const comp of allComponents) {
-        const compType = comp.componentType || (comp as any).componentConfig?.type;
-        const compConfig = (comp as any).componentConfig || {};
-
-        // 분할 패널 타입들 (다양한 경로에서 테이블명 추출)
-        if (compType === "split-panel-layout" || compType === "screen-split-panel") {
-          sourceTableName = compConfig?.leftPanel?.tableName || compConfig?.leftTableName || compConfig?.tableName;
-          if (sourceTableName) {
-            console.log(`✅ [openModalWithData] split-panel-layout에서 소스 테이블 감지: ${sourceTableName}`);
-            break;
-          }
-        }
-
-        // split-panel-layout2 타입 (새로운 분할 패널)
-        if (compType === "split-panel-layout2") {
-          sourceTableName = compConfig?.leftPanel?.tableName || compConfig?.tableName || compConfig?.leftTableName;
-          if (sourceTableName) {
-            console.log(`✅ [openModalWithData] split-panel-layout2에서 소스 테이블 감지: ${sourceTableName}`);
-            break;
-          }
-        }
-
-        // 테이블 리스트 타입
-        if (compType === "table-list") {
-          sourceTableName = compConfig?.tableName;
-          if (sourceTableName) {
-            console.log(`✅ [openModalWithData] table-list에서 소스 테이블 감지: ${sourceTableName}`);
-            break;
-          }
-        }
-
-        // 🆕 모든 컴포넌트에서 tableName 찾기 (폴백)
-        if (!sourceTableName && compConfig?.tableName) {
-          sourceTableName = compConfig.tableName;
-          console.log(`✅ [openModalWithData] ${compType}에서 소스 테이블 감지 (폴백): ${sourceTableName}`);
-          break;
-        }
-      }
-
-      // 여전히 없으면 currentTableName 사용 (화면 레벨 테이블명)
-      if (!sourceTableName && currentTableName) {
-        sourceTableName = currentTableName;
-        console.log(`✅ [openModalWithData] currentTableName에서 소스 테이블 사용: ${sourceTableName}`);
-      }
-
-      if (!sourceTableName) {
-        console.warn("[openModalWithData] 소스 테이블을 찾을 수 없습니다.");
-      }
-
-      // 소스 테이블 컬럼 로드
-      if (sourceTableName) {
-        try {
-          const response = await apiClient.get(`/table-management/tables/${sourceTableName}/columns`);
-          if (response.data.success) {
-            let columnData = response.data.data;
-            if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
-            if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
-            if (Array.isArray(columnData)) {
-              const columns = columnData.map((col: any) => ({
-                name: col.name || col.columnName || col.column_name,
-                label:
-                  col.displayName ||
-                  col.label ||
-                  col.columnLabel ||
-                  col.display_name ||
-                  col.name ||
-                  col.columnName ||
-                  col.column_name,
-              }));
-              setModalSourceColumns(columns);
-              console.log(`✅ [openModalWithData] 소스 테이블(${sourceTableName}) 컬럼 로드 완료:`, columns.length);
-            }
-          }
-        } catch (error) {
-          console.error("소스 테이블 컬럼 로드 실패:", error);
-        }
-      }
-
-      // 타겟 화면의 테이블 컬럼 로드
-      const targetScreenId = config.action?.targetScreenId;
-      if (targetScreenId) {
-        try {
-          // 타겟 화면 정보 가져오기
-          const screenResponse = await apiClient.get(`/screen-management/screens/${targetScreenId}`);
-          console.log("[openModalWithData] 타겟 화면 응답:", screenResponse.data);
-
-          if (screenResponse.data.success && screenResponse.data.data) {
-            const targetTableName = screenResponse.data.data.tableName;
-            console.log("[openModalWithData] 타겟 화면 테이블명:", targetTableName);
-
-            if (targetTableName) {
-              const columnResponse = await apiClient.get(`/table-management/tables/${targetTableName}/columns`);
-              if (columnResponse.data.success) {
-                let columnData = columnResponse.data.data;
-                if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
-                if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
-
-                if (Array.isArray(columnData)) {
-                  const columns = columnData.map((col: any) => ({
-                    name: col.name || col.columnName || col.column_name,
-                    label:
-                      col.displayName ||
-                      col.label ||
-                      col.columnLabel ||
-                      col.display_name ||
-                      col.name ||
-                      col.columnName ||
-                      col.column_name,
-                  }));
-                  setModalTargetColumns(columns);
-                  console.log(`✅ [openModalWithData] 타겟 테이블(${targetTableName}) 컬럼 로드 완료:`, columns.length);
-                }
-              }
-            } else {
-              console.warn("[openModalWithData] 타겟 화면에 테이블명이 없습니다.");
-            }
-          }
-        } catch (error) {
-          console.error("타겟 화면 테이블 컬럼 로드 실패:", error);
-        }
-      } else {
-        console.warn("[openModalWithData] 타겟 화면 ID가 없습니다.");
-      }
-    };
-
-    loadModalMappingColumns();
-  }, [config.action?.type, config.action?.targetScreenId, allComponents, currentTableName]);
-
-  // 화면 목록 가져오기 (현재 편집 중인 화면의 회사 코드 기준)
-  useEffect(() => {
-    const fetchScreens = async () => {
-      try {
-        setScreensLoading(true);
-        // 현재 편집 중인 화면의 회사 코드 기준으로 화면 목록 조회
-        const params: any = {
-          page: 1,
-          size: 9999, // 매우 큰 값으로 설정하여 전체 목록 가져오기
-        };
-
-        // 현재 화면의 회사 코드가 있으면 필터링 파라미터로 전달
-        if (currentScreenCompanyCode) {
-          params.companyCode = currentScreenCompanyCode;
-        }
-
-        const response = await apiClient.get("/screen-management/screens", {
-          params,
-        });
-
-        if (response.data.success && Array.isArray(response.data.data)) {
-          const screenList = response.data.data.map((screen: any) => ({
-            id: screen.screenId,
-            name: screen.screenName,
-            description: screen.description,
-          }));
-          setScreens(screenList);
-        }
-      } catch (error) {
-        // console.error("❌ 화면 목록 로딩 실패:", error);
-      } finally {
-        setScreensLoading(false);
-      }
-    };
-
-    fetchScreens();
-  }, [currentScreenCompanyCode]);
-
-  // 결재 유형 목록 가져오기 (approval 액션일 때)
-  useEffect(() => {
-    if (localInputs.actionType !== "approval") return;
-    const fetchApprovalDefinitions = async () => {
-      setApprovalDefinitionsLoading(true);
-      try {
-        const res = await getApprovalDefinitions({ is_active: "Y" });
-        if (res.success && res.data) {
-          setApprovalDefinitions(res.data);
-        }
-      } catch {
-        // 조용히 실패
-      } finally {
-        setApprovalDefinitionsLoading(false);
-      }
-    };
-    fetchApprovalDefinitions();
-  }, [localInputs.actionType]);
-
-  // 테이블 컬럼 목록 가져오기 (테이블 이력 보기 액션일 때)
-  useEffect(() => {
-    const fetchTableColumns = async () => {
-      // 테이블 이력 보기 액션이 아니면 스킵
-      if (config.action?.type !== "view_table_history") {
-        return;
-      }
-
-      // 1. 수동 입력된 테이블명 우선
-      // 2. 없으면 현재 화면의 테이블명 사용
-      const tableName = config.action?.historyTableName || currentTableName;
-
-      // 테이블명이 없으면 스킵
-      if (!tableName) {
-        return;
-      }
-
-      try {
-        setColumnsLoading(true);
-        const response = await apiClient.get(`/table-management/tables/${tableName}/columns`, {
-          params: {
-            page: 1,
-            size: 9999, // 전체 컬럼 가져오기
-          },
-        });
-
-        // API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
-        const columnData = response.data.data?.columns;
-
-        if (!columnData || !Array.isArray(columnData)) {
-          console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
-          setTableColumns([]);
-          return;
-        }
-
-        if (response.data.success) {
-          // ID 컬럼과 날짜 관련 컬럼 제외
-          const filteredColumns = columnData
-            .filter((col: any) => {
-              const colName = col.columnName.toLowerCase();
-              const dataType = col.dataType?.toLowerCase() || "";
-
-              // ID 컬럼 제외 (id, _id로 끝나는 컬럼)
-              if (colName === "id" || colName.endsWith("_id")) {
-                return false;
-              }
-
-              // 날짜/시간 타입 제외 (데이터 타입 기준)
-              if (dataType.includes("date") || dataType.includes("time") || dataType.includes("timestamp")) {
-                return false;
-              }
-
-              // 날짜/시간 관련 컬럼명 제외 (컬럼명에 date, time, at 포함)
-              if (
-                colName.includes("date") ||
-                colName.includes("time") ||
-                colName.endsWith("_at") ||
-                colName.startsWith("created") ||
-                colName.startsWith("updated")
-              ) {
-                return false;
-              }
-
-              return true;
-            })
-            .map((col: any) => col.columnName);
-
-          setTableColumns(filteredColumns);
-        }
-      } catch (error) {
-        console.error("❌ 테이블 컬럼 로딩 실패:", error);
-      } finally {
-        setColumnsLoading(false);
-      }
-    };
-
-    fetchTableColumns();
-  }, [config.action?.type, config.action?.historyTableName, currentTableName]);
-
-  // 검색 필터링 함수
-  const filterScreens = (searchTerm: string) => {
-    if (!searchTerm.trim()) return screens;
-    return screens.filter(
-      (screen) =>
-        screen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        (screen.description && screen.description.toLowerCase().includes(searchTerm.toLowerCase())),
-    );
+    currentTableName,
+    currentScreenCompanyCode,
   };
 
-  // 아이콘 선택 핸들러
-  const handleSelectIcon = (iconName: string, iconType: "lucide" | "svg" = "lucide") => {
-    setSelectedIcon(iconName);
-    setSelectedIconType(iconType);
-    onUpdateProperty("componentConfig.icon", {
-      name: iconName,
-      type: iconType,
-      size: iconSize,
-      ...(iconColor ? { color: iconColor } : {}),
-    });
-  };
-
-  // 선택 중인 아이콘이 삭제되었을 때 디폴트 아이콘으로 복귀
-  const revertToDefaultIcon = () => {
-    const def = getDefaultIconForAction(localInputs.actionType);
-    setSelectedIcon(def.name);
-    setSelectedIconType(def.type);
-    handleSelectIcon(def.name, def.type);
-  };
-
-  // 표시 모드 변경 핸들러 — icon/icon-text 전환 시 아이콘 미선택이면 디폴트 부여
-  const handleDisplayModeChange = (mode: "text" | "icon" | "icon-text") => {
-    setDisplayMode(mode);
-    onUpdateProperty("componentConfig.displayMode", mode);
-
-    if ((mode === "icon" || mode === "icon-text") && !selectedIcon) {
-      revertToDefaultIcon();
-    }
-  };
-
-  // 아이콘 크기 프리셋 변경 (아이콘 미선택 시 로컬만 업데이트)
-  const handleIconSizePreset = (preset: string) => {
-    setIconSize(preset);
-    if (selectedIcon) {
-      onUpdateProperty("componentConfig.icon.size", preset);
-    }
-  };
-
-  // 아이콘 색상 변경
-  const handleIconColorChange = (color: string | undefined) => {
-    const val = color || "";
-    setIconColor(val);
-    if (selectedIcon) {
-      if (val) {
-        onUpdateProperty("componentConfig.icon.color", val);
-      } else {
-        onUpdateProperty("componentConfig.icon.color", undefined);
-      }
-    }
-  };
-
-  // 현재 액션의 추천 아이콘 목록
-  const currentActionIcons = actionIconMap[localInputs.actionType] || [];
-  const isNoIconAction = noIconActions.has(localInputs.actionType);
-  const customIcons: string[] = config.customIcons || [];
-  const customSvgIcons: Array<{ name: string; svg: string }> = config.customSvgIcons || [];
-  const showIconSettings = displayMode === "icon" || displayMode === "icon-text";
-
   return (
-    <div className="space-y-4">
-      {/* 표시 모드 선택 */}
-      <div>
-        <Label className="mb-1.5 block text-xs sm:text-sm">표시 모드</Label>
-        <div className="flex rounded-md border">
-          {(
-            [
-              { value: "text", label: "텍스트" },
-              { value: "icon", label: "아이콘" },
-              { value: "icon-text", label: "아이콘+텍스트" },
-            ] as const
-          ).map((opt) => (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => handleDisplayModeChange(opt.value)}
-              className={cn(
-                "flex-1 px-2 py-1.5 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
-                displayMode === opt.value
-                  ? "bg-primary text-primary-foreground"
-                  : "hover:bg-muted text-muted-foreground",
-              )}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* 아이콘 모드 레이아웃 안내 */}
-      {displayMode === "icon" && (
-        <div className="flex items-start gap-2 rounded-md bg-blue-50 p-2.5 text-xs text-blue-700 dark:bg-blue-950/20 dark:text-blue-300">
-          <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-          <span>아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게 만들면 더 깔끔합니다.</span>
-        </div>
-      )}
-
-      {/* 버튼 텍스트 (텍스트 / 아이콘+텍스트 모드에서 표시) */}
-      {(displayMode === "text" || displayMode === "icon-text") && (
-        <div>
-          <Label htmlFor="button-text">버튼 텍스트</Label>
-          <Input
-            id="button-text"
-            value={localInputs.text}
-            onChange={(e) => {
-              const newValue = e.target.value;
-              setLocalInputs((prev) => ({ ...prev, text: newValue }));
-              onUpdateProperty("componentConfig.text", newValue);
-            }}
-            placeholder="버튼 텍스트를 입력하세요"
-          />
-        </div>
-      )}
-
-      <div>
-        <Label htmlFor="button-action" className="mb-1.5 block">
-          버튼 액션
-        </Label>
-        <Select
-          key={`action-${component.id}`}
-          value={localInputs.actionType}
-          onValueChange={(value) => {
-            setLocalInputs((prev) => ({ ...prev, actionType: value }));
-            onUpdateProperty("componentConfig.action.type", value);
-
-            // 액션 변경 시: 선택된 아이콘이 새 액션의 추천 목록에 없으면 초기화
-            const newActionIcons = actionIconMap[value] || [];
-            if (
-              selectedIcon &&
-              selectedIconType === "lucide" &&
-              !newActionIcons.includes(selectedIcon) &&
-              !customIcons.includes(selectedIcon)
-            ) {
-              setSelectedIcon("");
-              onUpdateProperty("componentConfig.icon", undefined);
-            }
-
-            setTimeout(() => {
-              const newColor = value === "delete" ? "#ef4444" : "#212121";
-              onUpdateProperty("style.labelColor", newColor);
-            }, 100);
-          }}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="버튼 액션 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            {/* 핵심 액션 */}
-            <SelectItem value="save">저장</SelectItem>
-            <SelectItem value="delete">삭제</SelectItem>
-            <SelectItem value="edit">편집</SelectItem>
-            <SelectItem value="navigate">페이지 이동</SelectItem>
-            <SelectItem value="modal">모달 열기</SelectItem>
-            <SelectItem value="transferData">데이터 전달</SelectItem>
-
-            {/* 엑셀 관련 */}
-            <SelectItem value="excel_download">엑셀 다운로드</SelectItem>
-            <SelectItem value="excel_upload">엑셀 업로드</SelectItem>
-            <SelectItem value="multi_table_excel_upload">다중 테이블 엑셀 업로드</SelectItem>
-
-            {/* 고급 기능 */}
-            <SelectItem value="quickInsert">즉시 저장</SelectItem>
-            <SelectItem value="control">제어 흐름</SelectItem>
-            <SelectItem value="approval">결재 요청</SelectItem>
-
-            {/* 특수 기능 (필요 시 사용) */}
-            <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
-            <SelectItem value="operation_control">운행알림 및 종료</SelectItem>
-
-            {/* 이벤트 버스 */}
-            <SelectItem value="event">이벤트 발송</SelectItem>
-
-            {/* 복사 */}
-            <SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
-
-            {/* 🔒 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김 */}
-            {/*
-            <SelectItem value="view_table_history">테이블 이력 보기</SelectItem>
-            <SelectItem value="openRelatedModal">연관 데이터 버튼 모달 열기</SelectItem>
-            <SelectItem value="openModalWithData">(deprecated) 데이터 전달 + 모달 열기</SelectItem>
-            <SelectItem value="code_merge">코드 병합</SelectItem>
-            <SelectItem value="empty_vehicle">공차등록</SelectItem>
-            */}
-          </SelectContent>
-        </Select>
-      </div>
-
-      {/* ────────────────── 아이콘 설정 영역 ────────────────── */}
-      {showIconSettings && (
-        <div className="space-y-4">
-          {/* 추천 아이콘 / 안내 문구 */}
-          {isNoIconAction ? (
-            <div>
-              <div className="text-muted-foreground rounded-md border border-dashed p-3 text-center text-xs">
-                {NO_ICON_MESSAGE}
-              </div>
-
-              {/* 커스텀 아이콘이 있으면 표시 */}
-              {(customIcons.length > 0 || customSvgIcons.length > 0) && (
-                <>
-                  <div className="my-2 flex items-center gap-2">
-                    <div className="bg-border h-px flex-1" />
-                    <span className="text-muted-foreground text-[10px]">커스텀 아이콘</span>
-                    <div className="bg-border h-px flex-1" />
-                  </div>
-                  <div className="grid grid-cols-4 gap-1.5">
-                    {customIcons.map((iconName) => {
-                      const Icon = getLucideIcon(iconName);
-                      if (!Icon) return null;
-                      return (
-                        <div key={`custom-${iconName}`} className="relative">
-                          <button
-                            type="button"
-                            onClick={() => handleSelectIcon(iconName, "lucide")}
-                            className={cn(
-                              "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
-                              selectedIcon === iconName && selectedIconType === "lucide"
-                                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
-                                : "border-transparent",
-                            )}
-                          >
-                            <Icon className="h-6 w-6" />
-                            <span className="text-muted-foreground truncate text-[10px]">{iconName}</span>
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const next = customIcons.filter((n) => n !== iconName);
-                              onUpdateProperty("componentConfig.customIcons", next);
-                              if (selectedIcon === iconName) revertToDefaultIcon();
-                            }}
-                            className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
-                          >
-                            <X className="h-3 w-3" />
-                          </button>
-                        </div>
-                      );
-                    })}
-                    {customSvgIcons.map((svgIcon) => (
-                      <div key={`svg-${svgIcon.name}`} className="relative">
-                        <button
-                          type="button"
-                          onClick={() => handleSelectIcon(svgIcon.name, "svg")}
-                          className={cn(
-                            "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
-                            selectedIcon === svgIcon.name && selectedIconType === "svg"
-                              ? "border-primary ring-primary/30 bg-primary/5 ring-2"
-                              : "border-transparent",
-                          )}
-                        >
-                          <span
-                            className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
-                            dangerouslySetInnerHTML={{
-                              __html: DOMPurify.sanitize(svgIcon.svg, { USE_PROFILES: { svg: true } }),
-                            }}
-                          />
-                          <span className="text-muted-foreground truncate text-[10px]">{svgIcon.name}</span>
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const next = customSvgIcons.filter((s) => s.name !== svgIcon.name);
-                            onUpdateProperty("componentConfig.customSvgIcons", next);
-                            if (selectedIcon === svgIcon.name) revertToDefaultIcon();
-                          }}
-                          className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-
-              {/* 커스텀 아이콘 추가 버튼 */}
-              <div className="mt-2 flex gap-2">
-                <Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
-                      <Plus className="mr-1 h-3 w-3" />
-                      lucide 검색
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-64 p-0" align="start">
-                    <Command>
-                      <CommandInput
-                        placeholder="아이콘 이름 검색..."
-                        value={lucideSearchTerm}
-                        onValueChange={setLucideSearchTerm}
-                        className="text-xs"
-                      />
-                      <CommandList className="max-h-48">
-                        <CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
-                        <CommandGroup>
-                          {Object.keys(allLucideIcons)
-                            .filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
-                            .slice(0, 30)
-                            .map((iconName) => {
-                              const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
-                              return (
-                                <CommandItem
-                                  key={iconName}
-                                  value={iconName}
-                                  onSelect={() => {
-                                    const next = [...customIcons];
-                                    if (!next.includes(iconName)) {
-                                      next.push(iconName);
-                                      onUpdateProperty("componentConfig.customIcons", next);
-                                      if (Icon) addToIconMap(iconName, Icon);
-                                    }
-                                    setLucideSearchOpen(false);
-                                    setLucideSearchTerm("");
-                                  }}
-                                  className="flex items-center gap-2 text-xs"
-                                >
-                                  {Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
-                                  {iconName}
-                                  {customIcons.includes(iconName) && <Check className="text-primary ml-auto h-3 w-3" />}
-                                </CommandItem>
-                              );
-                            })}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-
-                <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
-                      <Plus className="mr-1 h-3 w-3" />
-                      SVG 붙여넣기
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-72 space-y-2 p-3" align="start">
-                    <Label className="text-xs">아이콘 이름</Label>
-                    <Input
-                      value={svgName}
-                      onChange={(e) => setSvgName(e.target.value)}
-                      placeholder="예: 회사로고"
-                      className="h-7 text-xs"
-                    />
-                    <Label className="text-xs">SVG 코드</Label>
-                    <textarea
-                      value={svgInput}
-                      onChange={(e) => {
-                        setSvgInput(e.target.value);
-                        setSvgError("");
-                      }}
-                      onPaste={(e) => {
-                        e.stopPropagation();
-                        const text = e.clipboardData.getData("text/plain");
-                        if (text) {
-                          e.preventDefault();
-                          setSvgInput(text);
-                          setSvgError("");
-                        }
-                      }}
-                      onKeyDown={(e) => e.stopPropagation()}
-                      placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
-                      className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
-                    />
-                    {svgInput && (
-                      <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
-                        <span
-                          className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
-                          dangerouslySetInnerHTML={{
-                            __html: DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } }),
-                          }}
-                        />
-                      </div>
-                    )}
-                    {svgError && <p className="text-destructive text-xs">{svgError}</p>}
-                    <Button
-                      size="sm"
-                      className="h-7 w-full text-xs"
-                      onClick={() => {
-                        if (!svgName.trim()) {
-                          setSvgError("아이콘 이름을 입력하세요.");
-                          return;
-                        }
-                        if (!svgInput.trim().includes("<svg")) {
-                          setSvgError("유효한 SVG 코드가 아닙니다.");
-                          return;
-                        }
-                        const sanitized = DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } });
-                        let finalName = svgName.trim();
-                        const existingNames = new Set(customSvgIcons.map((s) => s.name));
-                        if (existingNames.has(finalName)) {
-                          let counter = 2;
-                          while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
-                          finalName = `${svgName.trim()}(${counter})`;
-                        }
-                        const next = [...customSvgIcons, { name: finalName, svg: sanitized }];
-                        onUpdateProperty("componentConfig.customSvgIcons", next);
-                        setSvgInput("");
-                        setSvgName("");
-                        setSvgError("");
-                        setSvgPasteOpen(false);
-                      }}
-                    >
-                      추가
-                    </Button>
-                  </PopoverContent>
-                </Popover>
-              </div>
-            </div>
-          ) : (
-            <div>
-              <Label className="mb-1.5 block text-xs sm:text-sm">아이콘 선택</Label>
-              <div className="grid grid-cols-4 gap-1.5">
-                {currentActionIcons.map((iconName) => {
-                  const Icon = getLucideIcon(iconName);
-                  if (!Icon) return null;
-                  return (
-                    <button
-                      key={iconName}
-                      type="button"
-                      onClick={() => handleSelectIcon(iconName, "lucide")}
-                      className={cn(
-                        "hover:bg-muted flex flex-col items-center gap-1 rounded-md border p-2 transition-colors",
-                        selectedIcon === iconName && selectedIconType === "lucide"
-                          ? "border-primary ring-primary/30 bg-primary/5 ring-2"
-                          : "border-transparent",
-                      )}
-                    >
-                      <Icon className="h-6 w-6" />
-                      <span className="text-muted-foreground truncate text-[10px]">{iconName}</span>
-                    </button>
-                  );
-                })}
-              </div>
-
-              {/* 커스텀 아이콘 영역 */}
-              {(customIcons.length > 0 || customSvgIcons.length > 0) && (
-                <>
-                  <div className="my-2 flex items-center gap-2">
-                    <div className="bg-border h-px flex-1" />
-                    <span className="text-muted-foreground text-[10px]">커스텀 아이콘</span>
-                    <div className="bg-border h-px flex-1" />
-                  </div>
-                  <div className="grid grid-cols-4 gap-1.5">
-                    {customIcons.map((iconName) => {
-                      const Icon = getLucideIcon(iconName);
-                      if (!Icon) return null;
-                      return (
-                        <div key={`custom-${iconName}`} className="relative">
-                          <button
-                            type="button"
-                            onClick={() => handleSelectIcon(iconName, "lucide")}
-                            className={cn(
-                              "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
-                              selectedIcon === iconName && selectedIconType === "lucide"
-                                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
-                                : "border-transparent",
-                            )}
-                          >
-                            <Icon className="h-6 w-6" />
-                            <span className="text-muted-foreground truncate text-[10px]">{iconName}</span>
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const next = customIcons.filter((n) => n !== iconName);
-                              onUpdateProperty("componentConfig.customIcons", next);
-                              if (selectedIcon === iconName) revertToDefaultIcon();
-                            }}
-                            className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
-                          >
-                            <X className="h-3 w-3" />
-                          </button>
-                        </div>
-                      );
-                    })}
-                    {customSvgIcons.map((svgIcon) => (
-                      <div key={`svg-${svgIcon.name}`} className="relative">
-                        <button
-                          type="button"
-                          onClick={() => handleSelectIcon(svgIcon.name, "svg")}
-                          className={cn(
-                            "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
-                            selectedIcon === svgIcon.name && selectedIconType === "svg"
-                              ? "border-primary ring-primary/30 bg-primary/5 ring-2"
-                              : "border-transparent",
-                          )}
-                        >
-                          <span
-                            className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
-                            dangerouslySetInnerHTML={{ __html: svgIcon.svg }}
-                          />
-                          <span className="text-muted-foreground truncate text-[10px]">{svgIcon.name}</span>
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => {
-                            const next = customSvgIcons.filter((s) => s.name !== svgIcon.name);
-                            onUpdateProperty("componentConfig.customSvgIcons", next);
-                            if (selectedIcon === svgIcon.name) revertToDefaultIcon();
-                          }}
-                          className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
-                        >
-                          <X className="h-3 w-3" />
-                        </button>
-                      </div>
-                    ))}
-                  </div>
-                </>
-              )}
-
-              {/* 커스텀 아이콘 추가 버튼 */}
-              <div className="mt-2 flex gap-2">
-                <Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
-                      <Plus className="mr-1 h-3 w-3" />
-                      lucide 검색
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-64 p-0" align="start">
-                    <Command>
-                      <CommandInput
-                        placeholder="아이콘 이름 검색..."
-                        value={lucideSearchTerm}
-                        onValueChange={setLucideSearchTerm}
-                        className="text-xs"
-                      />
-                      <CommandList className="max-h-48">
-                        <CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
-                        <CommandGroup>
-                          {Object.keys(allLucideIcons)
-                            .filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
-                            .slice(0, 30)
-                            .map((iconName) => {
-                              const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
-                              return (
-                                <CommandItem
-                                  key={iconName}
-                                  value={iconName}
-                                  onSelect={() => {
-                                    const next = [...customIcons];
-                                    if (!next.includes(iconName)) {
-                                      next.push(iconName);
-                                      onUpdateProperty("componentConfig.customIcons", next);
-                                      // iconMap에 동적 추가 (렌더링용)
-                                      if (Icon) addToIconMap(iconName, Icon);
-                                    }
-                                    setLucideSearchOpen(false);
-                                    setLucideSearchTerm("");
-                                  }}
-                                  className="flex items-center gap-2 text-xs"
-                                >
-                                  {Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
-                                  {iconName}
-                                  {customIcons.includes(iconName) && <Check className="text-primary ml-auto h-3 w-3" />}
-                                </CommandItem>
-                              );
-                            })}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-
-                <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
-                      <Plus className="mr-1 h-3 w-3" />
-                      SVG 붙여넣기
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-72 space-y-2 p-3" align="start">
-                    <Label className="text-xs">아이콘 이름</Label>
-                    <Input
-                      value={svgName}
-                      onChange={(e) => setSvgName(e.target.value)}
-                      placeholder="예: 회사로고"
-                      className="h-7 text-xs"
-                    />
-                    <Label className="text-xs">SVG 코드</Label>
-                    <textarea
-                      value={svgInput}
-                      onChange={(e) => {
-                        setSvgInput(e.target.value);
-                        setSvgError("");
-                      }}
-                      onPaste={(e) => {
-                        e.stopPropagation();
-                        const text = e.clipboardData.getData("text/plain");
-                        if (text) {
-                          e.preventDefault();
-                          setSvgInput(text);
-                          setSvgError("");
-                        }
-                      }}
-                      onKeyDown={(e) => e.stopPropagation()}
-                      placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
-                      className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
-                    />
-                    {svgInput && (
-                      <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
-                        <span
-                          className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
-                          dangerouslySetInnerHTML={{
-                            __html: DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } }),
-                          }}
-                        />
-                      </div>
-                    )}
-                    {svgError && <p className="text-destructive text-xs">{svgError}</p>}
-                    <Button
-                      size="sm"
-                      className="h-7 w-full text-xs"
-                      onClick={() => {
-                        if (!svgName.trim()) {
-                          setSvgError("아이콘 이름을 입력하세요.");
-                          return;
-                        }
-                        if (!svgInput.trim().includes("<svg")) {
-                          setSvgError("유효한 SVG 코드가 아닙니다.");
-                          return;
-                        }
-                        const sanitized = DOMPurify.sanitize(svgInput, { USE_PROFILES: { svg: true } });
-                        let finalName = svgName.trim();
-                        const existingNames = new Set(customSvgIcons.map((s) => s.name));
-                        if (existingNames.has(finalName)) {
-                          let counter = 2;
-                          while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
-                          finalName = `${svgName.trim()}(${counter})`;
-                        }
-                        const next = [...customSvgIcons, { name: finalName, svg: sanitized }];
-                        onUpdateProperty("componentConfig.customSvgIcons", next);
-                        setSvgInput("");
-                        setSvgName("");
-                        setSvgError("");
-                        setSvgPasteOpen(false);
-                      }}
-                    >
-                      추가
-                    </Button>
-                  </PopoverContent>
-                </Popover>
-              </div>
-            </div>
-          )}
-
-          {/* 아이콘 크기 비율 */}
-          <div>
-            <Label className="mb-1.5 block text-xs sm:text-sm">아이콘 크기 비율</Label>
-            <div className="flex rounded-md border">
-              {Object.keys(iconSizePresets).map((preset) => (
-                <button
-                  key={preset}
-                  type="button"
-                  onClick={() => handleIconSizePreset(preset)}
-                  className={cn(
-                    "flex-1 px-1 py-1 text-xs font-medium whitespace-nowrap transition-colors first:rounded-l-md last:rounded-r-md",
-                    iconSize === preset ? "bg-primary text-primary-foreground" : "hover:bg-muted text-muted-foreground",
-                  )}
-                >
-                  {preset}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          {/* 텍스트 위치 (icon-text 모드 전용) */}
-          {displayMode === "icon-text" && (
-            <div>
-              <Label className="mb-1.5 block text-xs sm:text-sm">텍스트 위치</Label>
-              <div className="flex rounded-md border">
-                {(
-                  [
-                    { value: "left", label: "왼쪽" },
-                    { value: "right", label: "오른쪽" },
-                    { value: "top", label: "위쪽" },
-                    { value: "bottom", label: "아래쪽" },
-                  ] as const
-                ).map((pos) => (
-                  <button
-                    key={pos.value}
-                    type="button"
-                    onClick={() => {
-                      setIconTextPosition(pos.value);
-                      onUpdateProperty("componentConfig.iconTextPosition", pos.value);
-                    }}
-                    className={cn(
-                      "flex-1 px-2 py-1 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
-                      iconTextPosition === pos.value
-                        ? "bg-primary text-primary-foreground"
-                        : "hover:bg-muted text-muted-foreground",
-                    )}
-                  >
-                    {pos.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* 아이콘-텍스트 간격 (icon-text 모드 전용) */}
-          {displayMode === "icon-text" && (
-            <div>
-              <Label className="mb-1.5 block text-xs sm:text-sm">아이콘-텍스트 간격</Label>
-              <div className="flex items-center gap-2">
-                <input
-                  type="range"
-                  min={0}
-                  max={32}
-                  step={1}
-                  value={Math.min(iconGap, 32)}
-                  onChange={(e) => {
-                    const val = Number(e.target.value);
-                    setIconGap(val);
-                    onUpdateProperty("componentConfig.iconGap", val);
-                  }}
-                  className="accent-primary h-1.5 flex-1 cursor-pointer"
-                />
-                <div className="flex items-center gap-1">
-                  <Input
-                    type="number"
-                    min={0}
-                    value={iconGap}
-                    onChange={(e) => {
-                      const val = Math.max(0, Number(e.target.value) || 0);
-                      setIconGap(val);
-                      onUpdateProperty("componentConfig.iconGap", val);
-                    }}
-                    className="h-7 w-14 text-center text-xs"
-                  />
-                  <span className="text-muted-foreground text-xs">px</span>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* 아이콘 색상 */}
-          <div>
-            <Label className="mb-1.5 block text-xs sm:text-sm">아이콘 색상</Label>
-            <div className="flex items-center gap-2">
-              <ColorPickerWithTransparent
-                value={iconColor || undefined}
-                onChange={handleIconColorChange}
-                placeholder="텍스트 색상 상속"
-                className="flex-1"
-              />
-              {iconColor && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-7 shrink-0 text-xs"
-                  onClick={() => handleIconColorChange(undefined)}
-                >
-                  <RotateCcw className="mr-1 h-3 w-3" />
-                  텍스트 색상과 동일
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* 모달 열기 액션 설정 */}
-      {localInputs.actionType === "modal" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">모달 설정</h4>
-
-          <div>
-            <Label htmlFor="modal-title">모달 제목</Label>
-            <Input
-              id="modal-title"
-              placeholder="모달 제목을 입력하세요"
-              value={localInputs.modalTitle}
-              onChange={(e) => {
-                const newValue = e.target.value;
-                setLocalInputs((prev) => ({ ...prev, modalTitle: newValue }));
-                onUpdateProperty("componentConfig.action.modalTitle", newValue);
-              }}
-            />
-          </div>
-
-          <div>
-            <Label htmlFor="modal-description">모달 설명</Label>
-            <Input
-              id="modal-description"
-              placeholder="모달 설명을 입력하세요 (선택사항)"
-              value={localInputs.modalDescription}
-              onChange={(e) => {
-                const newValue = e.target.value;
-                setLocalInputs((prev) => ({ ...prev, modalDescription: newValue }));
-                onUpdateProperty("componentConfig.action.modalDescription", newValue);
-              }}
-            />
-            <p className="text-muted-foreground mt-1 text-xs">모달 제목 아래에 표시됩니다</p>
-          </div>
-
-          <div>
-            <Label htmlFor="modal-size">모달 크기</Label>
-            <Select
-              value={component.componentConfig?.action?.modalSize || "md"}
-              onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.modalSize", value);
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="모달 크기 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="sm">작음 (Small)</SelectItem>
-                <SelectItem value="md">보통 (Medium)</SelectItem>
-                <SelectItem value="lg">큼 (Large)</SelectItem>
-                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div>
-            <Label htmlFor="target-screen-modal">대상 화면 선택</Label>
-            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={modalScreenOpen}
-                  className="h-6 w-full justify-between px-2 py-0 text-xs"
-                  disabled={screensLoading}
-                >
-                  {config.action?.targetScreenId
-                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
-                      "화면을 선택하세요..."
-                    : "화면을 선택하세요..."}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                <div className="flex flex-col">
-                  <div className="flex items-center border-b px-3 py-2">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <Input
-                      placeholder="화면 검색..."
-                      value={modalSearchTerm}
-                      onChange={(e) => setModalSearchTerm(e.target.value)}
-                      className="border-0 p-0 focus-visible:ring-0"
-                    />
-                  </div>
-                  <div className="max-h-[200px] overflow-auto">
-                    {(() => {
-                      const filteredScreens = filterScreens(modalSearchTerm);
-                      if (screensLoading) {
-                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
-                      }
-                      if (filteredScreens.length === 0) {
-                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
-                      }
-                      return filteredScreens.map((screen, index) => (
-                        <div
-                          key={`modal-screen-${screen.id}-${index}`}
-                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                          onClick={() => {
-                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
-                            setModalScreenOpen(false);
-                            setModalSearchTerm("");
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
-                            )}
-                          />
-                          <div className="flex flex-col">
-                            <span className="font-medium">{screen.name}</span>
-                            {screen.description && (
-                              <span className="text-muted-foreground text-xs">{screen.description}</span>
-                            )}
-                          </div>
-                        </div>
-                      ));
-                    })()}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-          </div>
-
-          {/* 선택된 데이터 전달 옵션 */}
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="auto-detect-data-source"
-              checked={component.componentConfig?.action?.autoDetectDataSource === true}
-              onCheckedChange={(checked) => {
-                onUpdateProperty("componentConfig.action.autoDetectDataSource", checked);
-                if (!checked) {
-                  // 체크 해제 시 필드 매핑도 초기화
-                  onUpdateProperty("componentConfig.action.fieldMappings", []);
-                }
-              }}
-            />
-            <div className="flex flex-col">
-              <Label htmlFor="auto-detect-data-source" className="cursor-pointer text-sm">
-                선택된 데이터 전달
-              </Label>
-              <p className="text-muted-foreground text-xs">
-                TableList/SplitPanel에서 선택된 데이터를 모달에 자동으로 전달합니다
-              </p>
-            </div>
-          </div>
-
-          {/* 🆕 필드 매핑 UI (데이터 전달 활성화 + 테이블이 다른 경우) */}
-          {component.componentConfig?.action?.autoDetectDataSource === true && (
-            <div className="bg-background mt-4 space-y-3 rounded-lg border p-3">
-              {/* 테이블 정보 표시 */}
-              <div className="flex items-center justify-between text-xs">
-                <div className="flex items-center gap-2">
-                  <Database className="text-muted-foreground h-3 w-3" />
-                  <span className="text-muted-foreground">소스:</span>
-                  <span className="font-medium">{modalActionSourceTable || "감지 중..."}</span>
-                </div>
-                <span className="text-muted-foreground">→</span>
-                <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">대상:</span>
-                  <span className="font-medium">{modalActionTargetTable || "감지 중..."}</span>
-                </div>
-              </div>
-
-              {/* 테이블이 같으면 자동 매핑 안내 */}
-              {modalActionSourceTable &&
-                modalActionTargetTable &&
-                modalActionSourceTable === modalActionTargetTable && (
-                  <div className="rounded-md bg-emerald-50 p-2 text-xs text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
-                    동일한 테이블입니다. 컬럼명이 같은 필드는 자동으로 매핑됩니다.
-                  </div>
-                )}
-
-              {/* 테이블이 다르면 필드 매핑 UI 표시 */}
-              {modalActionSourceTable &&
-                modalActionTargetTable &&
-                modalActionSourceTable !== modalActionTargetTable && (
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                      <Label className="text-xs font-medium">필드 매핑</Label>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        size="sm"
-                        className="h-6 text-xs"
-                        onClick={() => {
-                          const newMappings = [
-                            ...(component.componentConfig?.action?.fieldMappings || []),
-                            { sourceField: "", targetField: "" },
-                          ];
-                          setModalActionFieldMappings(newMappings);
-                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                        }}
-                      >
-                        <Plus className="mr-1 h-3 w-3" />
-                        매핑 추가
-                      </Button>
-                    </div>
-
-                    {(component.componentConfig?.action?.fieldMappings || []).length === 0 && (
-                      <p className="text-muted-foreground text-xs">
-                        컬럼명이 다른 경우 매핑을 추가하세요. 매핑이 없으면 동일 컬럼명만 전달됩니다.
-                      </p>
-                    )}
-
-                    {(component.componentConfig?.action?.fieldMappings || []).map((mapping: any, index: number) => (
-                      <div key={index} className="flex items-center gap-2">
-                        {/* 소스 필드 선택 */}
-                        <Popover
-                          open={modalFieldMappingSourceOpen[index] || false}
-                          onOpenChange={(open) =>
-                            setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: open }))
-                          }
-                        >
-                          <PopoverTrigger asChild>
-                            <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
-                              {mapping.sourceField
-                                ? modalActionSourceColumns.find((c) => c.name === mapping.sourceField)?.label ||
-                                  mapping.sourceField
-                                : "소스 컬럼 선택"}
-                              <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
-                            </Button>
-                          </PopoverTrigger>
-                          <PopoverContent className="w-[200px] p-0" align="start">
-                            <Command>
-                              <CommandInput
-                                placeholder="컬럼 검색..."
-                                value={modalFieldMappingSourceSearch[index] || ""}
-                                onValueChange={(val) =>
-                                  setModalFieldMappingSourceSearch((prev) => ({ ...prev, [index]: val }))
-                                }
-                              />
-                              <CommandList>
-                                <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
-                                <CommandGroup>
-                                  {modalActionSourceColumns
-                                    .filter(
-                                      (col) =>
-                                        col.name
-                                          .toLowerCase()
-                                          .includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()) ||
-                                        col.label
-                                          .toLowerCase()
-                                          .includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()),
-                                    )
-                                    .map((col) => (
-                                      <CommandItem
-                                        key={col.name}
-                                        value={col.name}
-                                        onSelect={() => {
-                                          const newMappings = [
-                                            ...(component.componentConfig?.action?.fieldMappings || []),
-                                          ];
-                                          newMappings[index] = { ...newMappings[index], sourceField: col.name };
-                                          setModalActionFieldMappings(newMappings);
-                                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                                          setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: false }));
-                                        }}
-                                      >
-                                        <Check
-                                          className={cn(
-                                            "mr-2 h-4 w-4",
-                                            mapping.sourceField === col.name ? "opacity-100" : "opacity-0",
-                                          )}
-                                        />
-                                        <div className="flex flex-col">
-                                          <span className="text-xs font-medium">{col.label}</span>
-                                          <span className="text-muted-foreground text-[10px]">{col.name}</span>
-                                        </div>
-                                      </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                              </CommandList>
-                            </Command>
-                          </PopoverContent>
-                        </Popover>
-
-                        <span className="text-muted-foreground text-xs">→</span>
-
-                        {/* 대상 필드 선택 */}
-                        <Popover
-                          open={modalFieldMappingTargetOpen[index] || false}
-                          onOpenChange={(open) =>
-                            setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: open }))
-                          }
-                        >
-                          <PopoverTrigger asChild>
-                            <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
-                              {mapping.targetField
-                                ? modalActionTargetColumns.find((c) => c.name === mapping.targetField)?.label ||
-                                  mapping.targetField
-                                : "대상 컬럼 선택"}
-                              <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
-                            </Button>
-                          </PopoverTrigger>
-                          <PopoverContent className="w-[200px] p-0" align="start">
-                            <Command>
-                              <CommandInput
-                                placeholder="컬럼 검색..."
-                                value={modalFieldMappingTargetSearch[index] || ""}
-                                onValueChange={(val) =>
-                                  setModalFieldMappingTargetSearch((prev) => ({ ...prev, [index]: val }))
-                                }
-                              />
-                              <CommandList>
-                                <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
-                                <CommandGroup>
-                                  {modalActionTargetColumns
-                                    .filter(
-                                      (col) =>
-                                        col.name
-                                          .toLowerCase()
-                                          .includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()) ||
-                                        col.label
-                                          .toLowerCase()
-                                          .includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()),
-                                    )
-                                    .map((col) => (
-                                      <CommandItem
-                                        key={col.name}
-                                        value={col.name}
-                                        onSelect={() => {
-                                          const newMappings = [
-                                            ...(component.componentConfig?.action?.fieldMappings || []),
-                                          ];
-                                          newMappings[index] = { ...newMappings[index], targetField: col.name };
-                                          setModalActionFieldMappings(newMappings);
-                                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                                          setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: false }));
-                                        }}
-                                      >
-                                        <Check
-                                          className={cn(
-                                            "mr-2 h-4 w-4",
-                                            mapping.targetField === col.name ? "opacity-100" : "opacity-0",
-                                          )}
-                                        />
-                                        <div className="flex flex-col">
-                                          <span className="text-xs font-medium">{col.label}</span>
-                                          <span className="text-muted-foreground text-[10px]">{col.name}</span>
-                                        </div>
-                                      </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                              </CommandList>
-                            </Command>
-                          </PopoverContent>
-                        </Popover>
-
-                        {/* 삭제 버튼 */}
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          className="text-destructive hover:bg-destructive/10 h-7 w-7 p-0"
-                          onClick={() => {
-                            const newMappings = (component.componentConfig?.action?.fieldMappings || []).filter(
-                              (_: any, i: number) => i !== index,
-                            );
-                            setModalActionFieldMappings(newMappings);
-                            onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    ))}
-                  </div>
-                )}
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* 🆕 데이터 전달 + 모달 열기 액션 설정 (deprecated - 하위 호환성 유지) */}
-      {component.componentConfig?.action?.type === "openModalWithData" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-amber-50 p-4 dark:bg-amber-950/20">
-          <h4 className="text-foreground text-sm font-medium">데이터 전달 + 모달 설정</h4>
-          <p className="text-xs text-amber-600 dark:text-amber-400">
-            이 옵션은 "모달 열기" 액션으로 통합되었습니다. 새 개발에서는 "모달 열기" + "선택된 데이터 전달"을
-            사용하세요.
-          </p>
-
-          {/* 🆕 블록 기반 제목 빌더 */}
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <Label>모달 제목 구성</Label>
-              <div className="flex gap-1">
-                <Button type="button" variant="outline" size="sm" onClick={addTextBlock} className="h-6 text-xs">
-                  <Type className="mr-1 h-3 w-3" />
-                  텍스트 추가
-                </Button>
-                <Button type="button" variant="outline" size="sm" onClick={addFieldBlock} className="h-6 text-xs">
-                  <Database className="mr-1 h-3 w-3" />
-                  필드 추가
-                </Button>
-              </div>
-            </div>
-
-            {/* 블록 목록 */}
-            <div className="space-y-2">
-              {titleBlocks.length === 0 ? (
-                <div className="text-muted-foreground rounded border-2 border-dashed py-4 text-center text-xs">
-                  텍스트나 필드를 추가하여 제목을 구성하세요
-                </div>
-              ) : (
-                titleBlocks.map((block, index) => (
-                  <Card key={block.id} className="p-2">
-                    <div className="flex items-start gap-2">
-                      {/* 순서 변경 버튼 */}
-                      <div className="flex flex-col gap-0.5">
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => moveBlockUp(block.id)}
-                          disabled={index === 0}
-                          className="h-5 w-5 p-0"
-                        >
-                          <ChevronUp className="h-3 w-3" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => moveBlockDown(block.id)}
-                          disabled={index === titleBlocks.length - 1}
-                          className="h-5 w-5 p-0"
-                        >
-                          <ChevronDown className="h-3 w-3" />
-                        </Button>
-                      </div>
-
-                      {/* 블록 타입 표시 */}
-                      <div className="mt-1 flex-shrink-0">
-                        {block.type === "text" ? (
-                          <Type className="h-4 w-4 text-primary" />
-                        ) : (
-                          <Database className="h-4 w-4 text-emerald-500" />
-                        )}
-                      </div>
-
-                      {/* 블록 설정 */}
-                      <div className="flex-1 space-y-2">
-                        {block.type === "text" ? (
-                          // 텍스트 블록
-                          <Input
-                            placeholder="텍스트 입력 (예: 품목 상세정보 - )"
-                            value={block.value}
-                            onChange={(e) => updateBlock(block.id, { value: e.target.value })}
-                            className="h-7 text-xs"
-                          />
-                        ) : (
-                          // 필드 블록
-                          <>
-                            {/* 테이블 선택 - Combobox */}
-                            <Popover
-                              open={blockTablePopoverOpen[block.id] || false}
-                              onOpenChange={(open) => {
-                                setBlockTablePopoverOpen((prev) => ({ ...prev, [block.id]: open }));
-                              }}
-                            >
-                              <PopoverTrigger asChild>
-                                <Button
-                                  variant="outline"
-                                  role="combobox"
-                                  className="h-7 w-full justify-between text-xs"
-                                >
-                                  {block.tableName
-                                    ? availableTables.find((t) => t.name === block.tableName)?.label || block.tableName
-                                    : "테이블 선택"}
-                                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                                </Button>
-                              </PopoverTrigger>
-                              <PopoverContent className="w-full p-0" align="start">
-                                <Command shouldFilter={false}>
-                                  <CommandInput
-                                    placeholder="테이블 검색 (라벨 또는 이름)..."
-                                    className="h-7 text-xs"
-                                    value={blockTableSearches[block.id] || ""}
-                                    onValueChange={(value) => {
-                                      setBlockTableSearches((prev) => ({ ...prev, [block.id]: value }));
-                                    }}
-                                  />
-                                  <CommandList>
-                                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
-                                    <CommandGroup>
-                                      {availableTables
-                                        .filter((table) => {
-                                          const search = (blockTableSearches[block.id] || "").toLowerCase();
-                                          if (!search) return true;
-                                          return (
-                                            table.label.toLowerCase().includes(search) ||
-                                            table.name.toLowerCase().includes(search)
-                                          );
-                                        })
-                                        .map((table) => (
-                                          <CommandItem
-                                            key={table.name}
-                                            value={table.name}
-                                            onSelect={() => {
-                                              updateBlock(block.id, { tableName: table.name, value: "" });
-                                              loadTableColumns(table.name);
-                                              setBlockTableSearches((prev) => ({ ...prev, [block.id]: "" }));
-                                              setBlockTablePopoverOpen((prev) => ({ ...prev, [block.id]: false }));
-                                            }}
-                                            className="text-xs"
-                                          >
-                                            <Check
-                                              className={cn(
-                                                "mr-2 h-3 w-3",
-                                                block.tableName === table.name ? "opacity-100" : "opacity-0",
-                                              )}
-                                            />
-                                            <span className="font-medium">{table.label}</span>
-                                            <span className="text-muted-foreground ml-2 text-[10px]">
-                                              ({table.name})
-                                            </span>
-                                          </CommandItem>
-                                        ))}
-                                    </CommandGroup>
-                                  </CommandList>
-                                </Command>
-                              </PopoverContent>
-                            </Popover>
-
-                            {block.tableName && (
-                              <>
-                                {/* 컬럼 선택 - Combobox (라벨명 표시) */}
-                                <Popover
-                                  open={blockColumnPopoverOpen[block.id] || false}
-                                  onOpenChange={(open) => {
-                                    setBlockColumnPopoverOpen((prev) => ({ ...prev, [block.id]: open }));
-                                  }}
-                                >
-                                  <PopoverTrigger asChild>
-                                    <Button
-                                      variant="outline"
-                                      role="combobox"
-                                      className="h-7 w-full justify-between text-xs"
-                                    >
-                                      {block.value
-                                        ? tableColumnsMap[block.tableName]?.find((c) => c.name === block.value)
-                                            ?.label || block.value
-                                        : "컬럼 선택"}
-                                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                                    </Button>
-                                  </PopoverTrigger>
-                                  <PopoverContent className="w-full p-0" align="start">
-                                    <Command shouldFilter={false}>
-                                      <CommandInput
-                                        placeholder="컬럼 검색 (라벨 또는 이름)..."
-                                        className="h-7 text-xs"
-                                        value={blockColumnSearches[block.id] || ""}
-                                        onValueChange={(value) => {
-                                          setBlockColumnSearches((prev) => ({ ...prev, [block.id]: value }));
-                                        }}
-                                      />
-                                      <CommandList>
-                                        <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                                        <CommandGroup>
-                                          {(tableColumnsMap[block.tableName] || [])
-                                            .filter((col) => {
-                                              const search = (blockColumnSearches[block.id] || "").toLowerCase();
-                                              if (!search) return true;
-                                              return (
-                                                col.label.toLowerCase().includes(search) ||
-                                                col.name.toLowerCase().includes(search)
-                                              );
-                                            })
-                                            .map((col) => (
-                                              <CommandItem
-                                                key={col.name}
-                                                value={col.name}
-                                                onSelect={() => {
-                                                  updateBlock(block.id, {
-                                                    value: col.name,
-                                                    label: col.label,
-                                                  });
-                                                  setBlockColumnSearches((prev) => ({ ...prev, [block.id]: "" }));
-                                                  setBlockColumnPopoverOpen((prev) => ({ ...prev, [block.id]: false }));
-                                                }}
-                                                className="text-xs"
-                                              >
-                                                <Check
-                                                  className={cn(
-                                                    "mr-2 h-3 w-3",
-                                                    block.value === col.name ? "opacity-100" : "opacity-0",
-                                                  )}
-                                                />
-                                                <span className="font-medium">{col.label}</span>
-                                                <span className="text-muted-foreground ml-2 text-[10px]">
-                                                  ({col.name})
-                                                </span>
-                                              </CommandItem>
-                                            ))}
-                                        </CommandGroup>
-                                      </CommandList>
-                                    </Command>
-                                  </PopoverContent>
-                                </Popover>
-
-                                <Input
-                                  placeholder="표시 라벨 (예: 품목명)"
-                                  value={block.label || ""}
-                                  onChange={(e) => updateBlock(block.id, { label: e.target.value })}
-                                  className="h-7 text-xs"
-                                />
-                              </>
-                            )}
-                          </>
-                        )}
-                      </div>
-
-                      {/* 삭제 버튼 */}
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => removeBlock(block.id)}
-                        className="h-7 w-7 p-0 text-destructive"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    </div>
-                  </Card>
-                ))
-              )}
-            </div>
-
-            {/* 미리보기 */}
-            {titleBlocks.length > 0 && (
-              <div className="bg-muted mt-2 rounded p-2 text-xs">
-                <span className="text-muted-foreground">미리보기: </span>
-                <span className="font-medium">{generateTitlePreview()}</span>
-              </div>
-            )}
-
-            <p className="text-muted-foreground text-[10px]">
-              • 텍스트: 고정 텍스트 입력 (예: "품목 상세정보 - ")
-              <br />
-              • 필드: 이전 화면 데이터로 자동 채워짐 (예: 품목명, 규격)
-              <br />
-              • 순서 변경: ↑↓ 버튼으로 자유롭게 배치
-              <br />• 데이터가 없으면 "표시 라벨"이 대신 표시됩니다
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="modal-size-with-data">모달 크기</Label>
-            <Select
-              value={component.componentConfig?.action?.modalSize || "lg"}
-              onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.modalSize", value);
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="모달 크기 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="sm">작음 (Small)</SelectItem>
-                <SelectItem value="md">보통 (Medium)</SelectItem>
-                <SelectItem value="lg">큼 (Large) - 권장</SelectItem>
-                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div>
-            <Label htmlFor="target-screen-with-data">대상 화면 선택</Label>
-            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={modalScreenOpen}
-                  className="h-6 w-full justify-between px-2 py-0"
-                  className="text-xs"
-                  disabled={screensLoading}
-                >
-                  {config.action?.targetScreenId
-                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
-                      "화면을 선택하세요..."
-                    : "화면을 선택하세요..."}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                <div className="flex flex-col">
-                  <div className="flex items-center border-b px-3 py-2">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <Input
-                      placeholder="화면 검색..."
-                      value={modalSearchTerm}
-                      onChange={(e) => setModalSearchTerm(e.target.value)}
-                      className="border-0 p-0 focus-visible:ring-0"
-                    />
-                  </div>
-                  <div className="max-h-[200px] overflow-auto">
-                    {(() => {
-                      const filteredScreens = filterScreens(modalSearchTerm);
-                      if (screensLoading) {
-                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
-                      }
-                      if (filteredScreens.length === 0) {
-                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
-                      }
-                      return filteredScreens.map((screen, index) => (
-                        <div
-                          key={`modal-data-screen-${screen.id}-${index}`}
-                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                          onClick={() => {
-                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
-                            setModalScreenOpen(false);
-                            setModalSearchTerm("");
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
-                            )}
-                          />
-                          <div className="flex flex-col">
-                            <span className="font-medium">{screen.name}</span>
-                            {screen.description && (
-                              <span className="text-muted-foreground text-xs">{screen.description}</span>
-                            )}
-                          </div>
-                        </div>
-                      ));
-                    })()}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-            <p className="text-muted-foreground mt-1 text-xs">
-              SelectedItemsDetailInput 컴포넌트가 있는 화면을 선택하세요
-            </p>
-          </div>
-
-          {/* 🆕 필드 매핑 설정 (소스 컬럼 → 타겟 컬럼) */}
-          <div className="space-y-2 border-t pt-4">
-            <div className="flex items-center justify-between">
-              <Label className="text-xs font-medium">필드 매핑 (선택사항)</Label>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className="h-6 text-[10px]"
-                onClick={() => {
-                  const currentMappings = config.action?.fieldMappings || [];
-                  const newMapping = { sourceField: "", targetField: "" };
-                  onUpdateProperty("componentConfig.action.fieldMappings", [...currentMappings, newMapping]);
-                }}
-              >
-                <Plus className="mr-1 h-3 w-3" />
-                매핑 추가
-              </Button>
-            </div>
-            <p className="text-muted-foreground text-[10px]">
-              소스 테이블의 컬럼명이 타겟 화면의 입력 필드 컬럼명과 다를 때 매핑을 설정하세요.
-              <br />
-              예: warehouse_code → warehouse_id (분할 패널의 창고코드를 모달의 창고ID에 매핑)
-            </p>
-
-            {/* 컬럼 로드 상태 표시 */}
-            {modalSourceColumns.length > 0 || modalTargetColumns.length > 0 ? (
-              <div className="text-muted-foreground bg-muted/50 rounded p-2 text-[10px]">
-                소스 컬럼: {modalSourceColumns.length}개 / 타겟 컬럼: {modalTargetColumns.length}개
-              </div>
-            ) : (
-              <div className="rounded bg-amber-50 p-2 text-[10px] text-amber-600 dark:bg-amber-950/20">
-                분할 패널 또는 테이블 컴포넌트와 대상 화면을 설정하면 컬럼 목록이 로드됩니다.
-              </div>
-            )}
-
-            {(config.action?.fieldMappings || []).length === 0 ? (
-              <div className="rounded-md border border-dashed p-3 text-center">
-                <p className="text-muted-foreground text-xs">매핑이 없으면 같은 이름의 컬럼끼리 자동으로 매핑됩니다.</p>
-              </div>
-            ) : (
-              <div className="space-y-3">
-                {(config.action?.fieldMappings || []).map((mapping: any, index: number) => (
-                  <div key={index} className="bg-background space-y-2 rounded-md border p-3">
-                    {/* 소스 필드 선택 (Combobox) - 세로 배치 */}
-                    <div className="space-y-1">
-                      <Label className="text-muted-foreground text-[10px]">소스 컬럼</Label>
-                      <Popover
-                        open={modalSourcePopoverOpen[index] || false}
-                        onOpenChange={(open) => setModalSourcePopoverOpen((prev) => ({ ...prev, [index]: open }))}
-                      >
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
-                            <span className="truncate">
-                              {mapping.sourceField
-                                ? modalSourceColumns.find((c) => c.name === mapping.sourceField)?.label ||
-                                  mapping.sourceField
-                                : "소스 컬럼 선택"}
-                            </span>
-                            <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[--radix-popover-trigger-width] max-w-[280px] p-0" align="start">
-                          <Command>
-                            <CommandInput
-                              placeholder="컬럼 검색..."
-                              className="h-8 text-xs"
-                              value={modalSourceSearch[index] || ""}
-                              onValueChange={(value) => setModalSourceSearch((prev) => ({ ...prev, [index]: value }))}
-                            />
-                            <CommandList className="max-h-[200px]">
-                              <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
-                              <CommandGroup>
-                                {modalSourceColumns.map((col) => (
-                                  <CommandItem
-                                    key={col.name}
-                                    value={`${col.label} ${col.name}`}
-                                    onSelect={() => {
-                                      const mappings = [...(config.action?.fieldMappings || [])];
-                                      mappings[index] = { ...mappings[index], sourceField: col.name };
-                                      onUpdateProperty("componentConfig.action.fieldMappings", mappings);
-                                      setModalSourcePopoverOpen((prev) => ({ ...prev, [index]: false }));
-                                    }}
-                                    className="text-xs"
-                                  >
-                                    <Check
-                                      className={cn(
-                                        "mr-2 h-3 w-3",
-                                        mapping.sourceField === col.name ? "opacity-100" : "opacity-0",
-                                      )}
-                                    />
-                                    <span className="truncate">{col.label}</span>
-                                    {col.label !== col.name && (
-                                      <span className="text-muted-foreground ml-1 truncate">({col.name})</span>
-                                    )}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    {/* 화살표 표시 */}
-                    <div className="flex justify-center">
-                      <span className="text-muted-foreground text-xs">↓</span>
-                    </div>
-
-                    {/* 타겟 필드 선택 (Combobox) - 세로 배치 */}
-                    <div className="space-y-1">
-                      <Label className="text-muted-foreground text-[10px]">타겟 컬럼</Label>
-                      <Popover
-                        open={modalTargetPopoverOpen[index] || false}
-                        onOpenChange={(open) => setModalTargetPopoverOpen((prev) => ({ ...prev, [index]: open }))}
-                      >
-                        <PopoverTrigger asChild>
-                          <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
-                            <span className="truncate">
-                              {mapping.targetField
-                                ? modalTargetColumns.find((c) => c.name === mapping.targetField)?.label ||
-                                  mapping.targetField
-                                : "타겟 컬럼 선택"}
-                            </span>
-                            <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-[--radix-popover-trigger-width] max-w-[280px] p-0" align="start">
-                          <Command>
-                            <CommandInput
-                              placeholder="컬럼 검색..."
-                              className="h-8 text-xs"
-                              value={modalTargetSearch[index] || ""}
-                              onValueChange={(value) => setModalTargetSearch((prev) => ({ ...prev, [index]: value }))}
-                            />
-                            <CommandList className="max-h-[200px]">
-                              <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
-                              <CommandGroup>
-                                {modalTargetColumns.map((col) => (
-                                  <CommandItem
-                                    key={col.name}
-                                    value={`${col.label} ${col.name}`}
-                                    onSelect={() => {
-                                      const mappings = [...(config.action?.fieldMappings || [])];
-                                      mappings[index] = { ...mappings[index], targetField: col.name };
-                                      onUpdateProperty("componentConfig.action.fieldMappings", mappings);
-                                      setModalTargetPopoverOpen((prev) => ({ ...prev, [index]: false }));
-                                    }}
-                                    className="text-xs"
-                                  >
-                                    <Check
-                                      className={cn(
-                                        "mr-2 h-3 w-3",
-                                        mapping.targetField === col.name ? "opacity-100" : "opacity-0",
-                                      )}
-                                    />
-                                    <span className="truncate">{col.label}</span>
-                                    {col.label !== col.name && (
-                                      <span className="text-muted-foreground ml-1 truncate">({col.name})</span>
-                                    )}
-                                  </CommandItem>
-                                ))}
-                              </CommandGroup>
-                            </CommandList>
-                          </Command>
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    {/* 삭제 버튼 */}
-                    <div className="flex justify-end pt-1">
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="text-destructive hover:bg-destructive/10 h-6 text-[10px]"
-                        onClick={() => {
-                          const mappings = [...(config.action?.fieldMappings || [])];
-                          mappings.splice(index, 1);
-                          onUpdateProperty("componentConfig.action.fieldMappings", mappings);
-                        }}
-                      >
-                        <X className="mr-1 h-3 w-3" />
-                        삭제
-                      </Button>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* 수정 액션 설정 */}
-      {localInputs.actionType === "edit" && (
-        <div className="bg-success/10 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">수정 설정</h4>
-
-          <div>
-            <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
-            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={modalScreenOpen}
-                  className="h-6 w-full justify-between px-2 py-0"
-                  className="text-xs"
-                  disabled={screensLoading}
-                >
-                  {config.action?.targetScreenId
-                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
-                      "수정 폼 화면을 선택하세요..."
-                    : "수정 폼 화면을 선택하세요..."}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                <div className="flex flex-col">
-                  <div className="flex items-center border-b px-3 py-2">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <Input
-                      placeholder="화면 검색..."
-                      value={modalSearchTerm}
-                      onChange={(e) => setModalSearchTerm(e.target.value)}
-                      className="border-0 p-0 focus-visible:ring-0"
-                    />
-                  </div>
-                  <div className="max-h-[200px] overflow-auto">
-                    {(() => {
-                      const filteredScreens = filterScreens(modalSearchTerm);
-                      if (screensLoading) {
-                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
-                      }
-                      if (filteredScreens.length === 0) {
-                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
-                      }
-                      return filteredScreens.map((screen, index) => (
-                        <div
-                          key={`edit-screen-${screen.id}-${index}`}
-                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                          onClick={() => {
-                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
-                            setModalScreenOpen(false);
-                            setModalSearchTerm("");
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
-                            )}
-                          />
-                          <div className="flex flex-col">
-                            <span className="font-medium">{screen.name}</span>
-                            {screen.description && (
-                              <span className="text-muted-foreground text-xs">{screen.description}</span>
-                            )}
-                          </div>
-                        </div>
-                      ));
-                    })()}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-            <p className="text-muted-foreground mt-1 text-xs">
-              선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="edit-mode">수정 모드</Label>
-            <Select
-              value={component.componentConfig?.action?.editMode || "modal"}
-              onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.editMode", value);
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="수정 모드 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="modal">모달로 열기</SelectItem>
-                <SelectItem value="navigate">새 페이지로 이동</SelectItem>
-                <SelectItem value="inline">현재 화면에서 수정</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {(component.componentConfig?.action?.editMode || "modal") === "modal" && (
-            <>
-              <div>
-                <Label htmlFor="edit-modal-title">모달 제목</Label>
-                <Input
-                  id="edit-modal-title"
-                  placeholder="모달 제목을 입력하세요 (예: 데이터 수정)"
-                  value={localInputs.editModalTitle}
-                  onChange={(e) => {
-                    const newValue = e.target.value;
-                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
-                    onUpdateProperty("componentConfig.action.editModalTitle", newValue);
-                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
-                  }}
-                />
-                <p className="text-muted-foreground mt-1 text-xs">비워두면 기본 제목이 표시됩니다</p>
-              </div>
-
-              <div>
-                <Label htmlFor="edit-modal-description">모달 설명</Label>
-                <Input
-                  id="edit-modal-description"
-                  placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 수정합니다)"
-                  value={localInputs.editModalDescription}
-                  onChange={(e) => {
-                    const newValue = e.target.value;
-                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
-                    onUpdateProperty("componentConfig.action.editModalDescription", newValue);
-                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
-                  }}
-                />
-                <p className="text-muted-foreground mt-1 text-xs">비워두면 설명이 표시되지 않습니다</p>
-              </div>
-
-              <div>
-                <Label htmlFor="edit-modal-size">모달 크기</Label>
-                <Select
-                  value={component.componentConfig?.action?.modalSize || "md"}
-                  onValueChange={(value) => {
-                    onUpdateProperty("componentConfig.action.modalSize", value);
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="모달 크기 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="sm">작음 (Small)</SelectItem>
-                    <SelectItem value="md">보통 (Medium)</SelectItem>
-                    <SelectItem value="lg">큼 (Large)</SelectItem>
-                    <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
-                    <SelectItem value="full">전체 화면 (Full)</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </>
-          )}
-
-          <div>
-            <Label htmlFor="edit-group-by-column">그룹화 컬럼</Label>
-            <Popover open={groupByColumnOpen} onOpenChange={setGroupByColumnOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={groupByColumnOpen}
-                  className="h-8 w-full justify-between text-xs"
-                >
-                  {localInputs.groupByColumn ? (
-                    <span>
-                      {localInputs.groupByColumn}
-                      {currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label &&
-                        currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label !==
-                          localInputs.groupByColumn && (
-                          <span className="text-muted-foreground ml-1">
-                            ({currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label})
-                          </span>
-                        )}
-                    </span>
-                  ) : (
-                    <span className="text-muted-foreground">컬럼을 선택하세요</span>
-                  )}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                <div className="flex flex-col">
-                  <div className="flex items-center border-b px-3 py-2">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <Input
-                      placeholder="컬럼명 또는 라벨 검색..."
-                      value={groupByColumnSearch}
-                      onChange={(e) => setGroupByColumnSearch(e.target.value)}
-                      className="border-0 p-0 focus-visible:ring-0"
-                    />
-                  </div>
-                  <div className="max-h-[200px] overflow-auto">
-                    {currentTableColumns.length === 0 ? (
-                      <div className="text-muted-foreground p-3 text-sm">
-                        {currentTableName ? "컬럼을 불러오는 중..." : "테이블이 설정되지 않았습니다"}
-                      </div>
-                    ) : (
-                      <>
-                        {/* 선택 해제 옵션 */}
-                        <div
-                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                          onClick={() => {
-                            setLocalInputs((prev) => ({ ...prev, groupByColumn: "" }));
-                            onUpdateProperty("componentConfig.action.groupByColumns", undefined);
-                            setGroupByColumnOpen(false);
-                            setGroupByColumnSearch("");
-                          }}
-                        >
-                          <Check
-                            className={cn("mr-2 h-4 w-4", !localInputs.groupByColumn ? "opacity-100" : "opacity-0")}
-                          />
-                          <span className="text-muted-foreground">선택 안 함</span>
-                        </div>
-                        {/* 컬럼 목록 */}
-                        {currentTableColumns
-                          .filter((col) => {
-                            if (!groupByColumnSearch) return true;
-                            const search = groupByColumnSearch.toLowerCase();
-                            return col.name.toLowerCase().includes(search) || col.label.toLowerCase().includes(search);
-                          })
-                          .map((col) => (
-                            <div
-                              key={col.name}
-                              className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                              onClick={() => {
-                                setLocalInputs((prev) => ({ ...prev, groupByColumn: col.name }));
-                                onUpdateProperty("componentConfig.action.groupByColumns", [col.name]);
-                                setGroupByColumnOpen(false);
-                                setGroupByColumnSearch("");
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  localInputs.groupByColumn === col.name ? "opacity-100" : "opacity-0",
-                                )}
-                              />
-                              <div className="flex flex-col">
-                                <span className="font-medium">{col.name}</span>
-                                {col.label !== col.name && (
-                                  <span className="text-muted-foreground text-xs">{col.label}</span>
-                                )}
-                              </div>
-                            </div>
-                          ))}
-                      </>
-                    )}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-            <p className="text-muted-foreground mt-1 text-xs">여러 행을 하나의 그룹으로 묶어서 수정할 때 사용합니다</p>
-          </div>
-        </div>
-      )}
-
-      {/* 복사 액션 설정 */}
-      {localInputs.actionType === "copy" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
-          <h4 className="text-foreground text-sm font-medium">복사 설정 (품목코드 자동 초기화)</h4>
-
-          <div>
-            <Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
-            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={modalScreenOpen}
-                  className="h-6 w-full justify-between px-2 py-0"
-                  className="text-xs"
-                  disabled={screensLoading}
-                >
-                  {config.action?.targetScreenId
-                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
-                      "복사 폼 화면을 선택하세요..."
-                    : "복사 폼 화면을 선택하세요..."}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                <div className="flex flex-col">
-                  <div className="flex items-center border-b px-3 py-2">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <Input
-                      placeholder="화면 검색..."
-                      value={modalSearchTerm}
-                      onChange={(e) => setModalSearchTerm(e.target.value)}
-                      className="border-0 p-0 focus-visible:ring-0"
-                    />
-                  </div>
-                  <div className="max-h-[200px] overflow-auto">
-                    {(() => {
-                      const filteredScreens = filterScreens(modalSearchTerm);
-                      if (screensLoading) {
-                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
-                      }
-                      if (filteredScreens.length === 0) {
-                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
-                      }
-                      return filteredScreens.map((screen, index) => (
-                        <div
-                          key={`copy-screen-${screen.id}-${index}`}
-                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                          onClick={() => {
-                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
-                            setModalScreenOpen(false);
-                            setModalSearchTerm("");
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
-                            )}
-                          />
-                          <div className="flex flex-col">
-                            <span className="font-medium">{screen.name}</span>
-                            {screen.description && (
-                              <span className="text-muted-foreground text-xs">{screen.description}</span>
-                            )}
-                          </div>
-                        </div>
-                      ));
-                    })()}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-            <p className="text-muted-foreground mt-1 text-xs">
-              선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="copy-mode">복사 모드</Label>
-            <Select
-              value={component.componentConfig?.action?.editMode || "modal"}
-              onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.editMode", value);
-              }}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="복사 모드 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="modal">모달로 열기</SelectItem>
-                <SelectItem value="navigate">새 페이지로 이동</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {(component.componentConfig?.action?.editMode || "modal") === "modal" && (
-            <>
-              <div>
-                <Label htmlFor="copy-modal-title">모달 제목</Label>
-                <Input
-                  id="copy-modal-title"
-                  placeholder="모달 제목을 입력하세요 (예: 데이터 복사)"
-                  value={localInputs.editModalTitle}
-                  onChange={(e) => {
-                    const newValue = e.target.value;
-                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
-                    onUpdateProperty("componentConfig.action.editModalTitle", newValue);
-                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
-                  }}
-                />
-                <p className="text-muted-foreground mt-1 text-xs">비워두면 기본 제목이 표시됩니다</p>
-              </div>
-
-              <div>
-                <Label htmlFor="copy-modal-description">모달 설명</Label>
-                <Input
-                  id="copy-modal-description"
-                  placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 복사합니다)"
-                  value={localInputs.editModalDescription}
-                  onChange={(e) => {
-                    const newValue = e.target.value;
-                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
-                    onUpdateProperty("componentConfig.action.editModalDescription", newValue);
-                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
-                  }}
-                />
-                <p className="text-muted-foreground mt-1 text-xs">비워두면 설명이 표시되지 않습니다</p>
-              </div>
-
-              <div>
-                <Label htmlFor="copy-modal-size">모달 크기</Label>
-                <Select
-                  value={component.componentConfig?.action?.modalSize || "md"}
-                  onValueChange={(value) => {
-                    onUpdateProperty("componentConfig.action.modalSize", value);
-                  }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="모달 크기 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="sm">작음 (Small)</SelectItem>
-                    <SelectItem value="md">보통 (Medium)</SelectItem>
-                    <SelectItem value="lg">큼 (Large)</SelectItem>
-                    <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
-                    <SelectItem value="full">전체 화면 (Full)</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </>
-          )}
-        </div>
-      )}
-
-      {/* 테이블 이력 보기 액션 설정 */}
-      {localInputs.actionType === "view_table_history" && (
-        <div className="mt-4 space-y-4">
-          <div>
-            <Label>
-              전체 이력 표시 컬럼 (필수) <span className="text-destructive">*</span>
-            </Label>
-
-            <Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={displayColumnOpen}
-                  className="mt-2 h-8 w-full justify-between text-xs"
-                  disabled={columnsLoading || tableColumns.length === 0}
-                >
-                  {columnsLoading
-                    ? "로딩 중..."
-                    : config.action?.historyDisplayColumn
-                      ? config.action.historyDisplayColumn
-                      : tableColumns.length === 0
-                        ? "사용 가능한 컬럼이 없습니다"
-                        : "컬럼을 선택하세요"}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
-                <Command>
-                  <CommandInput placeholder="컬럼 검색..." className="text-xs" />
-                  <CommandList>
-                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                    <CommandGroup>
-                      {tableColumns.map((column) => (
-                        <CommandItem
-                          key={column}
-                          value={column}
-                          onSelect={(currentValue) => {
-                            onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
-                            setDisplayColumnOpen(false);
-                          }}
-                          className="text-xs"
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              config.action?.historyDisplayColumn === column ? "opacity-100" : "opacity-0",
-                            )}
-                          />
-                          {column}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          </div>
-        </div>
-      )}
-
-      {/* 페이지 이동 액션 설정 */}
-      {localInputs.actionType === "navigate" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">페이지 이동 설정</h4>
-
-          <div>
-            <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
-            <Popover open={navScreenOpen} onOpenChange={setNavScreenOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={navScreenOpen}
-                  className="h-6 w-full justify-between px-2 py-0"
-                  className="text-xs"
-                  disabled={screensLoading}
-                >
-                  {config.action?.targetScreenId
-                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
-                      "화면을 선택하세요..."
-                    : "화면을 선택하세요..."}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
-                <div className="flex flex-col">
-                  <div className="flex items-center border-b px-3 py-2">
-                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-                    <Input
-                      placeholder="화면 검색..."
-                      value={navSearchTerm}
-                      onChange={(e) => setNavSearchTerm(e.target.value)}
-                      className="border-0 p-0 focus-visible:ring-0"
-                    />
-                  </div>
-                  <div className="max-h-[200px] overflow-auto">
-                    {(() => {
-                      const filteredScreens = filterScreens(navSearchTerm);
-                      if (screensLoading) {
-                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
-                      }
-                      if (filteredScreens.length === 0) {
-                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
-                      }
-                      return filteredScreens.map((screen, index) => (
-                        <div
-                          key={`navigate-screen-${screen.id}-${index}`}
-                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
-                          onClick={() => {
-                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
-                            setNavScreenOpen(false);
-                            setNavSearchTerm("");
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
-                            )}
-                          />
-                          <div className="flex flex-col">
-                            <span className="font-medium">{screen.name}</span>
-                            {screen.description && (
-                              <span className="text-muted-foreground text-xs">{screen.description}</span>
-                            )}
-                          </div>
-                        </div>
-                      ));
-                    })()}
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
-            <p className="text-muted-foreground mt-1 text-xs">
-              선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="target-url">또는 직접 URL 입력 (고급)</Label>
-            <Input
-              id="target-url"
-              placeholder="예: /admin/users 또는 https://example.com"
-              value={localInputs.targetUrl}
-              onChange={(e) => {
-                const newValue = e.target.value;
-                setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
-                onUpdateProperty("componentConfig.action.targetUrl", newValue);
-              }}
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-            <p className="text-muted-foreground mt-1 text-xs">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
-          </div>
-        </div>
-      )}
-
-      {/* 엑셀 다운로드 액션 설정 */}
-      {localInputs.actionType === "excel_download" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">엑셀 다운로드 설정</h4>
-
-          <div>
-            <Label htmlFor="excel-filename">파일명 (선택사항)</Label>
-            <Input
-              id="excel-filename"
-              placeholder="예: 데이터목록 (기본값: export)"
-              value={config.action?.excelFileName || ""}
-              onChange={(e) => onUpdateProperty("componentConfig.action.excelFileName", e.target.value)}
-              className="h-8 text-xs"
-            />
-            <p className="text-muted-foreground mt-1 text-xs">확장자(.xlsx)는 자동으로 추가됩니다</p>
-          </div>
-
-          <div>
-            <Label htmlFor="excel-sheetname">시트명 (선택사항)</Label>
-            <Input
-              id="excel-sheetname"
-              placeholder="예: Sheet1 (기본값)"
-              value={config.action?.excelSheetName || ""}
-              onChange={(e) => onUpdateProperty("componentConfig.action.excelSheetName", e.target.value)}
-              className="h-8 text-xs"
-            />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <Label htmlFor="excel-include-headers">헤더 포함</Label>
-            <Switch
-              id="excel-include-headers"
-              checked={config.action?.excelIncludeHeaders !== false}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.excelIncludeHeaders", checked)}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* 엑셀 업로드 액션 설정 */}
-      {localInputs.actionType === "excel_upload" && (
-        <ExcelUploadConfigSection
-          config={config}
-          onUpdateProperty={onUpdateProperty}
-          allComponents={allComponents}
-          currentTableName={currentTableName}
-        />
-      )}
-
-      {/* 다중 테이블 엑셀 업로드: 설정 불필요 (버튼 클릭 시 화면 테이블에서 자동 감지) */}
-
-      {/* 바코드 스캔 액션 설정 */}
-      {localInputs.actionType === "barcode_scan" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">📷 바코드 스캔 설정</h4>
-
-          <div>
-            <Label htmlFor="barcode-target-field">
-              대상 필드명 <span className="text-destructive">*</span>
-            </Label>
-            <Input
-              id="barcode-target-field"
-              placeholder="예: barcode, qr_code"
-              value={config.action?.barcodeTargetField || ""}
-              onChange={(e) => onUpdateProperty("componentConfig.action.barcodeTargetField", e.target.value)}
-              className="h-8 text-xs"
-            />
-            <p className="text-muted-foreground mt-1 text-xs">스캔 결과가 입력될 폼 필드명</p>
-          </div>
-
-          <div>
-            <Label htmlFor="barcode-format">바코드 형식</Label>
-            <Select
-              value={config.action?.barcodeFormat || "all"}
-              onValueChange={(value) => onUpdateProperty("componentConfig.action.barcodeFormat", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">모든 형식</SelectItem>
-                <SelectItem value="1d">1D 바코드만 (CODE128, EAN13 등)</SelectItem>
-                <SelectItem value="2d">2D 바코드만 (QR코드, DataMatrix 등)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <Label htmlFor="barcode-auto-submit">스캔 후 자동 저장</Label>
-            <Switch
-              id="barcode-auto-submit"
-              checked={config.action?.barcodeAutoSubmit === true}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.barcodeAutoSubmit", checked)}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* 코드 병합 액션 설정 */}
-      {localInputs.actionType === "code_merge" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">🔀 코드 병합 설정</h4>
-
-          <div>
-            <Label htmlFor="merge-column-name">
-              병합할 컬럼명 <span className="text-destructive">*</span>
-            </Label>
-            <Input
-              id="merge-column-name"
-              placeholder="예: item_code, product_id"
-              value={config.action?.mergeColumnName || ""}
-              onChange={(e) => onUpdateProperty("componentConfig.action.mergeColumnName", e.target.value)}
-              className="h-8 text-xs"
-            />
-            <p className="text-muted-foreground mt-1 text-xs">
-              병합할 컬럼명 (예: item_code). 이 컬럼이 있는 모든 테이블에 병합이 적용됩니다.
-            </p>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="merge-show-preview">병합 전 미리보기</Label>
-              <p className="text-muted-foreground text-xs">영향받을 테이블과 행 수를 미리 확인합니다</p>
-            </div>
-            <Switch
-              id="merge-show-preview"
-              checked={config.action?.mergeShowPreview !== false}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.mergeShowPreview", checked)}
-            />
-          </div>
-
-          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
-            <p className="text-xs text-primary dark:text-primary/60">
-              <strong>사용 방법:</strong>
-              <br />
-              1. 테이블에서 병합할 두 개의 행을 선택합니다
-              <br />
-              2. 이 버튼을 클릭하면 병합 방향을 선택할 수 있습니다
-              <br />
-              3. 데이터는 삭제되지 않고, 컬럼 값만 변경됩니다
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* 공차등록 설정 - 운행알림으로 통합되어 주석 처리 */}
-      {/* {localInputs.actionType === "empty_vehicle" && (
-        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
-          ... 공차등록 설정 UI 생략 ...
-        </div>
-      )} */}
-
-      {/* 운행알림 및 종료 설정 */}
-      {localInputs.actionType === "operation_control" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">🚗 운행알림 및 종료 설정</h4>
-
-          <div>
-            <Label htmlFor="update-table">
-              대상 테이블 <span className="text-destructive">*</span>
-            </Label>
-            <Select
-              value={config.action?.updateTableName || currentTableName || ""}
-              onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.updateTableName", value);
-                onUpdateProperty("componentConfig.action.updateTargetField", "");
-              }}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder="테이블 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                {availableTables.map((table) => (
-                  <SelectItem key={table.name} value={table.name} className="text-xs">
-                    {table.label || table.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground mt-1 text-xs">필드 값을 변경할 테이블 (기본: 현재 화면 테이블)</p>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <Label htmlFor="update-target-field">
-                변경할 필드명 <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="update-target-field"
-                placeholder="예: status"
-                value={config.action?.updateTargetField || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.updateTargetField", e.target.value)}
-                className="h-8 text-xs"
-              />
-              <p className="text-muted-foreground mt-1 text-xs">변경할 DB 컬럼</p>
-            </div>
-            <div>
-              <Label htmlFor="update-target-value">
-                변경할 값 <span className="text-destructive">*</span>
-              </Label>
-              <Input
-                id="update-target-value"
-                placeholder="예: active"
-                value={config.action?.updateTargetValue || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.updateTargetValue", e.target.value)}
-                className="h-8 text-xs"
-              />
-              <p className="text-muted-foreground mt-1 text-xs">변경할 값 (문자열, 숫자)</p>
-            </div>
-          </div>
-
-          {/* 🆕 키 필드 설정 (레코드 식별용) */}
-          <div className="mt-4 border-t pt-4">
-            <h5 className="text-muted-foreground mb-3 text-xs font-medium">레코드 식별 설정</h5>
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label htmlFor="update-key-field">
-                  키 필드 (DB 컬럼) <span className="text-destructive">*</span>
-                </Label>
-                <Input
-                  id="update-key-field"
-                  placeholder="예: user_id"
-                  value={config.action?.updateKeyField || ""}
-                  onChange={(e) => onUpdateProperty("componentConfig.action.updateKeyField", e.target.value)}
-                  className="h-8 text-xs"
-                />
-                <p className="text-muted-foreground mt-1 text-xs">레코드를 찾을 DB 컬럼명</p>
-              </div>
-              <div>
-                <Label htmlFor="update-key-source">
-                  키 값 소스 <span className="text-destructive">*</span>
-                </Label>
-                <Select
-                  value={config.action?.updateKeySourceField || ""}
-                  onValueChange={(value) => onUpdateProperty("componentConfig.action.updateKeySourceField", value)}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="키 값 소스 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__userId__" className="text-xs">
-                      <span className="flex items-center gap-1">
-                        <span className="text-amber-500">🔑</span> 로그인 사용자 ID
-                      </span>
-                    </SelectItem>
-                    <SelectItem value="__userName__" className="text-xs">
-                      <span className="flex items-center gap-1">
-                        <span className="text-amber-500">🔑</span> 로그인 사용자 이름
-                      </span>
-                    </SelectItem>
-                    <SelectItem value="__companyCode__" className="text-xs">
-                      <span className="flex items-center gap-1">
-                        <span className="text-amber-500">🔑</span> 회사 코드
-                      </span>
-                    </SelectItem>
-                    {tableColumns.map((column) => (
-                      <SelectItem key={column} value={column} className="text-xs">
-                        {column}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <p className="text-muted-foreground mt-1 text-xs">키 값을 가져올 소스</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="update-auto-save">변경 후 자동 저장</Label>
-              <p className="text-muted-foreground text-xs">버튼 클릭 시 즉시 DB에 저장</p>
-            </div>
-            <Switch
-              id="update-auto-save"
-              checked={config.action?.updateAutoSave !== false}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateAutoSave", checked)}
-            />
-          </div>
-
-          <div>
-            <Label htmlFor="update-confirm-message">확인 메시지 (선택)</Label>
-            <Input
-              id="update-confirm-message"
-              placeholder="예: 운행을 시작하시겠습니까?"
-              value={config.action?.confirmMessage || ""}
-              onChange={(e) => onUpdateProperty("componentConfig.action.confirmMessage", e.target.value)}
-              className="h-8 text-xs"
-            />
-            <p className="text-muted-foreground mt-1 text-xs">입력하면 변경 전 확인 창이 표시됩니다</p>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <Label htmlFor="update-success-message">성공 메시지 (선택)</Label>
-              <Input
-                id="update-success-message"
-                placeholder="예: 운행이 시작되었습니다."
-                value={config.action?.successMessage || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.successMessage", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-            <div>
-              <Label htmlFor="update-error-message">오류 메시지 (선택)</Label>
-              <Input
-                id="update-error-message"
-                placeholder="예: 운행 시작에 실패했습니다."
-                value={config.action?.errorMessage || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.errorMessage", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-          </div>
-
-          {/* 위치정보 수집 옵션 */}
-          <div className="mt-4 border-t pt-4">
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label htmlFor="update-with-geolocation">위치정보도 함께 수집</Label>
-                <p className="text-muted-foreground text-xs">상태 변경과 함께 현재 GPS 좌표를 수집합니다</p>
-              </div>
-              <Switch
-                id="update-with-geolocation"
-                checked={config.action?.updateWithGeolocation === true}
-                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateWithGeolocation", checked)}
-              />
-            </div>
-
-            {config.action?.updateWithGeolocation && (
-              <div className="mt-3 space-y-3 rounded-md bg-amber-50 p-3 dark:bg-amber-950">
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <Label>
-                      위도 저장 필드 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      placeholder="예: latitude"
-                      value={config.action?.updateGeolocationLatField || ""}
-                      onChange={(e) =>
-                        onUpdateProperty("componentConfig.action.updateGeolocationLatField", e.target.value)
-                      }
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                  <div>
-                    <Label>
-                      경도 저장 필드 <span className="text-destructive">*</span>
-                    </Label>
-                    <Input
-                      placeholder="예: longitude"
-                      value={config.action?.updateGeolocationLngField || ""}
-                      onChange={(e) =>
-                        onUpdateProperty("componentConfig.action.updateGeolocationLngField", e.target.value)
-                      }
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <Label>정확도 필드 (선택)</Label>
-                    <Input
-                      placeholder="예: accuracy"
-                      value={config.action?.updateGeolocationAccuracyField || ""}
-                      onChange={(e) =>
-                        onUpdateProperty("componentConfig.action.updateGeolocationAccuracyField", e.target.value)
-                      }
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                  <div>
-                    <Label>타임스탬프 필드 (선택)</Label>
-                    <Input
-                      placeholder="예: location_time"
-                      value={config.action?.updateGeolocationTimestampField || ""}
-                      onChange={(e) =>
-                        onUpdateProperty("componentConfig.action.updateGeolocationTimestampField", e.target.value)
-                      }
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                </div>
-                <p className="text-[10px] text-amber-700 dark:text-amber-300">
-                  버튼 클릭 시 GPS 위치를 수집하여 위 필드에 저장합니다.
-                </p>
-              </div>
-            )}
-          </div>
-
-          {/* 🆕 연속 위치 추적 설정 */}
-          <div className="flex items-center justify-between">
-            <div>
-              <Label htmlFor="update-with-tracking">연속 위치 추적</Label>
-              <p className="text-muted-foreground text-xs">10초마다 위치를 경로 테이블에 저장합니다</p>
-            </div>
-            <Switch
-              id="update-with-tracking"
-              checked={config.action?.updateWithTracking === true}
-              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateWithTracking", checked)}
-            />
-          </div>
-
-          {config.action?.updateWithTracking && (
-            <div className="mt-3 space-y-3 rounded-md bg-emerald-50 p-3 dark:bg-emerald-950">
-              <div>
-                <Label>
-                  추적 모드 <span className="text-destructive">*</span>
-                </Label>
-                <Select
-                  value={config.action?.updateTrackingMode || "start"}
-                  onValueChange={(value) => onUpdateProperty("componentConfig.action.updateTrackingMode", value)}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="모드 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="start">추적 시작 (운행 시작)</SelectItem>
-                    <SelectItem value="stop">추적 종료 (운행 종료)</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {config.action?.updateTrackingMode === "start" && (
-                <div>
-                  <Label>위치 저장 주기 (초)</Label>
-                  <Input
-                    type="number"
-                    placeholder="10"
-                    value={(config.action?.updateTrackingInterval || 10000) / 1000}
-                    onChange={(e) =>
-                      onUpdateProperty(
-                        "componentConfig.action.updateTrackingInterval",
-                        parseInt(e.target.value) * 1000 || 10000,
-                      )
-                    }
-                    className="h-8 text-xs"
-                    min={5}
-                    max={300}
-                  />
-                  <p className="text-muted-foreground mt-1 text-[10px]">5초 ~ 300초 사이로 설정 (기본: 10초)</p>
-                </div>
-              )}
-
-              <p className="text-[10px] text-emerald-700 dark:text-emerald-300">
-                {config.action?.updateTrackingMode === "start"
-                  ? "버튼 클릭 시 연속 위치 추적이 시작되고, vehicle_location_history 테이블에 경로가 저장됩니다."
-                  : "버튼 클릭 시 진행 중인 위치 추적이 종료됩니다."}
-              </p>
-            </div>
-          )}
-
-          {/* 🆕 버튼 활성화 조건 설정 */}
-          <div className="mt-4 border-t pt-4">
-            <h5 className="text-muted-foreground mb-3 text-xs font-medium">버튼 활성화 조건</h5>
-
-            {/* 출발지/도착지 필수 체크 */}
-            <div className="flex items-center justify-between">
-              <div>
-                <Label htmlFor="require-location">출발지/도착지 필수</Label>
-                <p className="text-muted-foreground text-xs">선택하지 않으면 버튼 비활성화</p>
-              </div>
-              <Switch
-                id="require-location"
-                checked={config.action?.requireLocationFields === true}
-                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.requireLocationFields", checked)}
-              />
-            </div>
-
-            {config.action?.requireLocationFields && (
-              <div className="mt-3 space-y-2 rounded-md bg-amber-50 p-3 dark:bg-orange-950">
-                <div className="grid grid-cols-2 gap-2">
-                  <div>
-                    <Label>출발지 필드명</Label>
-                    <Input
-                      placeholder="departure"
-                      value={config.action?.trackingDepartureField || "departure"}
-                      onChange={(e) =>
-                        onUpdateProperty("componentConfig.action.trackingDepartureField", e.target.value)
-                      }
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                  <div>
-                    <Label>도착지 필드명</Label>
-                    <Input
-                      placeholder="destination"
-                      value={config.action?.trackingArrivalField || "destination"}
-                      onChange={(e) => onUpdateProperty("componentConfig.action.trackingArrivalField", e.target.value)}
-                      className="h-8 text-xs"
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
-
-            {/* 상태 기반 활성화 조건 */}
-            <div className="mt-4 flex items-center justify-between">
-              <div>
-                <Label htmlFor="enable-on-status">상태 기반 활성화</Label>
-                <p className="text-muted-foreground text-xs">특정 상태일 때만 버튼 활성화</p>
-              </div>
-              <Switch
-                id="enable-on-status"
-                checked={config.action?.enableOnStatusCheck === true}
-                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.enableOnStatusCheck", checked)}
-              />
-            </div>
-
-            {config.action?.enableOnStatusCheck && (
-              <div className="mt-3 space-y-2 rounded-md bg-purple-50 p-3 dark:bg-purple-950">
-                <div>
-                  <Label>상태 조회 테이블</Label>
-                  <Select
-                    value={config.action?.statusCheckTableName || "vehicles"}
-                    onValueChange={(value) => onUpdateProperty("componentConfig.action.statusCheckTableName", value)}
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {availableTables.map((table) => (
-                        <SelectItem key={table.name} value={table.name} className="text-xs">
-                          {table.label || table.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <p className="text-muted-foreground mt-1 text-[10px]">상태를 조회할 테이블 (기본: vehicles)</p>
-                </div>
-                <div>
-                  <Label>조회 키 필드</Label>
-                  <Input
-                    placeholder="user_id"
-                    value={config.action?.statusCheckKeyField || "user_id"}
-                    onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckKeyField", e.target.value)}
-                    className="h-8 text-xs"
-                  />
-                  <p className="text-muted-foreground mt-1 text-[10px]">
-                    현재 로그인 사용자 ID로 조회할 필드 (기본: user_id)
-                  </p>
-                </div>
-                <div>
-                  <Label>상태 컬럼명</Label>
-                  <Input
-                    placeholder="status"
-                    value={config.action?.statusCheckField || "status"}
-                    onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckField", e.target.value)}
-                    className="h-8 text-xs"
-                  />
-                  <p className="text-muted-foreground mt-1 text-[10px]">상태 값이 저장된 컬럼명 (기본: status)</p>
-                </div>
-                <div>
-                  <Label>상태 조건</Label>
-                  <Select
-                    value={config.action?.statusConditionType || "enableOn"}
-                    onValueChange={(value) => onUpdateProperty("componentConfig.action.statusConditionType", value)}
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="enableOn">이 상태일 때만 활성화</SelectItem>
-                      <SelectItem value="disableOn">이 상태일 때 비활성화</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div>
-                  <Label>상태값 (쉼표로 구분)</Label>
-                  <Input
-                    placeholder="예: active, inactive"
-                    value={config.action?.statusConditionValues || ""}
-                    onChange={(e) => onUpdateProperty("componentConfig.action.statusConditionValues", e.target.value)}
-                    className="h-8 text-xs"
-                  />
-                  <p className="text-muted-foreground mt-1 text-[10px]">여러 상태값은 쉼표(,)로 구분</p>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
-            <p className="text-xs text-primary dark:text-primary/60">
-              <strong>사용 예시:</strong>
-              <br />
-              - 운행 시작: status를 &quot;active&quot;로 + 연속 추적 시작
-              <br />
-              - 운행 종료: status를 &quot;completed&quot;로 + 연속 추적 종료
-              <br />- 공차등록: status를 &quot;inactive&quot;로 + 1회성 위치정보 수집
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* 데이터 전달 액션 설정 */}
-      {localInputs.actionType === "transferData" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">📦 데이터 전달 설정</h4>
-
-          {/* 소스 컴포넌트 선택 (Combobox) */}
-          <div>
-            <Label>
-              소스 컴포넌트 <span className="text-destructive">*</span>
-            </Label>
-            <Select
-              value={config.action?.dataTransfer?.sourceComponentId || ""}
-              onValueChange={(value) =>
-                onUpdateProperty("componentConfig.action.dataTransfer.sourceComponentId", value)
-              }
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder="데이터를 가져올 컴포넌트 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                {/* 자동 탐색 옵션 (레이어별 테이블이 다를 때 유용) */}
-                <SelectItem value="__auto__">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium">자동 탐색 (현재 활성 테이블)</span>
-                    <span className="text-muted-foreground text-[10px]">(auto)</span>
-                  </div>
-                </SelectItem>
-                {/* 데이터 제공 가능한 컴포넌트 필터링 (모든 레이어 포함) */}
-                {allComponents
-                  .filter((comp: any) => {
-                    const type = comp.componentType || comp.type || "";
-                    return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
-                      type.includes(t),
-                    );
-                  })
-                  .map((comp: any) => {
-                    const compType = comp.componentType || comp.type || "unknown";
-                    const compLabel = comp.label || comp.componentConfig?.title || comp.id;
-                    const layerName = comp._layerName;
-                    return (
-                      <SelectItem key={comp.id} value={comp.id}>
-                        <div className="flex items-center gap-2">
-                          <span className="text-xs font-medium">{compLabel}</span>
-                          <span className="text-muted-foreground text-[10px]">({compType})</span>
-                          {layerName && (
-                            <span className="rounded bg-amber-100 px-1 text-[9px] text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
-                              {layerName}
-                            </span>
-                          )}
-                        </div>
-                      </SelectItem>
-                    );
-                  })}
-                {allComponents.filter((comp: any) => {
-                  const type = comp.componentType || comp.type || "";
-                  return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
-                    type.includes(t),
-                  );
-                }).length === 0 && (
-                  <SelectItem value="__none__" disabled>
-                    데이터 제공 가능한 컴포넌트가 없습니다
-                  </SelectItem>
-                )}
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground mt-1 text-xs">
-              레이어별로 다른 테이블이 있을 경우 "자동 탐색"을 선택하면 현재 활성화된 레이어의 테이블을 자동으로
-              사용합니다
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="target-type">
-              타겟 타입 <span className="text-destructive">*</span>
-            </Label>
-            <Select
-              value={config.action?.dataTransfer?.targetType || "component"}
-              onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.targetType", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="component">같은 화면의 컴포넌트</SelectItem>
-                <SelectItem value="splitPanel">분할 패널 반대편 화면</SelectItem>
-                <SelectItem value="screen" disabled>
-                  다른 화면 (구현 예정)
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            {config.action?.dataTransfer?.targetType === "splitPanel" && (
-              <p className="text-muted-foreground mt-1 text-[10px]">
-                이 버튼이 분할 패널 내부에 있어야 합니다. 좌측 화면에서 우측으로, 또는 우측에서 좌측으로 데이터가
-                전달됩니다.
-              </p>
-            )}
-          </div>
-
-          {/* 타겟 컴포넌트 선택 (같은 화면의 컴포넌트일 때만) */}
-          {config.action?.dataTransfer?.targetType === "component" && (
-            <div>
-              <Label>
-                타겟 컴포넌트 <span className="text-destructive">*</span>
-              </Label>
-              <Select
-                value={config.action?.dataTransfer?.targetComponentId || ""}
-                onValueChange={(value) => {
-                  onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", value);
-                  // 선택한 컴포넌트가 다른 레이어에 있으면 targetLayerId도 저장
-                  const selectedComp = allComponents.find((c: any) => c.id === value);
-                  if (selectedComp && (selectedComp as any)._layerId) {
-                    onUpdateProperty(
-                      "componentConfig.action.dataTransfer.targetLayerId",
-                      (selectedComp as any)._layerId,
-                    );
-                  } else {
-                    onUpdateProperty("componentConfig.action.dataTransfer.targetLayerId", undefined);
-                  }
-                }}
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="데이터를 받을 컴포넌트 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {/* 데이터 수신 가능한 컴포넌트 필터링 (모든 레이어 포함, 소스와 다른 컴포넌트만) */}
-                  {allComponents
-                    .filter((comp: any) => {
-                      const type = comp.componentType || comp.type || "";
-                      const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some(
-                        (t) => type.includes(t),
-                      );
-                      return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
-                    })
-                    .map((comp: any) => {
-                      const compType = comp.componentType || comp.type || "unknown";
-                      const compLabel = comp.label || comp.componentConfig?.title || comp.id;
-                      const layerName = comp._layerName;
-                      return (
-                        <SelectItem key={comp.id} value={comp.id}>
-                          <div className="flex items-center gap-2">
-                            <span className="text-xs font-medium">{compLabel}</span>
-                            <span className="text-muted-foreground text-[10px]">({compType})</span>
-                            {layerName && (
-                              <span className="rounded bg-amber-100 px-1 text-[9px] text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
-                                {layerName}
-                              </span>
-                            )}
-                          </div>
-                        </SelectItem>
-                      );
-                    })}
-                  {allComponents.filter((comp: any) => {
-                    const type = comp.componentType || comp.type || "";
-                    const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
-                      type.includes(t),
-                    );
-                    return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
-                  }).length === 0 && (
-                    <SelectItem value="__none__" disabled>
-                      데이터 수신 가능한 컴포넌트가 없습니다
-                    </SelectItem>
-                  )}
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-xs">테이블, 반복 필드 그룹 등 데이터를 받는 컴포넌트</p>
-            </div>
-          )}
-
-          {/* 분할 패널 반대편 타겟 설정 */}
-          {config.action?.dataTransfer?.targetType === "splitPanel" && (
-            <div>
-              <Label>타겟 컴포넌트 ID (선택사항)</Label>
-              <Input
-                value={config.action?.dataTransfer?.targetComponentId || ""}
-                onChange={(e) =>
-                  onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", e.target.value)
-                }
-                placeholder="비워두면 첫 번째 수신 가능 컴포넌트로 전달"
-                className="h-8 text-xs"
-              />
-              <p className="text-muted-foreground mt-1 text-xs">
-                반대편 화면의 특정 컴포넌트 ID를 지정하거나, 비워두면 자동으로 첫 번째 수신 가능 컴포넌트로 전달됩니다.
-              </p>
-            </div>
-          )}
-
-          <div>
-            <Label htmlFor="transfer-mode">데이터 전달 모드</Label>
-            <Select
-              value={config.action?.dataTransfer?.mode || "append"}
-              onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.mode", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="append">추가 (Append)</SelectItem>
-                <SelectItem value="replace">교체 (Replace)</SelectItem>
-                <SelectItem value="merge">병합 (Merge)</SelectItem>
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground mt-1 text-xs">기존 데이터를 어떻게 처리할지 선택</p>
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="clear-after-transfer">전달 후 소스 선택 초기화</Label>
-              <p className="text-muted-foreground text-xs">데이터 전달 후 소스의 선택을 해제합니다</p>
-            </div>
-            <Switch
-              id="clear-after-transfer"
-              checked={config.action?.dataTransfer?.clearAfterTransfer === true}
-              onCheckedChange={(checked) =>
-                onUpdateProperty("componentConfig.action.dataTransfer.clearAfterTransfer", checked)
-              }
-            />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <div className="space-y-0.5">
-              <Label htmlFor="confirm-before-transfer">전달 전 확인 메시지</Label>
-              <p className="text-muted-foreground text-xs">데이터 전달 전 확인 다이얼로그를 표시합니다</p>
-            </div>
-            <Switch
-              id="confirm-before-transfer"
-              checked={config.action?.dataTransfer?.confirmBeforeTransfer === true}
-              onCheckedChange={(checked) =>
-                onUpdateProperty("componentConfig.action.dataTransfer.confirmBeforeTransfer", checked)
-              }
-            />
-          </div>
-
-          {config.action?.dataTransfer?.confirmBeforeTransfer && (
-            <div>
-              <Label htmlFor="confirm-message">확인 메시지</Label>
-              <Input
-                id="confirm-message"
-                placeholder="선택한 항목을 전달하시겠습니까?"
-                value={config.action?.dataTransfer?.confirmMessage || ""}
-                onChange={(e) => onUpdateProperty("componentConfig.action.dataTransfer.confirmMessage", e.target.value)}
-                className="h-8 text-xs"
-              />
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <Label>검증 설정</Label>
-            <div className="space-y-2 rounded-md border p-3">
-              <div className="flex items-center gap-2">
-                <Label htmlFor="min-selection" className="text-xs">
-                  최소 선택 개수
-                </Label>
-                <Input
-                  id="min-selection"
-                  type="number"
-                  placeholder="0"
-                  value={config.action?.dataTransfer?.validation?.minSelection || ""}
-                  onChange={(e) =>
-                    onUpdateProperty(
-                      "componentConfig.action.dataTransfer.validation.minSelection",
-                      parseInt(e.target.value) || 0,
-                    )
-                  }
-                  className="h-8 w-20 text-xs"
-                />
-              </div>
-              <div className="flex items-center gap-2">
-                <Label htmlFor="max-selection" className="text-xs">
-                  최대 선택 개수
-                </Label>
-                <Input
-                  id="max-selection"
-                  type="number"
-                  placeholder="제한없음"
-                  value={config.action?.dataTransfer?.validation?.maxSelection || ""}
-                  onChange={(e) =>
-                    onUpdateProperty(
-                      "componentConfig.action.dataTransfer.validation.maxSelection",
-                      parseInt(e.target.value) || undefined,
-                    )
-                  }
-                  className="h-8 w-20 text-xs"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            <Label>추가 데이터 소스 (선택사항)</Label>
-            <p className="text-muted-foreground text-xs">
-              조건부 컨테이너의 카테고리 값 등 추가 데이터를 함께 전달할 수 있습니다
-            </p>
-            <div className="space-y-2 rounded-md border p-3">
-              <div>
-                <Label className="text-xs">추가 컴포넌트</Label>
-                <Select
-                  value={config.action?.dataTransfer?.additionalSources?.[0]?.componentId || ""}
-                  onValueChange={(value) => {
-                    const currentSources = config.action?.dataTransfer?.additionalSources || [];
-                    const newSources = [...currentSources];
-                    if (newSources.length === 0) {
-                      newSources.push({ componentId: value, fieldName: "" });
-                    } else {
-                      newSources[0] = { ...newSources[0], componentId: value };
-                    }
-                    onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
-                  }}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="추가 데이터 컴포넌트 선택 (선택사항)" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__clear__">
-                      <span className="text-muted-foreground">선택 안 함</span>
-                    </SelectItem>
-                    {/* 추가 데이터 제공 가능한 컴포넌트 (조건부 컨테이너, 셀렉트박스 등) */}
-                    {allComponents
-                      .filter((comp: any) => {
-                        const type = comp.componentType || comp.type || "";
-                        // 소스/타겟과 다른 컴포넌트 중 값을 제공할 수 있는 타입
-                        return ["conditional-container", "select-basic", "select", "combobox"].some((t) =>
-                          type.includes(t),
-                        );
-                      })
-                      .map((comp: any) => {
-                        const compType = comp.componentType || comp.type || "unknown";
-                        const compLabel = comp.label || comp.componentConfig?.controlLabel || comp.id;
-                        return (
-                          <SelectItem key={comp.id} value={comp.id}>
-                            <div className="flex items-center gap-2">
-                              <span className="text-xs font-medium">{compLabel}</span>
-                              <span className="text-muted-foreground text-[10px]">({compType})</span>
-                            </div>
-                          </SelectItem>
-                        );
-                      })}
-                  </SelectContent>
-                </Select>
-                <p className="text-muted-foreground mt-1 text-xs">
-                  조건부 컨테이너, 셀렉트박스 등 (카테고리 값 전달용)
-                </p>
-              </div>
-              <div>
-                <Label htmlFor="additional-field-name" className="text-xs">
-                  타겟 필드명 (선택사항)
-                </Label>
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
-                      {(() => {
-                        const fieldName = config.action?.dataTransfer?.additionalSources?.[0]?.fieldName;
-                        if (!fieldName) return "필드 선택 (비워두면 전체 데이터)";
-                        const cols = mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns;
-                        const found = cols.find((c) => c.name === fieldName);
-                        return found ? `${found.label || found.name}` : fieldName;
-                      })()}
-                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[240px] p-0" align="start">
-                    <Command>
-                      <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
-                      <CommandList>
-                        <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
-                        <CommandGroup>
-                          <CommandItem
-                            value="__none__"
-                            onSelect={() => {
-                              const currentSources = config.action?.dataTransfer?.additionalSources || [];
-                              const newSources = [...currentSources];
-                              if (newSources.length === 0) {
-                                newSources.push({ componentId: "", fieldName: "" });
-                              } else {
-                                newSources[0] = { ...newSources[0], fieldName: "" };
-                              }
-                              onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
-                            }}
-                            className="text-xs"
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-3 w-3",
-                                !config.action?.dataTransfer?.additionalSources?.[0]?.fieldName
-                                  ? "opacity-100"
-                                  : "opacity-0",
-                              )}
-                            />
-                            <span className="text-muted-foreground">선택 안 함 (전체 데이터 병합)</span>
-                          </CommandItem>
-                          {(mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns).map((col) => (
-                            <CommandItem
-                              key={col.name}
-                              value={`${col.label || ""} ${col.name}`}
-                              onSelect={() => {
-                                const currentSources = config.action?.dataTransfer?.additionalSources || [];
-                                const newSources = [...currentSources];
-                                if (newSources.length === 0) {
-                                  newSources.push({ componentId: "", fieldName: col.name });
-                                } else {
-                                  newSources[0] = { ...newSources[0], fieldName: col.name };
-                                }
-                                onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
-                              }}
-                              className="text-xs"
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-3 w-3",
-                                  config.action?.dataTransfer?.additionalSources?.[0]?.fieldName === col.name
-                                    ? "opacity-100"
-                                    : "opacity-0",
-                                )}
-                              />
-                              <span className="font-medium">{col.label || col.name}</span>
-                              {col.label && col.label !== col.name && (
-                                <span className="text-muted-foreground ml-1 text-[10px]">({col.name})</span>
-                              )}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </CommandList>
-                    </Command>
-                  </PopoverContent>
-                </Popover>
-                <p className="text-muted-foreground mt-1 text-xs">추가 데이터가 저장될 타겟 테이블 컬럼</p>
-              </div>
-            </div>
-          </div>
-
-          {/* 멀티 테이블 필드 매핑 */}
-          <div className="space-y-3">
-            <Label>필드 매핑 설정</Label>
-
-            {/* 타겟 테이블 (공통) */}
-            <div className="space-y-1">
-              <Label className="text-xs">타겟 테이블</Label>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
-                    {config.action?.dataTransfer?.targetTable
-                      ? availableTables.find((t) => t.name === config.action?.dataTransfer?.targetTable)?.label ||
-                        config.action?.dataTransfer?.targetTable
-                      : "타겟 테이블 선택"}
-                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-[250px] p-0" align="start">
-                  <Command>
-                    <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
-                    <CommandList>
-                      <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
-                      <CommandGroup>
-                        {availableTables.map((table) => (
-                          <CommandItem
-                            key={table.name}
-                            value={`${table.label} ${table.name}`}
-                            onSelect={() => {
-                              onUpdateProperty("componentConfig.action.dataTransfer.targetTable", table.name);
-                            }}
-                            className="text-xs"
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-3 w-3",
-                                config.action?.dataTransfer?.targetTable === table.name ? "opacity-100" : "opacity-0",
-                              )}
-                            />
-                            <span className="font-medium">{table.label}</span>
-                            <span className="text-muted-foreground ml-1">({table.name})</span>
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            {/* 소스 테이블 매핑 그룹 */}
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label className="text-xs">소스 테이블별 매핑</Label>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-6 text-[10px]"
-                  onClick={() => {
-                    const currentMappings = config.action?.dataTransfer?.multiTableMappings || [];
-                    onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", [
-                      ...currentMappings,
-                      { sourceTable: "", mappingRules: [] },
-                    ]);
-                    setActiveMappingGroupIndex(currentMappings.length);
-                  }}
-                  disabled={!config.action?.dataTransfer?.targetTable}
-                >
-                  <Plus className="mr-1 h-3 w-3" />
-                  소스 테이블 추가
-                </Button>
-              </div>
-              <p className="text-muted-foreground text-[10px]">
-                여러 소스 테이블에서 데이터를 전달할 때, 각 테이블별로 매핑 규칙을 설정합니다. 런타임에 소스 테이블을
-                자동 감지합니다.
-              </p>
-
-              {!config.action?.dataTransfer?.targetTable ? (
-                <div className="rounded-md border border-dashed p-3 text-center">
-                  <p className="text-muted-foreground text-xs">먼저 타겟 테이블을 선택하세요.</p>
-                </div>
-              ) : !(config.action?.dataTransfer?.multiTableMappings || []).length ? (
-                <div className="rounded-md border border-dashed p-3 text-center">
-                  <p className="text-muted-foreground text-xs">매핑 그룹이 없습니다. 소스 테이블을 추가하세요.</p>
-                </div>
-              ) : (
-                <div className="space-y-2">
-                  {/* 소스 테이블 탭 */}
-                  <div className="flex flex-wrap gap-1">
-                    {(config.action?.dataTransfer?.multiTableMappings || []).map((group: any, gIdx: number) => (
-                      <div key={gIdx} className="flex items-center gap-0.5">
-                        <Button
-                          type="button"
-                          variant={activeMappingGroupIndex === gIdx ? "default" : "outline"}
-                          size="sm"
-                          className="h-6 text-[10px]"
-                          onClick={() => setActiveMappingGroupIndex(gIdx)}
-                        >
-                          {group.sourceTable
-                            ? availableTables.find((t) => t.name === group.sourceTable)?.label || group.sourceTable
-                            : `그룹 ${gIdx + 1}`}
-                          {group.mappingRules?.length > 0 && (
-                            <span className="bg-primary/20 ml-1 rounded-full px-1 text-[9px]">
-                              {group.mappingRules.length}
-                            </span>
-                          )}
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="text-destructive hover:bg-destructive/10 h-5 w-5"
-                          onClick={() => {
-                            const mappings = [...(config.action?.dataTransfer?.multiTableMappings || [])];
-                            mappings.splice(gIdx, 1);
-                            onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
-                            if (activeMappingGroupIndex >= mappings.length) {
-                              setActiveMappingGroupIndex(Math.max(0, mappings.length - 1));
-                            }
-                          }}
-                        >
-                          <X className="h-3 w-3" />
-                        </Button>
-                      </div>
-                    ))}
-                  </div>
-
-                  {/* 활성 그룹 편집 영역 */}
-                  {(() => {
-                    const multiMappings = config.action?.dataTransfer?.multiTableMappings || [];
-                    const activeGroup = multiMappings[activeMappingGroupIndex];
-                    if (!activeGroup) return null;
-
-                    const activeSourceTable = activeGroup.sourceTable || "";
-                    const activeSourceColumns = mappingSourceColumnsMap[activeSourceTable] || [];
-                    const activeRules: any[] = activeGroup.mappingRules || [];
-
-                    const updateGroupField = (field: string, value: any) => {
-                      const mappings = [...multiMappings];
-                      mappings[activeMappingGroupIndex] = { ...mappings[activeMappingGroupIndex], [field]: value };
-                      onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
-                    };
-
-                    return (
-                      <div className="space-y-2 rounded-md border p-3">
-                        {/* 소스 테이블 선택 */}
-                        <div className="space-y-1">
-                          <Label className="text-xs">소스 테이블</Label>
-                          <Popover>
-                            <PopoverTrigger asChild>
-                              <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
-                                {activeSourceTable
-                                  ? availableTables.find((t) => t.name === activeSourceTable)?.label ||
-                                    activeSourceTable
-                                  : "소스 테이블 선택"}
-                                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                              </Button>
-                            </PopoverTrigger>
-                            <PopoverContent className="w-[250px] p-0" align="start">
-                              <Command>
-                                <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
-                                <CommandList>
-                                  <CommandEmpty className="py-2 text-center text-xs">
-                                    테이블을 찾을 수 없습니다
-                                  </CommandEmpty>
-                                  <CommandGroup>
-                                    {availableTables.map((table) => (
-                                      <CommandItem
-                                        key={table.name}
-                                        value={`${table.label} ${table.name}`}
-                                        onSelect={async () => {
-                                          updateGroupField("sourceTable", table.name);
-                                          if (!mappingSourceColumnsMap[table.name]) {
-                                            const cols = await loadMappingColumns(table.name);
-                                            setMappingSourceColumnsMap((prev) => ({ ...prev, [table.name]: cols }));
-                                          }
-                                        }}
-                                        className="text-xs"
-                                      >
-                                        <Check
-                                          className={cn(
-                                            "mr-2 h-3 w-3",
-                                            activeSourceTable === table.name ? "opacity-100" : "opacity-0",
-                                          )}
-                                        />
-                                        <span className="font-medium">{table.label}</span>
-                                        <span className="text-muted-foreground ml-1">({table.name})</span>
-                                      </CommandItem>
-                                    ))}
-                                  </CommandGroup>
-                                </CommandList>
-                              </Command>
-                            </PopoverContent>
-                          </Popover>
-                        </div>
-
-                        {/* 매핑 규칙 목록 */}
-                        <div className="space-y-1">
-                          <div className="flex items-center justify-between">
-                            <Label className="text-[10px]">매핑 규칙</Label>
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              className="h-5 text-[10px]"
-                              onClick={() => {
-                                updateGroupField("mappingRules", [
-                                  ...activeRules,
-                                  { sourceField: "", targetField: "" },
-                                ]);
-                              }}
-                              disabled={!activeSourceTable}
-                            >
-                              <Plus className="mr-1 h-3 w-3" />
-                              추가
-                            </Button>
-                          </div>
-
-                          {!activeSourceTable ? (
-                            <p className="text-muted-foreground text-[10px]">소스 테이블을 먼저 선택하세요.</p>
-                          ) : activeRules.length === 0 ? (
-                            <p className="text-muted-foreground text-[10px]">매핑 없음 (동일 필드명 자동 매핑)</p>
-                          ) : (
-                            activeRules.map((rule: any, rIdx: number) => {
-                              const popoverKeyS = `${activeMappingGroupIndex}-${rIdx}-s`;
-                              const popoverKeyT = `${activeMappingGroupIndex}-${rIdx}-t`;
-                              return (
-                                <div key={rIdx} className="bg-background flex items-center gap-2 rounded-md border p-2">
-                                  <div className="flex-1">
-                                    <Popover
-                                      open={mappingSourcePopoverOpen[popoverKeyS] || false}
-                                      onOpenChange={(open) =>
-                                        setMappingSourcePopoverOpen((prev) => ({ ...prev, [popoverKeyS]: open }))
-                                      }
-                                    >
-                                      <PopoverTrigger asChild>
-                                        <Button
-                                          variant="outline"
-                                          role="combobox"
-                                          className="h-7 w-full justify-between text-xs"
-                                        >
-                                          {rule.sourceField
-                                            ? activeSourceColumns.find((c) => c.name === rule.sourceField)?.label ||
-                                              rule.sourceField
-                                            : "소스 필드"}
-                                          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
-                                        </Button>
-                                      </PopoverTrigger>
-                                      <PopoverContent className="w-[200px] p-0" align="start">
-                                        <Command>
-                                          <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
-                                          <CommandList>
-                                            <CommandEmpty className="py-2 text-center text-xs">컬럼 없음</CommandEmpty>
-                                            <CommandGroup>
-                                              {activeSourceColumns.map((col) => (
-                                                <CommandItem
-                                                  key={col.name}
-                                                  value={`${col.label} ${col.name}`}
-                                                  onSelect={() => {
-                                                    const newRules = [...activeRules];
-                                                    newRules[rIdx] = { ...newRules[rIdx], sourceField: col.name };
-                                                    updateGroupField("mappingRules", newRules);
-                                                    setMappingSourcePopoverOpen((prev) => ({
-                                                      ...prev,
-                                                      [popoverKeyS]: false,
-                                                    }));
-                                                  }}
-                                                  className="text-xs"
-                                                >
-                                                  <Check
-                                                    className={cn(
-                                                      "mr-2 h-3 w-3",
-                                                      rule.sourceField === col.name ? "opacity-100" : "opacity-0",
-                                                    )}
-                                                  />
-                                                  <span>{col.label}</span>
-                                                  {col.label !== col.name && (
-                                                    <span className="text-muted-foreground ml-1">({col.name})</span>
-                                                  )}
-                                                </CommandItem>
-                                              ))}
-                                            </CommandGroup>
-                                          </CommandList>
-                                        </Command>
-                                      </PopoverContent>
-                                    </Popover>
-                                  </div>
-
-                                  <span className="text-muted-foreground text-xs">→</span>
-
-                                  <div className="flex-1">
-                                    <Popover
-                                      open={mappingTargetPopoverOpen[popoverKeyT] || false}
-                                      onOpenChange={(open) =>
-                                        setMappingTargetPopoverOpen((prev) => ({ ...prev, [popoverKeyT]: open }))
-                                      }
-                                    >
-                                      <PopoverTrigger asChild>
-                                        <Button
-                                          variant="outline"
-                                          role="combobox"
-                                          className="h-7 w-full justify-between text-xs"
-                                        >
-                                          {rule.targetField
-                                            ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label ||
-                                              rule.targetField
-                                            : "타겟 필드"}
-                                          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
-                                        </Button>
-                                      </PopoverTrigger>
-                                      <PopoverContent className="w-[200px] p-0" align="start">
-                                        <Command>
-                                          <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
-                                          <CommandList>
-                                            <CommandEmpty className="py-2 text-center text-xs">컬럼 없음</CommandEmpty>
-                                            <CommandGroup>
-                                              {mappingTargetColumns.map((col) => (
-                                                <CommandItem
-                                                  key={col.name}
-                                                  value={`${col.label} ${col.name}`}
-                                                  onSelect={() => {
-                                                    const newRules = [...activeRules];
-                                                    newRules[rIdx] = { ...newRules[rIdx], targetField: col.name };
-                                                    updateGroupField("mappingRules", newRules);
-                                                    setMappingTargetPopoverOpen((prev) => ({
-                                                      ...prev,
-                                                      [popoverKeyT]: false,
-                                                    }));
-                                                  }}
-                                                  className="text-xs"
-                                                >
-                                                  <Check
-                                                    className={cn(
-                                                      "mr-2 h-3 w-3",
-                                                      rule.targetField === col.name ? "opacity-100" : "opacity-0",
-                                                    )}
-                                                  />
-                                                  <span>{col.label}</span>
-                                                  {col.label !== col.name && (
-                                                    <span className="text-muted-foreground ml-1">({col.name})</span>
-                                                  )}
-                                                </CommandItem>
-                                              ))}
-                                            </CommandGroup>
-                                          </CommandList>
-                                        </Command>
-                                      </PopoverContent>
-                                    </Popover>
-                                  </div>
-
-                                  <Button
-                                    type="button"
-                                    variant="ghost"
-                                    size="icon"
-                                    className="text-destructive hover:bg-destructive/10 h-7 w-7"
-                                    onClick={() => {
-                                      const newRules = [...activeRules];
-                                      newRules.splice(rIdx, 1);
-                                      updateGroupField("mappingRules", newRules);
-                                    }}
-                                  >
-                                    <X className="h-3 w-3" />
-                                  </Button>
-                                </div>
-                              );
-                            })
-                          )}
-                        </div>
-                      </div>
-                    );
-                  })()}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
-            <p className="text-xs text-primary dark:text-primary/60">
-              <strong>사용 방법:</strong>
-              <br />
-              1. 소스 컴포넌트에서 데이터를 선택합니다
-              <br />
-              2. 소스 테이블별로 필드 매핑 규칙을 설정합니다
-              <br />
-              3. 이 버튼을 클릭하면 소스 테이블을 자동 감지하여 매핑된 데이터가 타겟으로 전달됩니다
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* 🆕 즉시 저장(quickInsert) 액션 설정 */}
-      {component.componentConfig?.action?.type === "quickInsert" && (
-        <QuickInsertConfigSection
-          component={component}
-          onUpdateProperty={onUpdateProperty}
-          allComponents={allComponents}
-          currentTableName={currentTableName}
-        />
-      )}
-
-      {/* 결재 요청(approval) 액션 설정 */}
-      {localInputs.actionType === "approval" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">결재 요청 설정</h4>
-          <p className="text-muted-foreground text-xs">
-            버튼 클릭 시 결재 요청 모달이 열립니다. 결재 유형을 선택하면 기본 결재선이 자동으로 세팅됩니다.
-          </p>
-
-          <div>
-            <Label htmlFor="approval-definition" className="text-xs sm:text-sm">
-              결재 유형
-            </Label>
-            <Select
-              value={String(component.componentConfig?.action?.approvalDefinitionId || "")}
-              onValueChange={(value) => {
-                onUpdateProperty(
-                  "componentConfig.action.approvalDefinitionId",
-                  value === "none" ? null : Number(value),
-                );
-              }}
-            >
-              <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
-                <SelectValue placeholder={approvalDefinitionsLoading ? "로딩 중..." : "결재 유형 선택 (선택사항)"} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="none">유형 없음 (직접 설정)</SelectItem>
-                {approvalDefinitions.map((def) => (
-                  <SelectItem key={def.definition_id} value={String(def.definition_id)}>
-                    {def.definition_name}
-                    {def.description ? ` - ${def.description}` : ""}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
-              결재 유형을 선택하면 기본 결재선 템플릿이 자동 적용됩니다
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="approval-target-table" className="text-xs sm:text-sm">
-              대상 테이블
-            </Label>
-            <Input
-              id="approval-target-table"
-              placeholder={currentTableName || "예: purchase_orders"}
-              value={component.componentConfig?.action?.approvalTargetTable || currentTableName || ""}
-              onChange={(e) => onUpdateProperty("componentConfig.action.approvalTargetTable", e.target.value)}
-              className="h-8 text-xs sm:h-10 sm:text-sm"
-              readOnly={!!currentTableName && !component.componentConfig?.action?.approvalTargetTable}
-            />
-            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
-              {currentTableName
-                ? `현재 화면 테이블 "${currentTableName}" 자동 적용됨`
-                : "결재 대상 레코드가 저장된 테이블명"}
-            </p>
-          </div>
-
-          <div>
-            <Label htmlFor="approval-record-id-field" className="text-xs sm:text-sm">
-              레코드 ID 필드명
-            </Label>
-            <Input
-              id="approval-record-id-field"
-              placeholder="예: id, purchase_id"
-              value={component.componentConfig?.action?.approvalRecordIdField || "id"}
-              onChange={(e) => onUpdateProperty("componentConfig.action.approvalRecordIdField", e.target.value)}
-              className="h-8 text-xs sm:h-10 sm:text-sm"
-            />
-            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">현재 선택된 레코드의 PK 컬럼명</p>
-          </div>
-        </div>
-      )}
-
-      {/* 🆕 이벤트 발송 액션 설정 */}
-      {localInputs.actionType === "event" && (
-        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-          <h4 className="text-foreground text-sm font-medium">이벤트 발송 설정</h4>
-          <p className="text-muted-foreground text-xs">
-            버튼 클릭 시 V2 이벤트 버스를 통해 이벤트를 발송합니다. 다른 컴포넌트나 서비스에서 이 이벤트를 수신하여
-            처리할 수 있습니다.
-          </p>
-
-          <div>
-            <Label htmlFor="event-name">이벤트 이름</Label>
-            <Select
-              value={component.componentConfig?.action?.eventConfig?.eventName || ""}
-              onValueChange={(value) => {
-                onUpdateProperty("componentConfig.action.eventConfig.eventName", value);
-              }}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder="이벤트 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="SCHEDULE_GENERATE_REQUEST">스케줄 자동 생성 요청</SelectItem>
-                <SelectItem value="TABLE_REFRESH">테이블 새로고침</SelectItem>
-                <SelectItem value="DATA_CHANGED">데이터 변경 알림</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-          {component.componentConfig?.action?.eventConfig?.eventName === "SCHEDULE_GENERATE_REQUEST" && (
-            <div className="border-primary/20 space-y-3 border-l-2 pl-4">
-              <div>
-                <Label>스케줄 유형</Label>
-                <Select
-                  value={component.componentConfig?.action?.eventConfig?.eventPayload?.scheduleType || "PRODUCTION"}
-                  onValueChange={(value) => {
-                    onUpdateProperty("componentConfig.action.eventConfig.eventPayload.scheduleType", value);
-                  }}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder="스케줄 유형 선택" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="PRODUCTION">생산 스케줄</SelectItem>
-                    <SelectItem value="DELIVERY">배송 스케줄</SelectItem>
-                    <SelectItem value="MAINTENANCE">정비 스케줄</SelectItem>
-                    <SelectItem value="CUSTOM">커스텀</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div>
-                <Label>리드타임 (일)</Label>
-                <Input
-                  type="number"
-                  className="h-8 text-xs"
-                  placeholder="3"
-                  value={
-                    component.componentConfig?.action?.eventConfig?.eventPayload?.config?.scheduling?.leadTimeDays || 3
-                  }
-                  onChange={(e) => {
-                    onUpdateProperty(
-                      "componentConfig.action.eventConfig.eventPayload.config.scheduling.leadTimeDays",
-                      parseInt(e.target.value) || 3,
-                    );
-                  }}
-                />
-              </div>
-
-              <div>
-                <Label>일일 최대 생산량</Label>
-                <Input
-                  type="number"
-                  className="h-8 text-xs"
-                  placeholder="100"
-                  value={
-                    component.componentConfig?.action?.eventConfig?.eventPayload?.config?.scheduling
-                      ?.maxDailyCapacity || 100
-                  }
-                  onChange={(e) => {
-                    onUpdateProperty(
-                      "componentConfig.action.eventConfig.eventPayload.config.scheduling.maxDailyCapacity",
-                      parseInt(e.target.value) || 100,
-                    );
-                  }}
-                />
-              </div>
-
-              <div className="rounded-md bg-primary/10 p-2 dark:bg-primary/10">
-                <p className="text-xs text-primary dark:text-primary/70">
-                  <strong>동작 방식:</strong> 테이블에서 선택된 데이터를 기반으로 스케줄을 자동 생성합니다. 생성 전
-                  미리보기 확인 다이얼로그가 표시됩니다.
-                </p>
-              </div>
-            </div>
-          )}
-        </div>
-      )}
-
-      {/* 🆕 행 선택 시에만 활성화 설정 */}
-      <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-        <h4 className="text-foreground text-sm font-medium">행 선택 활성화 조건</h4>
-        <p className="text-muted-foreground text-xs">
-          테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
-        </p>
-
-        <div className="flex items-center justify-between">
-          <div className="space-y-0.5">
-            <Label>행 선택 시에만 활성화</Label>
-            <p className="text-muted-foreground text-xs">체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.</p>
-          </div>
-          <Switch
-            checked={component.componentConfig?.action?.requireRowSelection || false}
-            onCheckedChange={(checked) => {
-              onUpdateProperty("componentConfig.action.requireRowSelection", checked);
-            }}
-          />
-        </div>
-
-        {component.componentConfig?.action?.requireRowSelection && (
-          <div className="border-primary/20 space-y-3 border-l-2 pl-4">
-            <div>
-              <Label htmlFor="row-selection-source">선택 데이터 소스</Label>
-              <Select
-                value={component.componentConfig?.action?.rowSelectionSource || "auto"}
-                onValueChange={(value) => {
-                  onUpdateProperty("componentConfig.action.rowSelectionSource", value);
-                }}
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="데이터 소스 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto">자동 감지 (권장)</SelectItem>
-                  <SelectItem value="tableList">테이블 리스트 선택</SelectItem>
-                  <SelectItem value="splitPanelLeft">분할 패널 좌측 선택</SelectItem>
-                  <SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-xs">
-                자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
-              </p>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="space-y-0.5">
-                <Label>다중 선택 허용</Label>
-                <p className="text-muted-foreground text-xs">
-                  여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
-                </p>
-              </div>
-              <Switch
-                checked={component.componentConfig?.action?.allowMultiRowSelection ?? true}
-                onCheckedChange={(checked) => {
-                  onUpdateProperty("componentConfig.action.allowMultiRowSelection", checked);
-                }}
-              />
-            </div>
-
-            {!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
-              <div className="rounded-md bg-amber-50 p-2 dark:bg-yellow-950/20">
-                <p className="text-xs text-yellow-800 dark:text-yellow-200">
-                  정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-
-      {/* 제어 기능 섹션 - 엑셀 업로드 계열이 아닐 때만 표시 */}
-      {localInputs.actionType !== "excel_upload" && localInputs.actionType !== "multi_table_excel_upload" && (
-        <div className="border-border mt-8 border-t pt-6">
-          <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
-        </div>
-      )}
-
-      {/* 🆕 플로우 단계별 표시 제어 섹션 (플로우 위젯이 있을 때만 표시) */}
-      {hasFlowWidget && (
-        <div className="border-border mt-8 border-t pt-6">
-          <FlowVisibilityConfigPanel
-            component={component}
-            allComponents={allComponents}
-            onUpdateProperty={onUpdateProperty}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * 마스터-디테일 엑셀 업로드 설정 컴포넌트
- * 분할 패널 + column_labels에서 관계를 자동 감지 (채번은 테이블 타입 관리에서 자동 감지)
- */
-const MasterDetailExcelUploadConfig: React.FC<{
-  config: any;
-  onUpdateProperty: (path: string, value: any) => void;
-  allComponents: ComponentData[];
-}> = ({ config, onUpdateProperty, allComponents }) => {
-  const [relationInfo, setRelationInfo] = useState<{
-    masterTable: string;
-    detailTable: string;
-    masterKeyColumn: string;
-    detailFkColumn: string;
-  } | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [masterColumns, setMasterColumns] = useState<
-    Array<{
-      columnName: string;
-      columnLabel: string;
-      inputType: string;
-      referenceTable?: string;
-      referenceColumn?: string;
-      displayColumn?: string;
-    }>
-  >([]);
-  // 참조 테이블별 컬럼 목록 캐시 (컬럼명 + 라벨)
-  const [refTableColumns, setRefTableColumns] = useState<Record<string, Array<{ name: string; label: string }>>>({});
-
-  // 마스터-디테일 설정
-  const masterDetailConfig = config.action?.masterDetailExcel || {};
-
-  // 분할 패널에서 마스터/디테일 테이블명 자동 감지
-  const splitPanelInfo = useMemo(() => {
-    const findSplitPanel = (components: any[]): any => {
-      for (const comp of components) {
-        const compId = comp.componentId || comp.componentType;
-        if (compId === "split-panel-layout") {
-          return comp.componentConfig;
-        }
-        if (comp.children && comp.children.length > 0) {
-          const found = findSplitPanel(comp.children);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-    return findSplitPanel(allComponents as any[]);
-  }, [allComponents]);
-
-  const masterTable = splitPanelInfo?.leftPanel?.tableName || "";
-  const detailTable = splitPanelInfo?.rightPanel?.tableName || "";
-
-  // 마스터 테이블 컬럼 로드
-  useEffect(() => {
-    if (!masterTable) {
-      setMasterColumns([]);
-      return;
-    }
-
-    const loadMasterColumns = async () => {
-      try {
-        const { apiClient } = await import("@/lib/api/client");
-        const response = await apiClient.get(`/table-management/tables/${masterTable}/columns`);
-        if (response.data?.success && response.data?.data?.columns) {
-          const cols = response.data.data.columns.map((col: any) => ({
-            columnName: col.columnName || col.column_name,
-            columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
-            inputType: col.inputType || col.input_type || "text",
-            referenceTable: col.referenceTable || col.reference_table,
-            referenceColumn: col.referenceColumn || col.reference_column,
-            displayColumn: col.displayColumn || col.display_column,
-          }));
-          setMasterColumns(cols);
-        }
-      } catch (error) {
-        console.error("마스터 테이블 컬럼 로드 실패:", error);
-      }
-    };
-    loadMasterColumns();
-  }, [masterTable]);
-
-  // 선택된 엔티티 필드들의 참조 테이블 컬럼 로드
-  useEffect(() => {
-    const entityFields = (masterDetailConfig.masterSelectFields || []).filter(
-      (f: any) => f.inputType === "entity" && f.referenceTable,
-    );
-
-    const loadRefTableColumns = async () => {
-      const { apiClient } = await import("@/lib/api/client");
-
-      for (const field of entityFields) {
-        // 이미 로드된 테이블은 스킵
-        if (refTableColumns[field.referenceTable]) continue;
-
-        try {
-          const response = await apiClient.get(`/table-management/tables/${field.referenceTable}/columns`);
-          if (response.data?.success && response.data?.data?.columns) {
-            const cols = response.data.data.columns.map((c: any) => ({
-              name: c.columnName || c.column_name,
-              label: c.displayName || c.columnLabel || c.column_label || c.columnName || c.column_name,
-            }));
-            setRefTableColumns((prev) => ({
-              ...prev,
-              [field.referenceTable]: cols,
-            }));
-          }
-        } catch (error) {
-          console.error("참조 테이블 컬럼 로드 실패:", field.referenceTable, error);
-        }
-      }
-    };
-
-    if (entityFields.length > 0) {
-      loadRefTableColumns();
-    }
-  }, [masterDetailConfig.masterSelectFields, refTableColumns]);
-
-  // column_labels에서 FK 관계 자동 감지
-  useEffect(() => {
-    if (!masterTable || !detailTable) {
-      setRelationInfo(null);
-      return;
-    }
-
-    const loadRelationInfo = async () => {
-      setLoading(true);
-      try {
-        const { apiClient } = await import("@/lib/api/client");
-        // 디테일 테이블의 컬럼 정보 조회 (referenceTable, referenceColumn 포함)
-        const response = await apiClient.get(`/table-management/tables/${detailTable}/columns`);
-
-        if (response.data?.success && response.data?.data?.columns) {
-          const columns = response.data.data.columns;
-          // referenceTable이 마스터 테이블인 컬럼 찾기
-          const fkColumn = columns.find((col: any) => col.referenceTable === masterTable);
-
-          if (fkColumn) {
-            const detailFk = fkColumn.columnName || fkColumn.column_name;
-            const masterKey = fkColumn.referenceColumn || fkColumn.reference_column;
-
-            setRelationInfo({
-              masterTable,
-              detailTable,
-              masterKeyColumn: masterKey,
-              detailFkColumn: detailFk,
-            });
-
-            // 설정에 자동으로 저장
-            onUpdateProperty("componentConfig.action.masterDetailExcel", {
-              ...masterDetailConfig,
-              masterTable,
-              detailTable,
-              masterKeyColumn: masterKey,
-              detailFkColumn: detailFk,
-            });
-          } else {
-            setRelationInfo(null);
-          }
-        }
-      } catch (error) {
-        console.error("FK 관계 로드 실패:", error);
-        setRelationInfo(null);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadRelationInfo();
-  }, [masterTable, detailTable]);
-
-  const updateMasterDetailConfig = (updates: Record<string, any>) => {
-    onUpdateProperty("componentConfig.action.masterDetailExcel", {
-      ...masterDetailConfig,
-      ...updates,
-    });
-  };
-
-  // 분할 패널이 없으면 표시하지 않음
-  if (!splitPanelInfo) {
-    return (
-      <div className="space-y-2 border-t pt-4">
-        <p className="text-muted-foreground text-xs">
-          이 화면에 분할 패널이 없습니다. 마스터-디테일 업로드는 분할 패널 화면에서만 사용할 수 있습니다.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4 border-t pt-4">
-      <h5 className="text-muted-foreground text-xs font-medium">마스터-디테일 설정 (자동 감지)</h5>
-
-      {/* 자동 감지된 정보 표시 */}
-      <div className="rounded-md bg-muted p-3 dark:bg-foreground">
-        <p className="mb-2 text-xs font-medium">분할 패널에서 감지된 정보:</p>
-        <div className="grid grid-cols-2 gap-2 text-xs">
-          <div>
-            <span className="text-muted-foreground">마스터:</span>{" "}
-            <span className="font-medium">{masterTable || "-"}</span>
-          </div>
-          <div>
-            <span className="text-muted-foreground">디테일:</span>{" "}
-            <span className="font-medium">{detailTable || "-"}</span>
-          </div>
-        </div>
-
-        {loading ? (
-          <p className="text-muted-foreground mt-2 text-xs">FK 관계 조회 중...</p>
-        ) : relationInfo ? (
-          <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
-            <div>
-              <span className="text-muted-foreground">마스터 키:</span>{" "}
-              <span className="font-medium text-emerald-600">{relationInfo.masterKeyColumn}</span>
-            </div>
-            <div>
-              <span className="text-muted-foreground">디테일 FK:</span>{" "}
-              <span className="font-medium text-emerald-600">{relationInfo.detailFkColumn}</span>
-            </div>
-          </div>
-        ) : (
-          <p className="mt-2 text-xs text-amber-600">
-            FK 관계를 찾을 수 없습니다. 테이블 타입관리에서 reference_table을 설정해주세요.
-          </p>
-        )}
-      </div>
-
-      {/* 마스터 키 자동 생성 안내 */}
-      {relationInfo && (
-        <p className="text-muted-foreground border-t pt-2 text-xs">
-          마스터 테이블의 <strong>{relationInfo.masterKeyColumn}</strong> 값은 테이블 타입 관리에서 설정된 채번 규칙으로
-          자동 생성됩니다.
-        </p>
-      )}
-
-      {/* 마스터 필드 선택 - 사용자가 엑셀 업로드 시 입력할 필드 */}
-      {relationInfo && masterColumns.length > 0 && (
-        <div>
-          <Label className="text-xs">사용자 입력 필드 (마스터)</Label>
-          <p className="text-muted-foreground mb-2 text-xs">
-            엑셀 업로드 시 사용자가 직접 선택/입력할 마스터 테이블 필드를 선택하세요.
-          </p>
-          <div className="max-h-40 space-y-1 overflow-y-auto rounded-md border p-2">
-            {masterColumns
-              .filter((col) => col.columnName !== relationInfo.masterKeyColumn) // 채번으로 자동 생성되는 키는 제외
-              .map((col) => {
-                const selectedFields = masterDetailConfig.masterSelectFields || [];
-                const isSelected = selectedFields.some((f: any) => f.columnName === col.columnName);
-                return (
-                  <div key={col.columnName} className="flex items-center gap-2">
-                    <input
-                      type="checkbox"
-                      id={`master-field-${col.columnName}`}
-                      checked={isSelected}
-                      onChange={(e) => {
-                        const checked = e.target.checked;
-                        let newFields = [...selectedFields];
-                        if (checked) {
-                          newFields.push({
-                            columnName: col.columnName,
-                            columnLabel: col.columnLabel,
-                            inputType: col.inputType,
-                            referenceTable: col.referenceTable,
-                            referenceColumn: col.referenceColumn,
-                            displayColumn: col.displayColumn,
-                            required: true,
-                          });
-                        } else {
-                          newFields = newFields.filter((f: any) => f.columnName !== col.columnName);
-                        }
-                        updateMasterDetailConfig({ masterSelectFields: newFields });
-                      }}
-                      className="h-4 w-4 rounded border-input"
-                    />
-                    <label htmlFor={`master-field-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
-                      {col.columnLabel}
-                      <span className="text-muted-foreground ml-1">({col.columnName})</span>
-                      {col.inputType === "entity" && <span className="ml-1 text-primary">[엔티티]</span>}
-                    </label>
-                  </div>
-                );
-              })}
-          </div>
-          {(masterDetailConfig.masterSelectFields?.length || 0) > 0 && (
-            <p className="text-muted-foreground mt-1 text-xs">
-              선택된 필드: {masterDetailConfig.masterSelectFields.length}개
-            </p>
-          )}
-
-          {/* 엔티티 필드의 표시컬럼 설정 */}
-          {masterDetailConfig.masterSelectFields?.filter((f: any) => f.inputType === "entity").length > 0 && (
-            <div className="mt-3 space-y-2 border-t pt-3">
-              <Label className="text-xs">엔티티 필드 표시컬럼 설정</Label>
-              {masterDetailConfig.masterSelectFields
-                .filter((f: any) => f.inputType === "entity")
-                .map((field: any) => {
-                  const availableColumns = refTableColumns[field.referenceTable] || [];
-                  return (
-                    <div key={`display-${field.columnName}`} className="flex items-center gap-2">
-                      <span className="w-24 truncate text-xs">{field.columnLabel}:</span>
-                      <Select
-                        value={field.displayColumn || ""}
-                        onValueChange={(value) => {
-                          const newFields = masterDetailConfig.masterSelectFields.map((f: any) =>
-                            f.columnName === field.columnName ? { ...f, displayColumn: value } : f,
-                          );
-                          updateMasterDetailConfig({ masterSelectFields: newFields });
-                        }}
-                      >
-                        <SelectTrigger className="h-7 flex-1 text-xs">
-                          <SelectValue placeholder="표시컬럼 선택" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {availableColumns.length === 0 ? (
-                            <SelectItem value="__loading__" disabled>
-                              {field.referenceTable ? "로딩 중..." : "참조 테이블 없음"}
-                            </SelectItem>
-                          ) : (
-                            availableColumns.map((col) => (
-                              <SelectItem key={col.name} value={col.name} className="text-xs">
-                                {col.label}
-                              </SelectItem>
-                            ))
-                          )}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  );
-                })}
-              <p className="text-muted-foreground text-xs">참조 테이블에서 사용자에게 표시할 컬럼을 선택하세요.</p>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
-
-/**
- * 엑셀 업로드 채번 규칙 안내 (테이블 타입 관리에서 자동 감지)
- */
-const ExcelNumberingRuleInfo: React.FC = () => {
-  return (
-    <div className="border-t pt-3">
-      <Label className="text-xs">채번 규칙</Label>
-      <p className="text-muted-foreground mt-1 text-xs">
-        테이블 타입 관리에서 "채번" 타입으로 설정된 컬럼의 채번 규칙이 업로드 시 자동으로 적용됩니다.
-      </p>
-    </div>
-  );
-};
-
-/**
- * 엑셀 업로드 후 제어 실행 설정 (단일 테이블/마스터-디테일 모두 사용 가능)
- */
-const ExcelAfterUploadControlConfig: React.FC<{
-  config: { afterUploadFlows?: Array<{ flowId: string; order: number }> };
-  updateConfig: (updates: { afterUploadFlows?: Array<{ flowId: string; order: number }> }) => void;
-}> = ({ config, updateConfig }) => {
-  const [nodeFlows, setNodeFlows] = useState<Array<{ flowId: number; flowName: string; flowDescription?: string }>>([]);
-  const [flowSelectOpen, setFlowSelectOpen] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const selectedFlows = config.afterUploadFlows || [];
-
-  // 노드 플로우 목록 로드
-  useEffect(() => {
-    const loadNodeFlows = async () => {
-      setIsLoading(true);
-      try {
-        const { apiClient } = await import("@/lib/api/client");
-        const response = await apiClient.get("/dataflow/node-flows");
-        if (response.data?.success && response.data?.data) {
-          setNodeFlows(response.data.data);
-        }
-      } catch (error) {
-        console.error("노드 플로우 목록 로드 실패:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadNodeFlows();
-  }, []);
-
-  const addFlow = (flowId: string) => {
-    if (selectedFlows.some((f) => f.flowId === flowId)) return;
-    const newFlows = [...selectedFlows, { flowId, order: selectedFlows.length + 1 }];
-    updateConfig({ afterUploadFlows: newFlows });
-    setFlowSelectOpen(false);
-  };
-
-  const removeFlow = (flowId: string) => {
-    const newFlows = selectedFlows.filter((f) => f.flowId !== flowId).map((f, idx) => ({ ...f, order: idx + 1 }));
-    updateConfig({ afterUploadFlows: newFlows });
-  };
-
-  const moveUp = (index: number) => {
-    if (index === 0) return;
-    const newFlows = [...selectedFlows];
-    [newFlows[index - 1], newFlows[index]] = [newFlows[index], newFlows[index - 1]];
-    updateConfig({ afterUploadFlows: newFlows.map((f, idx) => ({ ...f, order: idx + 1 })) });
-  };
-
-  const moveDown = (index: number) => {
-    if (index === selectedFlows.length - 1) return;
-    const newFlows = [...selectedFlows];
-    [newFlows[index], newFlows[index + 1]] = [newFlows[index + 1], newFlows[index]];
-    updateConfig({ afterUploadFlows: newFlows.map((f, idx) => ({ ...f, order: idx + 1 })) });
-  };
-
-  const availableFlows = nodeFlows.filter((f) => !selectedFlows.some((s) => s.flowId === String(f.flowId)));
-
-  return (
-    <div className="border-t pt-3">
-      <Label className="text-xs">업로드 후 제어 실행</Label>
-      <p className="text-muted-foreground mb-2 text-xs">엑셀 업로드 완료 후 순서대로 실행할 제어를 추가하세요.</p>
-
-      {selectedFlows.length > 0 && (
-        <div className="mb-2 space-y-1">
-          {selectedFlows.map((selected, index) => {
-            const flow = nodeFlows.find((f) => String(f.flowId) === selected.flowId);
-            return (
-              <div key={selected.flowId} className="flex items-center gap-1 rounded border bg-white p-1.5">
-                <span className="text-muted-foreground w-5 text-center text-xs">{index + 1}</span>
-                <span className="flex-1 truncate text-xs">{flow?.flowName || `Flow ${selected.flowId}`}</span>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-5 w-5 p-0"
-                  onClick={() => moveUp(index)}
-                  disabled={index === 0}
-                >
-                  <ChevronUp className="h-3 w-3" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-5 w-5 p-0"
-                  onClick={() => moveDown(index)}
-                  disabled={index === selectedFlows.length - 1}
-                >
-                  <ChevronDown className="h-3 w-3" />
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-5 w-5 p-0 text-destructive"
-                  onClick={() => removeFlow(selected.flowId)}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      <Popover open={flowSelectOpen} onOpenChange={setFlowSelectOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            className="h-8 w-full justify-between text-xs"
-            disabled={isLoading || availableFlows.length === 0}
-          >
-            {isLoading ? "로딩 중..." : availableFlows.length === 0 ? "추가 가능한 제어 없음" : "제어 추가..."}
-            <Plus className="ml-2 h-4 w-4" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0" align="start">
-          <Command>
-            <CommandInput placeholder="제어 검색..." className="text-xs" />
-            <CommandList>
-              <CommandEmpty className="py-2 text-center text-xs">검색 결과 없음</CommandEmpty>
-              <CommandGroup>
-                {availableFlows.map((flow) => (
-                  <CommandItem
-                    key={flow.flowId}
-                    value={flow.flowName}
-                    onSelect={() => addFlow(String(flow.flowId))}
-                    className="text-xs"
-                  >
-                    <div className="flex flex-col">
-                      <span>{flow.flowName}</span>
-                      {flow.flowDescription && (
-                        <span className="text-muted-foreground text-[10px]">{flow.flowDescription}</span>
-                      )}
-                    </div>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-
-      {selectedFlows.length > 0 && (
-        <p className="text-muted-foreground mt-1 text-xs">
-          업로드 완료 후 위 순서대로 {selectedFlows.length}개의 제어가 실행됩니다.
-        </p>
-      )}
-    </div>
-  );
-};
-
-/**
- * 엑셀 업로드 설정 섹션 컴포넌트
- * 마스터-디테일 설정은 분할 패널 자동 감지
- */
-const ExcelUploadConfigSection: React.FC<{
-  config: any;
-  onUpdateProperty: (path: string, value: any) => void;
-  allComponents: ComponentData[];
-  currentTableName?: string; // 현재 화면의 테이블명 (ButtonConfigPanel에서 전달)
-}> = ({ config, onUpdateProperty, allComponents, currentTableName: propTableName }) => {
-  // 엑셀 업로드 설정 상태 관리 (채번은 테이블 타입 관리에서 자동 감지)
-  const [excelUploadConfig, setExcelUploadConfig] = useState<{
-    afterUploadFlows?: Array<{ flowId: string; order: number }>;
-  }>({
-    afterUploadFlows: config.action?.excelAfterUploadFlows || [],
-  });
-
-  // 분할 패널 감지
-  const splitPanelInfo = useMemo(() => {
-    const findSplitPanel = (components: any[]): any => {
-      for (const comp of components) {
-        const compId = comp.componentId || comp.componentType;
-        if (compId === "split-panel-layout") {
-          return comp.componentConfig;
-        }
-        if (comp.children && comp.children.length > 0) {
-          const found = findSplitPanel(comp.children);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-    return findSplitPanel(allComponents as any[]);
-  }, [allComponents]);
-
-  const hasSplitPanel = !!splitPanelInfo;
-
-  // 단일 테이블 감지 (props 우선, 없으면 컴포넌트에서 탐색)
-  const singleTableName = useMemo(() => {
-    if (hasSplitPanel) return undefined;
-
-    // props로 전달된 테이블명 우선 사용
-    if (propTableName) return propTableName;
-
-    // 컴포넌트에서 테이블명 탐색
-    const findTableName = (components: any[]): string | undefined => {
-      for (const comp of components) {
-        const compId = comp.componentId || comp.componentType;
-        const compConfig = comp.componentConfig || comp.config || comp;
-
-        // 테이블 패널이나 데이터 테이블에서 테이블명 찾기
-        if (
-          compId === "table-panel" ||
-          compId === "data-table" ||
-          compId === "table-list" ||
-          compId === "simple-table"
-        ) {
-          const tableName = compConfig?.tableName || compConfig?.table;
-          if (tableName) return tableName;
-        }
-
-        // 폼 컴포넌트에서 테이블명 찾기
-        if (compId === "form-panel" || compId === "input-form" || compId === "form" || compId === "detail-form") {
-          const tableName = compConfig?.tableName || compConfig?.table;
-          if (tableName) return tableName;
-        }
-
-        // 범용적으로 tableName 속성이 있는 컴포넌트 찾기
-        if (compConfig?.tableName) {
-          return compConfig.tableName;
-        }
-
-        if (comp.children && comp.children.length > 0) {
-          const found = findTableName(comp.children);
-          if (found) return found;
-        }
-      }
-      return undefined;
-    };
-    return findTableName(allComponents as any[]);
-  }, [allComponents, hasSplitPanel, propTableName]);
-
-  // 디버깅: 감지된 테이블명 로그
-  useEffect(() => {
-    console.log(
-      "[ExcelUploadConfigSection] 분할 패널:",
-      hasSplitPanel,
-      "단일 테이블:",
-      singleTableName,
-      "(props:",
-      propTableName,
-      ")",
-    );
-  }, [hasSplitPanel, singleTableName, propTableName]);
-
-  // 설정 업데이트 함수 (채번은 테이블 타입 관리에서 자동 감지되므로 제어 실행만 관리)
-  const updateExcelUploadConfig = (updates: Partial<typeof excelUploadConfig>) => {
-    const newConfig = { ...excelUploadConfig, ...updates };
-    setExcelUploadConfig(newConfig);
-
-    if (updates.afterUploadFlows !== undefined) {
-      onUpdateProperty("componentConfig.action.excelAfterUploadFlows", updates.afterUploadFlows);
-    }
-  };
-
-  // config 변경 시 로컬 상태 동기화
-  useEffect(() => {
-    setExcelUploadConfig({
-      afterUploadFlows: config.action?.excelAfterUploadFlows || [],
-    });
-  }, [config.action?.excelAfterUploadFlows]);
-
-  return (
-    <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
-      <h4 className="text-foreground text-sm font-medium">엑셀 업로드 설정</h4>
-
-      <div>
-        <Label htmlFor="excel-upload-mode">업로드 모드</Label>
-        <Select
-          value={config.action?.excelUploadMode || "insert"}
-          onValueChange={(value) => onUpdateProperty("componentConfig.action.excelUploadMode", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="insert">신규 삽입 (INSERT)</SelectItem>
-            <SelectItem value="update">기존 수정 (UPDATE)</SelectItem>
-            <SelectItem value="upsert">삽입/수정 (UPSERT)</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      {(config.action?.excelUploadMode === "update" || config.action?.excelUploadMode === "upsert") && (
-        <div>
-          <Label htmlFor="excel-key-column">
-            키 컬럼명 <span className="text-destructive">*</span>
-          </Label>
-          <Input
-            id="excel-key-column"
-            placeholder="예: id, code"
-            value={config.action?.excelKeyColumn || ""}
-            onChange={(e) => onUpdateProperty("componentConfig.action.excelKeyColumn", e.target.value)}
-            className="h-8 text-xs"
-          />
-          <p className="text-muted-foreground mt-1 text-xs">UPDATE/UPSERT 시 기준이 되는 컬럼명</p>
-        </div>
-      )}
-
-      {/* 채번 규칙 안내 (테이블 타입 관리에서 자동 감지) */}
-      <ExcelNumberingRuleInfo />
-
-      {/* 업로드 후 제어 실행 (항상 표시) */}
-      <ExcelAfterUploadControlConfig config={excelUploadConfig} updateConfig={updateExcelUploadConfig} />
-
-      {/* 마스터-디테일 설정 (분할 패널 자동 감지) */}
-      <MasterDetailExcelUploadConfig
-        config={config}
-        onUpdateProperty={onUpdateProperty}
-        allComponents={allComponents}
-      />
-    </div>
+    <Tabs defaultValue="basic" className="w-full">
+      <TabsList className="grid w-full grid-cols-4">
+        <TabsTrigger value="basic" className="text-xs">기본</TabsTrigger>
+        <TabsTrigger value="action" className="text-xs">액션</TabsTrigger>
+        <TabsTrigger value="dataflow" className="text-xs">데이터플로우</TabsTrigger>
+        <TabsTrigger value="advanced" className="text-xs">고급</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="basic" className="mt-4">
+        <BasicTab {...tabProps} />
+      </TabsContent>
+
+      <TabsContent value="action" className="mt-4">
+        <ActionTab {...tabProps} />
+      </TabsContent>
+
+      <TabsContent value="dataflow" className="mt-4">
+        <DataflowTab {...tabProps} />
+      </TabsContent>
+
+      <TabsContent value="advanced" className="mt-4">
+        <AdvancedTab {...tabProps} />
+      </TabsContent>
+    </Tabs>
   );
 };
diff --git a/frontend/components/screen/config-panels/CardConfigPanel.tsx b/frontend/components/screen/config-panels/CardConfigPanel.tsx
index 05a9c22b..77698e89 100644
--- a/frontend/components/screen/config-panels/CardConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/CardConfigPanel.tsx
@@ -1,119 +1,108 @@
+"use client";
+
 import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { ComponentData } from "@/types/screen";
-import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
+import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
+import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
 
 interface CardConfigPanelProps {
-  component: ComponentData;
-  onUpdateProperty: (path: string, value: any) => void;
+  config?: Record<string, any>;
+  onChange?: (key: string, value: any) => void;
+  component?: any;
+  onUpdateProperty?: (path: string, value: any) => void;
 }
 
-export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({ component, onUpdateProperty }) => {
-  const config = component.componentConfig || {};
+const sections: ConfigSectionDefinition[] = [
+  {
+    id: "content",
+    title: "콘텐츠",
+    fields: [
+      {
+        key: "title",
+        label: "카드 제목",
+        type: "text",
+        placeholder: "카드 제목을 입력하세요",
+      },
+      {
+        key: "content",
+        label: "카드 내용",
+        type: "textarea",
+        placeholder: "카드 내용을 입력하세요",
+      },
+    ],
+  },
+  {
+    id: "style",
+    title: "스타일",
+    fields: [
+      {
+        key: "variant",
+        label: "카드 스타일",
+        type: "select",
+        options: [
+          { label: "기본 (Default)", value: "default" },
+          { label: "테두리 (Outlined)", value: "outlined" },
+          { label: "그림자 (Elevated)", value: "elevated" },
+          { label: "채움 (Filled)", value: "filled" },
+        ],
+      },
+      {
+        key: "padding",
+        label: "패딩",
+        type: "select",
+        options: [
+          { label: "없음 (None)", value: "none" },
+          { label: "작게 (Small)", value: "small" },
+          { label: "기본 (Default)", value: "default" },
+          { label: "크게 (Large)", value: "large" },
+        ],
+      },
+      {
+        key: "backgroundColor",
+        label: "배경색",
+        type: "color",
+      },
+      {
+        key: "borderRadius",
+        label: "테두리 반경",
+        type: "text",
+        placeholder: "8px",
+      },
+    ],
+  },
+  {
+    id: "display",
+    title: "표시 옵션",
+    fields: [
+      {
+        key: "showHeader",
+        label: "헤더 표시",
+        type: "switch",
+      },
+    ],
+  },
+];
 
-  const handleConfigChange = (key: string, value: any) => {
-    onUpdateProperty(`componentConfig.${key}`, value);
+export const CardConfigPanel: React.FC<CardConfigPanelProps> = ({
+  config: directConfig,
+  onChange: directOnChange,
+  component,
+  onUpdateProperty,
+}) => {
+  const config = directConfig || component?.componentConfig || {};
+
+  const handleChange = (key: string, value: any) => {
+    if (directOnChange) {
+      directOnChange(key, value);
+    } else if (onUpdateProperty) {
+      onUpdateProperty(`componentConfig.${key}`, value);
+    }
   };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-sm font-medium">카드 설정</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* 카드 제목 */}
-        <div className="space-y-2">
-          <Label htmlFor="card-title">카드 제목</Label>
-          <Input
-            id="card-title"
-            placeholder="카드 제목을 입력하세요"
-            value={config.title || "카드 제목"}
-            onChange={(e) => handleConfigChange("title", e.target.value)}
-          />
-        </div>
-
-        {/* 카드 내용 */}
-        <div className="space-y-2">
-          <Label htmlFor="card-content">카드 내용</Label>
-          <Textarea
-            id="card-content"
-            placeholder="카드 내용을 입력하세요"
-            value={config.content || "카드 내용 영역"}
-            onChange={(e) => handleConfigChange("content", e.target.value)}
-            rows={3}
-          />
-        </div>
-
-        {/* 카드 스타일 */}
-        <div className="space-y-2">
-          <Label htmlFor="card-variant">카드 스타일</Label>
-          <Select value={config.variant || "default"} onValueChange={(value) => handleConfigChange("variant", value)}>
-            <SelectTrigger>
-              <SelectValue placeholder="카드 스타일 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="default">기본 (Default)</SelectItem>
-              <SelectItem value="outlined">테두리 (Outlined)</SelectItem>
-              <SelectItem value="elevated">그림자 (Elevated)</SelectItem>
-              <SelectItem value="filled">채움 (Filled)</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* 헤더 표시 여부 */}
-        <div className="flex items-center space-x-2">
-          <Switch
-            id="show-header"
-            checked={config.showHeader !== false}
-            onCheckedChange={(checked) => handleConfigChange("showHeader", checked)}
-          />
-          <Label htmlFor="show-header">헤더 표시</Label>
-        </div>
-
-        {/* 패딩 설정 */}
-        <div className="space-y-2">
-          <Label htmlFor="card-padding">패딩</Label>
-          <Select value={config.padding || "default"} onValueChange={(value) => handleConfigChange("padding", value)}>
-            <SelectTrigger>
-              <SelectValue placeholder="패딩 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">없음 (None)</SelectItem>
-              <SelectItem value="small">작게 (Small)</SelectItem>
-              <SelectItem value="default">기본 (Default)</SelectItem>
-              <SelectItem value="large">크게 (Large)</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* 배경색 */}
-        <div className="space-y-2">
-          <Label htmlFor="background-color">배경색</Label>
-          <ColorPickerWithTransparent
-            id="background-color"
-            value={config.backgroundColor}
-            onChange={(value) => handleConfigChange("backgroundColor", value)}
-            defaultColor="#ffffff"
-            placeholder="#ffffff"
-          />
-        </div>
-
-        {/* 테두리 반경 */}
-        <div className="space-y-2">
-          <Label htmlFor="border-radius">테두리 반경</Label>
-          <Input
-            id="border-radius"
-            placeholder="8px"
-            value={config.borderRadius || "8px"}
-            onChange={(e) => handleConfigChange("borderRadius", e.target.value)}
-          />
-        </div>
-      </CardContent>
-    </Card>
+    <ConfigPanelBuilder
+      config={config}
+      onChange={handleChange}
+      sections={sections}
+    />
   );
 };
diff --git a/frontend/components/screen/config-panels/DashboardConfigPanel.tsx b/frontend/components/screen/config-panels/DashboardConfigPanel.tsx
index 722c7de0..071c9095 100644
--- a/frontend/components/screen/config-panels/DashboardConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/DashboardConfigPanel.tsx
@@ -1,150 +1,131 @@
+"use client";
+
 import React from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { ComponentData } from "@/types/screen";
-import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
+import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
+import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
 
 interface DashboardConfigPanelProps {
-  component: ComponentData;
-  onUpdateProperty: (path: string, value: any) => void;
+  config?: Record<string, any>;
+  onChange?: (key: string, value: any) => void;
+  component?: any;
+  onUpdateProperty?: (path: string, value: any) => void;
 }
 
-export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({ component, onUpdateProperty }) => {
-  const config = component.componentConfig || {};
+const sections: ConfigSectionDefinition[] = [
+  {
+    id: "content",
+    title: "콘텐츠",
+    fields: [
+      {
+        key: "title",
+        label: "그리드 제목",
+        type: "text",
+        placeholder: "그리드 제목을 입력하세요",
+      },
+    ],
+  },
+  {
+    id: "grid",
+    title: "그리드 설정",
+    fields: [
+      {
+        key: "rows",
+        label: "행 개수",
+        type: "select",
+        options: [
+          { label: "1행", value: "1" },
+          { label: "2행", value: "2" },
+          { label: "3행", value: "3" },
+          { label: "4행", value: "4" },
+        ],
+      },
+      {
+        key: "columns",
+        label: "열 개수",
+        type: "select",
+        options: [
+          { label: "1열", value: "1" },
+          { label: "2열", value: "2" },
+          { label: "3열", value: "3" },
+          { label: "4열", value: "4" },
+          { label: "6열", value: "6" },
+        ],
+      },
+      {
+        key: "gap",
+        label: "그리드 간격",
+        type: "select",
+        options: [
+          { label: "없음 (0px)", value: "none" },
+          { label: "작게 (8px)", value: "small" },
+          { label: "보통 (16px)", value: "medium" },
+          { label: "크게 (24px)", value: "large" },
+        ],
+      },
+      {
+        key: "itemHeight",
+        label: "아이템 높이",
+        type: "text",
+        placeholder: "120px",
+      },
+    ],
+  },
+  {
+    id: "style",
+    title: "스타일",
+    fields: [
+      {
+        key: "backgroundColor",
+        label: "배경색",
+        type: "color",
+      },
+      {
+        key: "borderRadius",
+        label: "테두리 반경",
+        type: "text",
+        placeholder: "8px",
+      },
+    ],
+  },
+  {
+    id: "display",
+    title: "표시 옵션",
+    fields: [
+      {
+        key: "responsive",
+        label: "반응형 레이아웃",
+        type: "switch",
+      },
+      {
+        key: "showBorders",
+        label: "그리드 테두리 표시",
+        type: "switch",
+      },
+    ],
+  },
+];
 
-  const handleConfigChange = (key: string, value: any) => {
-    onUpdateProperty(`componentConfig.${key}`, value);
+export const DashboardConfigPanel: React.FC<DashboardConfigPanelProps> = ({
+  config: directConfig,
+  onChange: directOnChange,
+  component,
+  onUpdateProperty,
+}) => {
+  const config = directConfig || component?.componentConfig || {};
+
+  const handleChange = (key: string, value: any) => {
+    if (directOnChange) {
+      directOnChange(key, value);
+    } else if (onUpdateProperty) {
+      onUpdateProperty(`componentConfig.${key}`, value);
+    }
   };
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-sm font-medium">대시보드 그리드 설정</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* 그리드 제목 */}
-        <div className="space-y-2">
-          <Label htmlFor="grid-title">그리드 제목</Label>
-          <Input
-            id="grid-title"
-            placeholder="그리드 제목을 입력하세요"
-            value={config.title || "대시보드 그리드"}
-            onChange={(e) => handleConfigChange("title", e.target.value)}
-          />
-        </div>
-
-        {/* 행 개수 */}
-        <div className="space-y-2">
-          <Label htmlFor="grid-rows">행 개수</Label>
-          <Select
-            value={String(config.rows || 2)}
-            onValueChange={(value) => handleConfigChange("rows", parseInt(value))}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="행 개수 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="1">1행</SelectItem>
-              <SelectItem value="2">2행</SelectItem>
-              <SelectItem value="3">3행</SelectItem>
-              <SelectItem value="4">4행</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* 열 개수 */}
-        <div className="space-y-2">
-          <Label htmlFor="grid-columns">열 개수</Label>
-          <Select
-            value={String(config.columns || 3)}
-            onValueChange={(value) => handleConfigChange("columns", parseInt(value))}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="열 개수 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="1">1열</SelectItem>
-              <SelectItem value="2">2열</SelectItem>
-              <SelectItem value="3">3열</SelectItem>
-              <SelectItem value="4">4열</SelectItem>
-              <SelectItem value="6">6열</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* 간격 설정 */}
-        <div className="space-y-2">
-          <Label htmlFor="grid-gap">그리드 간격</Label>
-          <Select value={config.gap || "medium"} onValueChange={(value) => handleConfigChange("gap", value)}>
-            <SelectTrigger>
-              <SelectValue placeholder="간격 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">없음 (0px)</SelectItem>
-              <SelectItem value="small">작게 (8px)</SelectItem>
-              <SelectItem value="medium">보통 (16px)</SelectItem>
-              <SelectItem value="large">크게 (24px)</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-
-        {/* 그리드 아이템 높이 */}
-        <div className="space-y-2">
-          <Label htmlFor="item-height">아이템 높이</Label>
-          <Input
-            id="item-height"
-            placeholder="120px"
-            value={config.itemHeight || "120px"}
-            onChange={(e) => handleConfigChange("itemHeight", e.target.value)}
-          />
-        </div>
-
-        {/* 반응형 설정 */}
-        <div className="flex items-center space-x-2">
-          <Switch
-            id="responsive"
-            checked={config.responsive !== false}
-            onCheckedChange={(checked) => handleConfigChange("responsive", checked)}
-          />
-          <Label htmlFor="responsive">반응형 레이아웃</Label>
-        </div>
-
-        {/* 테두리 표시 */}
-        <div className="flex items-center space-x-2">
-          <Switch
-            id="show-borders"
-            checked={config.showBorders !== false}
-            onCheckedChange={(checked) => handleConfigChange("showBorders", checked)}
-          />
-          <Label htmlFor="show-borders">그리드 테두리 표시</Label>
-        </div>
-
-        {/* 배경색 */}
-        <div className="space-y-2">
-          <Label htmlFor="background-color">배경색</Label>
-          <ColorPickerWithTransparent
-            id="background-color"
-            value={config.backgroundColor}
-            onChange={(value) => handleConfigChange("backgroundColor", value)}
-            defaultColor="#f8f9fa"
-            placeholder="#f8f9fa"
-          />
-        </div>
-
-        {/* 테두리 반경 */}
-        <div className="space-y-2">
-          <Label htmlFor="border-radius">테두리 반경</Label>
-          <Input
-            id="border-radius"
-            placeholder="8px"
-            value={config.borderRadius || "8px"}
-            onChange={(e) => handleConfigChange("borderRadius", e.target.value)}
-          />
-        </div>
-      </CardContent>
-    </Card>
+    <ConfigPanelBuilder
+      config={config}
+      onChange={handleChange}
+      sections={sections}
+    />
   );
 };
diff --git a/frontend/components/screen/config-panels/ProgressBarConfigPanel.tsx b/frontend/components/screen/config-panels/ProgressBarConfigPanel.tsx
index 898277f3..ef38f7ea 100644
--- a/frontend/components/screen/config-panels/ProgressBarConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ProgressBarConfigPanel.tsx
@@ -1,84 +1,93 @@
 "use client";
 
 import React from "react";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { ComponentData } from "@/types/screen";
-import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
+import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
+import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
 
 interface ProgressBarConfigPanelProps {
-  component: ComponentData;
-  onUpdateProperty: (path: string, value: any) => void;
+  config?: Record<string, any>;
+  onChange?: (key: string, value: any) => void;
+  component?: any;
+  onUpdateProperty?: (path: string, value: any) => void;
 }
 
-export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({ component, onUpdateProperty }) => {
-  const config = component.componentConfig || {};
+const sections: ConfigSectionDefinition[] = [
+  {
+    id: "content",
+    title: "콘텐츠",
+    fields: [
+      {
+        key: "label",
+        label: "라벨",
+        type: "text",
+        placeholder: "진행률 라벨을 입력하세요",
+      },
+      {
+        key: "value",
+        label: "현재 값",
+        type: "number",
+        min: 0,
+        placeholder: "현재 값",
+      },
+      {
+        key: "max",
+        label: "최대 값",
+        type: "number",
+        min: 1,
+        placeholder: "최대 값",
+      },
+    ],
+  },
+  {
+    id: "style",
+    title: "스타일",
+    fields: [
+      {
+        key: "color",
+        label: "진행률 색상",
+        type: "color",
+      },
+    ],
+  },
+  {
+    id: "display",
+    title: "표시 옵션",
+    fields: [
+      {
+        key: "showPercentage",
+        label: "퍼센트 표시",
+        type: "switch",
+      },
+      {
+        key: "showValue",
+        label: "값 표시",
+        type: "switch",
+      },
+    ],
+  },
+];
+
+export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({
+  config: directConfig,
+  onChange: directOnChange,
+  component,
+  onUpdateProperty,
+}) => {
+  const config = directConfig || component?.componentConfig || {};
+
+  const handleChange = (key: string, value: any) => {
+    if (directOnChange) {
+      directOnChange(key, value);
+    } else if (onUpdateProperty) {
+      onUpdateProperty(`componentConfig.${key}`, value);
+    }
+  };
 
   return (
-    <div className="space-y-4">
-      <div>
-        <Label htmlFor="progress-label">라벨</Label>
-        <Input
-          id="progress-label"
-          value={config.label || "진행률"}
-          onChange={(e) => onUpdateProperty("componentConfig.label", e.target.value)}
-          placeholder="진행률 라벨을 입력하세요"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="progress-value">현재 값</Label>
-        <Input
-          id="progress-value"
-          type="number"
-          value={config.value || 65}
-          onChange={(e) => onUpdateProperty("componentConfig.value", parseInt(e.target.value) || 0)}
-          placeholder="현재 값"
-          min="0"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="progress-max">최대 값</Label>
-        <Input
-          id="progress-max"
-          type="number"
-          value={config.max || 100}
-          onChange={(e) => onUpdateProperty("componentConfig.max", parseInt(e.target.value) || 100)}
-          placeholder="최대 값"
-          min="1"
-        />
-      </div>
-
-      <div>
-        <Label htmlFor="progress-color">진행률 색상</Label>
-        <ColorPickerWithTransparent
-          id="progress-color"
-          value={config.color}
-          onChange={(value) => onUpdateProperty("componentConfig.color", value)}
-          defaultColor="#3b82f6"
-          placeholder="#3b82f6"
-        />
-      </div>
-
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="show-percentage"
-          checked={config.showPercentage ?? true}
-          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showPercentage", checked)}
-        />
-        <Label htmlFor="show-percentage">퍼센트 표시</Label>
-      </div>
-
-      <div className="flex items-center space-x-2">
-        <Switch
-          id="show-value"
-          checked={config.showValue ?? true}
-          onCheckedChange={(checked) => onUpdateProperty("componentConfig.showValue", checked)}
-        />
-        <Label htmlFor="show-value">값 표시</Label>
-      </div>
-    </div>
+    <ConfigPanelBuilder
+      config={config}
+      onChange={handleChange}
+      sections={sections}
+    />
   );
 };
diff --git a/frontend/components/screen/config-panels/button-config/ActionTab.tsx b/frontend/components/screen/config-panels/button-config/ActionTab.tsx
new file mode 100644
index 00000000..8f880ef2
--- /dev/null
+++ b/frontend/components/screen/config-panels/button-config/ActionTab.tsx
@@ -0,0 +1,4540 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Check,
+  ChevronsUpDown,
+  Search,
+  Plus,
+  X,
+  ChevronUp,
+  ChevronDown,
+  Type,
+  Database,
+  Info,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ComponentData } from "@/types/screen";
+import { apiClient } from "@/lib/api/client";
+import { QuickInsertConfigSection } from "../QuickInsertConfigSection";
+import { getApprovalDefinitions, type ApprovalDefinition } from "@/lib/api/approval";
+import type { ButtonTabProps, TitleBlock, ScreenOption } from "./types";
+
+/** 액션 탭: 액션 유형별 상세 설정 (모달/이동/엑셀/결재/이벤트 등) */
+export const ActionTab: React.FC<ButtonTabProps> = ({
+  component,
+  onUpdateProperty,
+  allComponents,
+  currentTableName,
+  currentScreenCompanyCode,
+}) => {
+  const config = component.componentConfig || {};
+
+  const [localInputs, setLocalInputs] = useState({
+    actionType: String(config.action?.type || "save"),
+    modalTitle: String(config.action?.modalTitle || ""),
+    modalDescription: String(config.action?.modalDescription || ""),
+    editModalTitle: String(config.action?.editModalTitle || ""),
+    editModalDescription: String(config.action?.editModalDescription || ""),
+    targetUrl: String(config.action?.targetUrl || ""),
+    groupByColumn: String(config.action?.groupByColumns?.[0] || ""),
+  });
+  const [screens, setScreens] = useState<ScreenOption[]>([]);
+  const [screensLoading, setScreensLoading] = useState(false);
+  const [modalScreenOpen, setModalScreenOpen] = useState(false);
+  const [navScreenOpen, setNavScreenOpen] = useState(false);
+  const [modalSearchTerm, setModalSearchTerm] = useState("");
+  const [navSearchTerm, setNavSearchTerm] = useState("");
+
+  // 테이블 컬럼 목록 상태
+  const [tableColumns, setTableColumns] = useState<string[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+  const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
+  const [displayColumnSearch, setDisplayColumnSearch] = useState("");
+
+  // 🆕 제목 블록 빌더 상태
+  const [titleBlocks, setTitleBlocks] = useState<TitleBlock[]>([]);
+  const [availableTables, setAvailableTables] = useState<Array<{ name: string; label: string }>>([]); // 시스템의 모든 테이블 목록
+  const [tableColumnsMap, setTableColumnsMap] = useState<Record<string, Array<{ name: string; label: string }>>>({});
+  const [blockTableSearches, setBlockTableSearches] = useState<Record<string, string>>({}); // 블록별 테이블 검색어
+  const [blockColumnSearches, setBlockColumnSearches] = useState<Record<string, string>>({}); // 블록별 컬럼 검색어
+  const [blockTablePopoverOpen, setBlockTablePopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 테이블 Popover 열림 상태
+  const [blockColumnPopoverOpen, setBlockColumnPopoverOpen] = useState<Record<string, boolean>>({}); // 블록별 컬럼 Popover 열림 상태
+
+  // 🆕 데이터 전달 필드 매핑용 상태 (멀티 테이블 매핑 지원)
+  const [mappingSourceColumnsMap, setMappingSourceColumnsMap] = useState<
+    Record<string, Array<{ name: string; label: string }>>
+  >({});
+  const [mappingTargetColumns, setMappingTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [mappingSourcePopoverOpen, setMappingSourcePopoverOpen] = useState<Record<string, boolean>>({});
+  const [mappingTargetPopoverOpen, setMappingTargetPopoverOpen] = useState<Record<string, boolean>>({});
+  const [mappingSourceSearch, setMappingSourceSearch] = useState<Record<string, string>>({});
+  const [mappingTargetSearch, setMappingTargetSearch] = useState<Record<string, string>>({});
+  const [activeMappingGroupIndex, setActiveMappingGroupIndex] = useState(0);
+
+  // 🆕 openModalWithData 전용 필드 매핑 상태
+  const [modalSourceColumns, setModalSourceColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [modalTargetColumns, setModalTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [modalSourcePopoverOpen, setModalSourcePopoverOpen] = useState<Record<number, boolean>>({});
+  const [modalTargetPopoverOpen, setModalTargetPopoverOpen] = useState<Record<number, boolean>>({});
+
+  // 결재 유형 목록 상태
+  const [approvalDefinitions, setApprovalDefinitions] = useState<ApprovalDefinition[]>([]);
+  const [approvalDefinitionsLoading, setApprovalDefinitionsLoading] = useState(false);
+
+  // 🆕 그룹화 컬럼 선택용 상태
+  const [currentTableColumns, setCurrentTableColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [groupByColumnOpen, setGroupByColumnOpen] = useState(false);
+  const [groupByColumnSearch, setGroupByColumnSearch] = useState("");
+  const [modalSourceSearch, setModalSourceSearch] = useState<Record<number, string>>({});
+  const [modalTargetSearch, setModalTargetSearch] = useState<Record<number, string>>({});
+
+  // 🆕 modal 액션용 필드 매핑 상태
+  const [modalActionSourceTable, setModalActionSourceTable] = useState<string | null>(null);
+  const [modalActionTargetTable, setModalActionTargetTable] = useState<string | null>(null);
+  const [modalActionSourceColumns, setModalActionSourceColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [modalActionTargetColumns, setModalActionTargetColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [modalActionFieldMappings, setModalActionFieldMappings] = useState<
+    Array<{ sourceField: string; targetField: string }>
+  >([]);
+  const [modalFieldMappingSourceOpen, setModalFieldMappingSourceOpen] = useState<Record<number, boolean>>({});
+  const [modalFieldMappingTargetOpen, setModalFieldMappingTargetOpen] = useState<Record<number, boolean>>({});
+  const [modalFieldMappingSourceSearch, setModalFieldMappingSourceSearch] = useState<Record<number, string>>({});
+  const [modalFieldMappingTargetSearch, setModalFieldMappingTargetSearch] = useState<Record<number, string>>({});
+  // 컴포넌트 prop 변경 시 로컬 상태 동기화 (Input만)
+  useEffect(() => {
+    const latestConfig = component.componentConfig || {};
+    const latestAction = latestConfig.action || {};
+
+    setLocalInputs({
+      actionType: String(latestAction.type || "save"),
+      modalTitle: String(latestAction.modalTitle || ""),
+      modalDescription: String(latestAction.modalDescription || ""),
+      editModalTitle: String(latestAction.editModalTitle || ""),
+      editModalDescription: String(latestAction.editModalDescription || ""),
+      targetUrl: String(latestAction.targetUrl || ""),
+      groupByColumn: String(latestAction.groupByColumns?.[0] || ""),
+    });
+
+    // 🆕 제목 블록 초기화
+    if (latestAction.modalTitleBlocks && latestAction.modalTitleBlocks.length > 0) {
+      setTitleBlocks(latestAction.modalTitleBlocks);
+    } else {
+      // 기본값: 빈 배열
+      setTitleBlocks([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [component.id, component.componentConfig?.action?.type]);
+
+  // 🆕 제목 블록 핸들러
+  const addTextBlock = () => {
+    const newBlock: TitleBlock = {
+      id: `text-${Date.now()}`,
+      type: "text",
+      value: "",
+    };
+    const updatedBlocks = [...titleBlocks, newBlock];
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const addFieldBlock = () => {
+    const newBlock: TitleBlock = {
+      id: `field-${Date.now()}`,
+      type: "field",
+      value: "",
+      tableName: "",
+      label: "",
+    };
+    const updatedBlocks = [...titleBlocks, newBlock];
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const updateBlock = (id: string, updates: Partial<TitleBlock>) => {
+    const updatedBlocks = titleBlocks.map((block) => (block.id === id ? { ...block, ...updates } : block));
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const removeBlock = (id: string) => {
+    const updatedBlocks = titleBlocks.filter((block) => block.id !== id);
+    setTitleBlocks(updatedBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", updatedBlocks);
+  };
+
+  const moveBlockUp = (id: string) => {
+    const index = titleBlocks.findIndex((b) => b.id === id);
+    if (index <= 0) return;
+    const newBlocks = [...titleBlocks];
+    [newBlocks[index - 1], newBlocks[index]] = [newBlocks[index], newBlocks[index - 1]];
+    setTitleBlocks(newBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", newBlocks);
+  };
+
+  const moveBlockDown = (id: string) => {
+    const index = titleBlocks.findIndex((b) => b.id === id);
+    if (index < 0 || index >= titleBlocks.length - 1) return;
+    const newBlocks = [...titleBlocks];
+    [newBlocks[index], newBlocks[index + 1]] = [newBlocks[index + 1], newBlocks[index]];
+    setTitleBlocks(newBlocks);
+    onUpdateProperty("componentConfig.action.modalTitleBlocks", newBlocks);
+  };
+
+  // 🆕 제목 미리보기 생성
+  const generateTitlePreview = (): string => {
+    if (titleBlocks.length === 0) return "(제목 없음)";
+    return titleBlocks
+      .map((block) => {
+        if (block.type === "text") {
+          return block.value || "(텍스트)";
+        } else {
+          return block.label || block.value || "(필드)";
+        }
+      })
+      .join("");
+  };
+
+  // 🆕 시스템의 모든 테이블 목록 로드
+  useEffect(() => {
+    const fetchAllTables = async () => {
+      try {
+        const response = await apiClient.get("/table-management/tables");
+
+        if (response.data.success && response.data.data) {
+          const tables = response.data.data.map((table: any) => ({
+            name: table.tableName,
+            label: table.displayName || table.tableName,
+          }));
+          setAvailableTables(tables);
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      }
+    };
+
+    fetchAllTables();
+  }, []);
+
+  // 🆕 특정 테이블의 컬럼 로드
+  const loadTableColumns = async (tableName: string) => {
+    if (!tableName || tableColumnsMap[tableName]) return;
+
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      console.log(`📥 테이블 ${tableName} 컬럼 응답:`, response.data);
+
+      if (response.data.success) {
+        // data가 배열인지 확인
+        let columnData = response.data.data;
+
+        // data.columns 형태일 수도 있음
+        if (!Array.isArray(columnData) && columnData?.columns) {
+          columnData = columnData.columns;
+        }
+
+        // data.data 형태일 수도 있음
+        if (!Array.isArray(columnData) && columnData?.data) {
+          columnData = columnData.data;
+        }
+
+        if (Array.isArray(columnData)) {
+          const columns = columnData.map((col: any) => {
+            const name = col.name || col.columnName;
+            const label = col.displayName || col.label || col.columnLabel || name;
+            console.log(`  - 컬럼: ${name} → "${label}"`);
+            return { name, label };
+          });
+          setTableColumnsMap((prev) => ({ ...prev, [tableName]: columns }));
+          console.log(`✅ 테이블 ${tableName} 컬럼 로드 성공:`, columns.length, "개");
+        } else {
+          console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
+        }
+      }
+    } catch (error) {
+      console.error("컬럼 로드 실패:", error);
+    }
+  };
+
+  // 멀티 테이블 매핑: 소스/타겟 테이블 컬럼 로드
+  const loadMappingColumns = useCallback(async (tableName: string): Promise<Array<{ name: string; label: string }>> => {
+    try {
+      const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+      if (response.data.success) {
+        let columnData = response.data.data;
+        if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+        if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+        if (Array.isArray(columnData)) {
+          return columnData.map((col: any) => ({
+            name: col.name || col.columnName,
+            label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
+          }));
+        }
+      }
+    } catch (error) {
+      console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
+    }
+    return [];
+  }, []);
+
+  useEffect(() => {
+    const multiTableMappings: Array<{ sourceTable: string }> = config.action?.dataTransfer?.multiTableMappings || [];
+    const legacySourceTable = config.action?.dataTransfer?.sourceTable;
+    const targetTable = config.action?.dataTransfer?.targetTable;
+
+    const loadAll = async () => {
+      const sourceTableNames = multiTableMappings.map((m) => m.sourceTable).filter(Boolean);
+      if (legacySourceTable && !sourceTableNames.includes(legacySourceTable)) {
+        sourceTableNames.push(legacySourceTable);
+      }
+
+      const newMap: Record<string, Array<{ name: string; label: string }>> = {};
+      for (const tbl of sourceTableNames) {
+        if (!mappingSourceColumnsMap[tbl]) {
+          newMap[tbl] = await loadMappingColumns(tbl);
+        }
+      }
+      if (Object.keys(newMap).length > 0) {
+        setMappingSourceColumnsMap((prev) => ({ ...prev, ...newMap }));
+      }
+
+      if (targetTable && mappingTargetColumns.length === 0) {
+        const cols = await loadMappingColumns(targetTable);
+        setMappingTargetColumns(cols);
+      }
+    };
+
+    loadAll();
+  }, [
+    config.action?.dataTransfer?.multiTableMappings,
+    config.action?.dataTransfer?.sourceTable,
+    config.action?.dataTransfer?.targetTable,
+    loadMappingColumns,
+  ]);
+
+  // 🆕 modal 액션: 대상 화면 테이블 조회 및 필드 매핑 로드
+  useEffect(() => {
+    const actionType = config.action?.type;
+    if (actionType !== "modal") return;
+
+    const autoDetect = config.action?.autoDetectDataSource;
+    if (!autoDetect) {
+      // 데이터 전달이 비활성화되면 상태 초기화
+      setModalActionSourceTable(null);
+      setModalActionTargetTable(null);
+      setModalActionSourceColumns([]);
+      setModalActionTargetColumns([]);
+      return;
+    }
+
+    const targetScreenId = config.action?.targetScreenId;
+    if (!targetScreenId) return;
+
+    const loadModalActionMappingData = async () => {
+      // 1. 소스 테이블 감지 (현재 화면)
+      let sourceTableName: string | null = currentTableName || null;
+
+      // allComponents에서 분할패널/테이블리스트/통합목록 감지
+      for (const comp of allComponents) {
+        const compType = comp.componentType || (comp as any).componentConfig?.type;
+        const compConfig = (comp as any).componentConfig || {};
+
+        if (compType === "split-panel-layout" || compType === "screen-split-panel") {
+          sourceTableName = compConfig.leftPanel?.tableName || compConfig.tableName || null;
+          if (sourceTableName) break;
+        }
+        if (compType === "table-list") {
+          sourceTableName = compConfig.tableName || compConfig.selectedTable || null;
+          if (sourceTableName) break;
+        }
+        if (compType === "v2-list") {
+          sourceTableName = compConfig.dataSource?.table || compConfig.tableName || null;
+          if (sourceTableName) break;
+        }
+      }
+
+      setModalActionSourceTable(sourceTableName);
+
+      // 2. 대상 화면의 테이블 조회
+      let targetTableName: string | null = null;
+      try {
+        const screenResponse = await apiClient.get(`/screen-management/screens/${targetScreenId}`);
+        if (screenResponse.data.success && screenResponse.data.data) {
+          targetTableName = screenResponse.data.data.tableName || null;
+        } else if (screenResponse.data?.tableName) {
+          // 직접 데이터 반환 형식인 경우
+          targetTableName = screenResponse.data.tableName || null;
+        }
+      } catch (error) {
+        console.error("대상 화면 정보 로드 실패:", error);
+      }
+
+      setModalActionTargetTable(targetTableName);
+
+      // 3. 소스 테이블 컬럼 로드
+      if (sourceTableName) {
+        try {
+          const response = await apiClient.get(`/table-management/tables/${sourceTableName}/columns`);
+          if (response.data.success) {
+            let columnData = response.data.data;
+            if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+            if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+            if (Array.isArray(columnData)) {
+              const columns = columnData.map((col: any) => ({
+                name: col.name || col.columnName,
+                label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
+              }));
+              setModalActionSourceColumns(columns);
+            }
+          }
+        } catch (error) {
+          console.error("소스 테이블 컬럼 로드 실패:", error);
+        }
+      }
+
+      // 4. 대상 테이블 컬럼 로드
+      if (targetTableName) {
+        try {
+          const response = await apiClient.get(`/table-management/tables/${targetTableName}/columns`);
+          if (response.data.success) {
+            let columnData = response.data.data;
+            if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+            if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+            if (Array.isArray(columnData)) {
+              const columns = columnData.map((col: any) => ({
+                name: col.name || col.columnName,
+                label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
+              }));
+              setModalActionTargetColumns(columns);
+            }
+          }
+        } catch (error) {
+          console.error("대상 테이블 컬럼 로드 실패:", error);
+        }
+      }
+
+      // 5. 기존 필드 매핑 로드 또는 자동 매핑 생성
+      const existingMappings = config.action?.fieldMappings || [];
+      if (existingMappings.length > 0) {
+        setModalActionFieldMappings(existingMappings);
+      } else if (sourceTableName && targetTableName && sourceTableName === targetTableName) {
+        // 테이블이 같으면 자동 매핑 (동일 컬럼명)
+        setModalActionFieldMappings([]); // 빈 배열 = 자동 매핑
+      }
+    };
+
+    loadModalActionMappingData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    config.action?.type,
+    config.action?.autoDetectDataSource,
+    config.action?.targetScreenId,
+    currentTableName,
+    allComponents,
+  ]);
+
+  // 🆕 현재 테이블 컬럼 로드 (그룹화 컬럼 선택용)
+  useEffect(() => {
+    if (!currentTableName) return;
+
+    const loadCurrentTableColumns = async () => {
+      try {
+        const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
+        if (response.data.success) {
+          let columnData = response.data.data;
+          if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+          if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+          if (Array.isArray(columnData)) {
+            const columns = columnData.map((col: any) => ({
+              name: col.name || col.columnName,
+              label: col.displayName || col.label || col.columnLabel || col.name || col.columnName,
+            }));
+            setCurrentTableColumns(columns);
+          }
+        }
+      } catch (error) {
+        console.error("현재 테이블 컬럼 로드 실패:", error);
+      }
+    };
+
+    loadCurrentTableColumns();
+  }, [currentTableName]);
+
+  // 🆕 openModalWithData 소스/타겟 테이블 컬럼 로드
+  useEffect(() => {
+    const actionType = config.action?.type;
+    if (actionType !== "openModalWithData") return;
+
+    const loadModalMappingColumns = async () => {
+      // 소스 테이블: 현재 화면의 분할 패널 또는 테이블에서 감지
+      let sourceTableName: string | null = null;
+
+      console.log("[openModalWithData] 컬럼 로드 시작:", {
+        allComponentsCount: allComponents.length,
+        currentTableName,
+        targetScreenId: config.action?.targetScreenId,
+      });
+
+      // 모든 컴포넌트 타입 로그
+      allComponents.forEach((comp, idx) => {
+        const compType = comp.componentType || (comp as any).componentConfig?.type;
+        console.log(
+          `  [${idx}] componentType: ${compType}, tableName: ${(comp as any).componentConfig?.tableName || (comp as any).componentConfig?.leftPanel?.tableName || "N/A"}`,
+        );
+      });
+
+      for (const comp of allComponents) {
+        const compType = comp.componentType || (comp as any).componentConfig?.type;
+        const compConfig = (comp as any).componentConfig || {};
+
+        // 분할 패널 타입들 (다양한 경로에서 테이블명 추출)
+        if (compType === "split-panel-layout" || compType === "screen-split-panel") {
+          sourceTableName = compConfig?.leftPanel?.tableName || compConfig?.leftTableName || compConfig?.tableName;
+          if (sourceTableName) {
+            console.log(`✅ [openModalWithData] split-panel-layout에서 소스 테이블 감지: ${sourceTableName}`);
+            break;
+          }
+        }
+
+        // split-panel-layout2 타입 (새로운 분할 패널)
+        if (compType === "split-panel-layout2") {
+          sourceTableName = compConfig?.leftPanel?.tableName || compConfig?.tableName || compConfig?.leftTableName;
+          if (sourceTableName) {
+            console.log(`✅ [openModalWithData] split-panel-layout2에서 소스 테이블 감지: ${sourceTableName}`);
+            break;
+          }
+        }
+
+        // 테이블 리스트 타입
+        if (compType === "table-list") {
+          sourceTableName = compConfig?.tableName;
+          if (sourceTableName) {
+            console.log(`✅ [openModalWithData] table-list에서 소스 테이블 감지: ${sourceTableName}`);
+            break;
+          }
+        }
+
+        // 🆕 모든 컴포넌트에서 tableName 찾기 (폴백)
+        if (!sourceTableName && compConfig?.tableName) {
+          sourceTableName = compConfig.tableName;
+          console.log(`✅ [openModalWithData] ${compType}에서 소스 테이블 감지 (폴백): ${sourceTableName}`);
+          break;
+        }
+      }
+
+      // 여전히 없으면 currentTableName 사용 (화면 레벨 테이블명)
+      if (!sourceTableName && currentTableName) {
+        sourceTableName = currentTableName;
+        console.log(`✅ [openModalWithData] currentTableName에서 소스 테이블 사용: ${sourceTableName}`);
+      }
+
+      if (!sourceTableName) {
+        console.warn("[openModalWithData] 소스 테이블을 찾을 수 없습니다.");
+      }
+
+      // 소스 테이블 컬럼 로드
+      if (sourceTableName) {
+        try {
+          const response = await apiClient.get(`/table-management/tables/${sourceTableName}/columns`);
+          if (response.data.success) {
+            let columnData = response.data.data;
+            if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+            if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+            if (Array.isArray(columnData)) {
+              const columns = columnData.map((col: any) => ({
+                name: col.name || col.columnName || col.column_name,
+                label:
+                  col.displayName ||
+                  col.label ||
+                  col.columnLabel ||
+                  col.display_name ||
+                  col.name ||
+                  col.columnName ||
+                  col.column_name,
+              }));
+              setModalSourceColumns(columns);
+              console.log(`✅ [openModalWithData] 소스 테이블(${sourceTableName}) 컬럼 로드 완료:`, columns.length);
+            }
+          }
+        } catch (error) {
+          console.error("소스 테이블 컬럼 로드 실패:", error);
+        }
+      }
+
+      // 타겟 화면의 테이블 컬럼 로드
+      const targetScreenId = config.action?.targetScreenId;
+      if (targetScreenId) {
+        try {
+          // 타겟 화면 정보 가져오기
+          const screenResponse = await apiClient.get(`/screen-management/screens/${targetScreenId}`);
+          console.log("[openModalWithData] 타겟 화면 응답:", screenResponse.data);
+
+          if (screenResponse.data.success && screenResponse.data.data) {
+            const targetTableName = screenResponse.data.data.tableName;
+            console.log("[openModalWithData] 타겟 화면 테이블명:", targetTableName);
+
+            if (targetTableName) {
+              const columnResponse = await apiClient.get(`/table-management/tables/${targetTableName}/columns`);
+              if (columnResponse.data.success) {
+                let columnData = columnResponse.data.data;
+                if (!Array.isArray(columnData) && columnData?.columns) columnData = columnData.columns;
+                if (!Array.isArray(columnData) && columnData?.data) columnData = columnData.data;
+
+                if (Array.isArray(columnData)) {
+                  const columns = columnData.map((col: any) => ({
+                    name: col.name || col.columnName || col.column_name,
+                    label:
+                      col.displayName ||
+                      col.label ||
+                      col.columnLabel ||
+                      col.display_name ||
+                      col.name ||
+                      col.columnName ||
+                      col.column_name,
+                  }));
+                  setModalTargetColumns(columns);
+                  console.log(`✅ [openModalWithData] 타겟 테이블(${targetTableName}) 컬럼 로드 완료:`, columns.length);
+                }
+              }
+            } else {
+              console.warn("[openModalWithData] 타겟 화면에 테이블명이 없습니다.");
+            }
+          }
+        } catch (error) {
+          console.error("타겟 화면 테이블 컬럼 로드 실패:", error);
+        }
+      } else {
+        console.warn("[openModalWithData] 타겟 화면 ID가 없습니다.");
+      }
+    };
+
+    loadModalMappingColumns();
+  }, [config.action?.type, config.action?.targetScreenId, allComponents, currentTableName]);
+
+  // 화면 목록 가져오기 (현재 편집 중인 화면의 회사 코드 기준)
+  useEffect(() => {
+    const fetchScreens = async () => {
+      try {
+        setScreensLoading(true);
+        // 현재 편집 중인 화면의 회사 코드 기준으로 화면 목록 조회
+        const params: any = {
+          page: 1,
+          size: 9999, // 매우 큰 값으로 설정하여 전체 목록 가져오기
+        };
+
+        // 현재 화면의 회사 코드가 있으면 필터링 파라미터로 전달
+        if (currentScreenCompanyCode) {
+          params.companyCode = currentScreenCompanyCode;
+        }
+
+        const response = await apiClient.get("/screen-management/screens", {
+          params,
+        });
+
+        if (response.data.success && Array.isArray(response.data.data)) {
+          const screenList = response.data.data.map((screen: any) => ({
+            id: screen.screenId,
+            name: screen.screenName,
+            description: screen.description,
+          }));
+          setScreens(screenList);
+        }
+      } catch (error) {
+        // console.error("❌ 화면 목록 로딩 실패:", error);
+      } finally {
+        setScreensLoading(false);
+      }
+    };
+
+    fetchScreens();
+  }, [currentScreenCompanyCode]);
+
+  // 결재 유형 목록 가져오기 (approval 액션일 때)
+  useEffect(() => {
+    if (localInputs.actionType !== "approval") return;
+    const fetchApprovalDefinitions = async () => {
+      setApprovalDefinitionsLoading(true);
+      try {
+        const res = await getApprovalDefinitions({ is_active: "Y" });
+        if (res.success && res.data) {
+          setApprovalDefinitions(res.data);
+        }
+      } catch {
+        // 조용히 실패
+      } finally {
+        setApprovalDefinitionsLoading(false);
+      }
+    };
+    fetchApprovalDefinitions();
+  }, [localInputs.actionType]);
+
+  // 테이블 컬럼 목록 가져오기 (테이블 이력 보기 액션일 때)
+  useEffect(() => {
+    const fetchTableColumns = async () => {
+      // 테이블 이력 보기 액션이 아니면 스킵
+      if (config.action?.type !== "view_table_history") {
+        return;
+      }
+
+      // 1. 수동 입력된 테이블명 우선
+      // 2. 없으면 현재 화면의 테이블명 사용
+      const tableName = config.action?.historyTableName || currentTableName;
+
+      // 테이블명이 없으면 스킵
+      if (!tableName) {
+        return;
+      }
+
+      try {
+        setColumnsLoading(true);
+        const response = await apiClient.get(`/table-management/tables/${tableName}/columns`, {
+          params: {
+            page: 1,
+            size: 9999, // 전체 컬럼 가져오기
+          },
+        });
+
+        // API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
+        const columnData = response.data.data?.columns;
+
+        if (!columnData || !Array.isArray(columnData)) {
+          console.error("❌ 컬럼 데이터가 배열이 아닙니다:", columnData);
+          setTableColumns([]);
+          return;
+        }
+
+        if (response.data.success) {
+          // ID 컬럼과 날짜 관련 컬럼 제외
+          const filteredColumns = columnData
+            .filter((col: any) => {
+              const colName = col.columnName.toLowerCase();
+              const dataType = col.dataType?.toLowerCase() || "";
+
+              // ID 컬럼 제외 (id, _id로 끝나는 컬럼)
+              if (colName === "id" || colName.endsWith("_id")) {
+                return false;
+              }
+
+              // 날짜/시간 타입 제외 (데이터 타입 기준)
+              if (dataType.includes("date") || dataType.includes("time") || dataType.includes("timestamp")) {
+                return false;
+              }
+
+              // 날짜/시간 관련 컬럼명 제외 (컬럼명에 date, time, at 포함)
+              if (
+                colName.includes("date") ||
+                colName.includes("time") ||
+                colName.endsWith("_at") ||
+                colName.startsWith("created") ||
+                colName.startsWith("updated")
+              ) {
+                return false;
+              }
+
+              return true;
+            })
+            .map((col: any) => col.columnName);
+
+          setTableColumns(filteredColumns);
+        }
+      } catch (error) {
+        console.error("❌ 테이블 컬럼 로딩 실패:", error);
+      } finally {
+        setColumnsLoading(false);
+      }
+    };
+
+    fetchTableColumns();
+  }, [config.action?.type, config.action?.historyTableName, currentTableName]);
+
+  // 검색 필터링 함수
+  const filterScreens = (searchTerm: string) => {
+    if (!searchTerm.trim()) return screens;
+    return screens.filter(
+      (screen) =>
+        screen.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        (screen.description && screen.description.toLowerCase().includes(searchTerm.toLowerCase())),
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 모달 열기 액션 설정 */}
+      {localInputs.actionType === "modal" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">모달 설정</h4>
+
+          <div>
+            <Label htmlFor="modal-title">모달 제목</Label>
+            <Input
+              id="modal-title"
+              placeholder="모달 제목을 입력하세요"
+              value={localInputs.modalTitle}
+              onChange={(e) => {
+                const newValue = e.target.value;
+                setLocalInputs((prev) => ({ ...prev, modalTitle: newValue }));
+                onUpdateProperty("componentConfig.action.modalTitle", newValue);
+              }}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="modal-description">모달 설명</Label>
+            <Input
+              id="modal-description"
+              placeholder="모달 설명을 입력하세요 (선택사항)"
+              value={localInputs.modalDescription}
+              onChange={(e) => {
+                const newValue = e.target.value;
+                setLocalInputs((prev) => ({ ...prev, modalDescription: newValue }));
+                onUpdateProperty("componentConfig.action.modalDescription", newValue);
+              }}
+            />
+            <p className="text-muted-foreground mt-1 text-xs">모달 제목 아래에 표시됩니다</p>
+          </div>
+
+          <div>
+            <Label htmlFor="modal-size">모달 크기</Label>
+            <Select
+              value={component.componentConfig?.action?.modalSize || "md"}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.modalSize", value);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="모달 크기 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sm">작음 (Small)</SelectItem>
+                <SelectItem value="md">보통 (Medium)</SelectItem>
+                <SelectItem value="lg">큼 (Large)</SelectItem>
+                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="target-screen-modal">대상 화면 선택</Label>
+            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={modalScreenOpen}
+                  className="h-6 w-full justify-between px-2 py-0 text-xs"
+                  disabled={screensLoading}
+                >
+                  {config.action?.targetScreenId
+                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
+                      "화면을 선택하세요..."
+                    : "화면을 선택하세요..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="화면 검색..."
+                      value={modalSearchTerm}
+                      onChange={(e) => setModalSearchTerm(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {(() => {
+                      const filteredScreens = filterScreens(modalSearchTerm);
+                      if (screensLoading) {
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
+                      }
+                      if (filteredScreens.length === 0) {
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
+                      }
+                      return filteredScreens.map((screen, index) => (
+                        <div
+                          key={`modal-screen-${screen.id}-${index}`}
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
+                            setModalScreenOpen(false);
+                            setModalSearchTerm("");
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{screen.name}</span>
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 선택된 데이터 전달 옵션 */}
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="auto-detect-data-source"
+              checked={component.componentConfig?.action?.autoDetectDataSource === true}
+              onCheckedChange={(checked) => {
+                onUpdateProperty("componentConfig.action.autoDetectDataSource", checked);
+                if (!checked) {
+                  // 체크 해제 시 필드 매핑도 초기화
+                  onUpdateProperty("componentConfig.action.fieldMappings", []);
+                }
+              }}
+            />
+            <div className="flex flex-col">
+              <Label htmlFor="auto-detect-data-source" className="cursor-pointer text-sm">
+                선택된 데이터 전달
+              </Label>
+              <p className="text-muted-foreground text-xs">
+                TableList/SplitPanel에서 선택된 데이터를 모달에 자동으로 전달합니다
+              </p>
+            </div>
+          </div>
+
+          {/* 🆕 필드 매핑 UI (데이터 전달 활성화 + 테이블이 다른 경우) */}
+          {component.componentConfig?.action?.autoDetectDataSource === true && (
+            <div className="bg-background mt-4 space-y-3 rounded-lg border p-3">
+              {/* 테이블 정보 표시 */}
+              <div className="flex items-center justify-between text-xs">
+                <div className="flex items-center gap-2">
+                  <Database className="text-muted-foreground h-3 w-3" />
+                  <span className="text-muted-foreground">소스:</span>
+                  <span className="font-medium">{modalActionSourceTable || "감지 중..."}</span>
+                </div>
+                <span className="text-muted-foreground">→</span>
+                <div className="flex items-center gap-2">
+                  <span className="text-muted-foreground">대상:</span>
+                  <span className="font-medium">{modalActionTargetTable || "감지 중..."}</span>
+                </div>
+              </div>
+
+              {/* 테이블이 같으면 자동 매핑 안내 */}
+              {modalActionSourceTable &&
+                modalActionTargetTable &&
+                modalActionSourceTable === modalActionTargetTable && (
+                  <div className="rounded-md bg-emerald-50 p-2 text-xs text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
+                    동일한 테이블입니다. 컬럼명이 같은 필드는 자동으로 매핑됩니다.
+                  </div>
+                )}
+
+              {/* 테이블이 다르면 필드 매핑 UI 표시 */}
+              {modalActionSourceTable &&
+                modalActionTargetTable &&
+                modalActionSourceTable !== modalActionTargetTable && (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-xs font-medium">필드 매핑</Label>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="h-6 text-xs"
+                        onClick={() => {
+                          const newMappings = [
+                            ...(component.componentConfig?.action?.fieldMappings || []),
+                            { sourceField: "", targetField: "" },
+                          ];
+                          setModalActionFieldMappings(newMappings);
+                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                        }}
+                      >
+                        <Plus className="mr-1 h-3 w-3" />
+                        매핑 추가
+                      </Button>
+                    </div>
+
+                    {(component.componentConfig?.action?.fieldMappings || []).length === 0 && (
+                      <p className="text-muted-foreground text-xs">
+                        컬럼명이 다른 경우 매핑을 추가하세요. 매핑이 없으면 동일 컬럼명만 전달됩니다.
+                      </p>
+                    )}
+
+                    {(component.componentConfig?.action?.fieldMappings || []).map((mapping: any, index: number) => (
+                      <div key={index} className="flex items-center gap-2">
+                        {/* 소스 필드 선택 */}
+                        <Popover
+                          open={modalFieldMappingSourceOpen[index] || false}
+                          onOpenChange={(open) =>
+                            setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: open }))
+                          }
+                        >
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
+                              {mapping.sourceField
+                                ? modalActionSourceColumns.find((c) => c.name === mapping.sourceField)?.label ||
+                                  mapping.sourceField
+                                : "소스 컬럼 선택"}
+                              <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[200px] p-0" align="start">
+                            <Command>
+                              <CommandInput
+                                placeholder="컬럼 검색..."
+                                value={modalFieldMappingSourceSearch[index] || ""}
+                                onValueChange={(val) =>
+                                  setModalFieldMappingSourceSearch((prev) => ({ ...prev, [index]: val }))
+                                }
+                              />
+                              <CommandList>
+                                <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                <CommandGroup>
+                                  {modalActionSourceColumns
+                                    .filter(
+                                      (col) =>
+                                        col.name
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()) ||
+                                        col.label
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingSourceSearch[index] || "").toLowerCase()),
+                                    )
+                                    .map((col) => (
+                                      <CommandItem
+                                        key={col.name}
+                                        value={col.name}
+                                        onSelect={() => {
+                                          const newMappings = [
+                                            ...(component.componentConfig?.action?.fieldMappings || []),
+                                          ];
+                                          newMappings[index] = { ...newMappings[index], sourceField: col.name };
+                                          setModalActionFieldMappings(newMappings);
+                                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                                          setModalFieldMappingSourceOpen((prev) => ({ ...prev, [index]: false }));
+                                        }}
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            mapping.sourceField === col.name ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="text-xs font-medium">{col.label}</span>
+                                          <span className="text-muted-foreground text-[10px]">{col.name}</span>
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+
+                        <span className="text-muted-foreground text-xs">→</span>
+
+                        {/* 대상 필드 선택 */}
+                        <Popover
+                          open={modalFieldMappingTargetOpen[index] || false}
+                          onOpenChange={(open) =>
+                            setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: open }))
+                          }
+                        >
+                          <PopoverTrigger asChild>
+                            <Button variant="outline" size="sm" className="h-7 flex-1 justify-between text-xs">
+                              {mapping.targetField
+                                ? modalActionTargetColumns.find((c) => c.name === mapping.targetField)?.label ||
+                                  mapping.targetField
+                                : "대상 컬럼 선택"}
+                              <ChevronsUpDown className="ml-1 h-3 w-3 opacity-50" />
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-[200px] p-0" align="start">
+                            <Command>
+                              <CommandInput
+                                placeholder="컬럼 검색..."
+                                value={modalFieldMappingTargetSearch[index] || ""}
+                                onValueChange={(val) =>
+                                  setModalFieldMappingTargetSearch((prev) => ({ ...prev, [index]: val }))
+                                }
+                              />
+                              <CommandList>
+                                <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                <CommandGroup>
+                                  {modalActionTargetColumns
+                                    .filter(
+                                      (col) =>
+                                        col.name
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()) ||
+                                        col.label
+                                          .toLowerCase()
+                                          .includes((modalFieldMappingTargetSearch[index] || "").toLowerCase()),
+                                    )
+                                    .map((col) => (
+                                      <CommandItem
+                                        key={col.name}
+                                        value={col.name}
+                                        onSelect={() => {
+                                          const newMappings = [
+                                            ...(component.componentConfig?.action?.fieldMappings || []),
+                                          ];
+                                          newMappings[index] = { ...newMappings[index], targetField: col.name };
+                                          setModalActionFieldMappings(newMappings);
+                                          onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                                          setModalFieldMappingTargetOpen((prev) => ({ ...prev, [index]: false }));
+                                        }}
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-4 w-4",
+                                            mapping.targetField === col.name ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        <div className="flex flex-col">
+                                          <span className="text-xs font-medium">{col.label}</span>
+                                          <span className="text-muted-foreground text-[10px]">{col.name}</span>
+                                        </div>
+                                      </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                              </CommandList>
+                            </Command>
+                          </PopoverContent>
+                        </Popover>
+
+                        {/* 삭제 버튼 */}
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="text-destructive hover:bg-destructive/10 h-7 w-7 p-0"
+                          onClick={() => {
+                            const newMappings = (component.componentConfig?.action?.fieldMappings || []).filter(
+                              (_: any, i: number) => i !== index,
+                            );
+                            setModalActionFieldMappings(newMappings);
+                            onUpdateProperty("componentConfig.action.fieldMappings", newMappings);
+                          }}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 🆕 데이터 전달 + 모달 열기 액션 설정 (deprecated - 하위 호환성 유지) */}
+      {component.componentConfig?.action?.type === "openModalWithData" && (
+        <div className="mt-4 space-y-4 rounded-lg border bg-amber-50 p-4 dark:bg-amber-950/20">
+          <h4 className="text-foreground text-sm font-medium">데이터 전달 + 모달 설정</h4>
+          <p className="text-xs text-amber-600 dark:text-amber-400">
+            이 옵션은 "모달 열기" 액션으로 통합되었습니다. 새 개발에서는 "모달 열기" + "선택된 데이터 전달"을
+            사용하세요.
+          </p>
+
+          {/* 🆕 블록 기반 제목 빌더 */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label>모달 제목 구성</Label>
+              <div className="flex gap-1">
+                <Button type="button" variant="outline" size="sm" onClick={addTextBlock} className="h-6 text-xs">
+                  <Type className="mr-1 h-3 w-3" />
+                  텍스트 추가
+                </Button>
+                <Button type="button" variant="outline" size="sm" onClick={addFieldBlock} className="h-6 text-xs">
+                  <Database className="mr-1 h-3 w-3" />
+                  필드 추가
+                </Button>
+              </div>
+            </div>
+
+            {/* 블록 목록 */}
+            <div className="space-y-2">
+              {titleBlocks.length === 0 ? (
+                <div className="text-muted-foreground rounded border-2 border-dashed py-4 text-center text-xs">
+                  텍스트나 필드를 추가하여 제목을 구성하세요
+                </div>
+              ) : (
+                titleBlocks.map((block, index) => (
+                  <Card key={block.id} className="p-2">
+                    <div className="flex items-start gap-2">
+                      {/* 순서 변경 버튼 */}
+                      <div className="flex flex-col gap-0.5">
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => moveBlockUp(block.id)}
+                          disabled={index === 0}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronUp className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => moveBlockDown(block.id)}
+                          disabled={index === titleBlocks.length - 1}
+                          className="h-5 w-5 p-0"
+                        >
+                          <ChevronDown className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      {/* 블록 타입 표시 */}
+                      <div className="mt-1 flex-shrink-0">
+                        {block.type === "text" ? (
+                          <Type className="h-4 w-4 text-primary" />
+                        ) : (
+                          <Database className="h-4 w-4 text-emerald-500" />
+                        )}
+                      </div>
+
+                      {/* 블록 설정 */}
+                      <div className="flex-1 space-y-2">
+                        {block.type === "text" ? (
+                          // 텍스트 블록
+                          <Input
+                            placeholder="텍스트 입력 (예: 품목 상세정보 - )"
+                            value={block.value}
+                            onChange={(e) => updateBlock(block.id, { value: e.target.value })}
+                            className="h-7 text-xs"
+                          />
+                        ) : (
+                          // 필드 블록
+                          <>
+                            {/* 테이블 선택 - Combobox */}
+                            <Popover
+                              open={blockTablePopoverOpen[block.id] || false}
+                              onOpenChange={(open) => {
+                                setBlockTablePopoverOpen((prev) => ({ ...prev, [block.id]: open }));
+                              }}
+                            >
+                              <PopoverTrigger asChild>
+                                <Button
+                                  variant="outline"
+                                  role="combobox"
+                                  className="h-7 w-full justify-between text-xs"
+                                >
+                                  {block.tableName
+                                    ? availableTables.find((t) => t.name === block.tableName)?.label || block.tableName
+                                    : "테이블 선택"}
+                                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                </Button>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-full p-0" align="start">
+                                <Command shouldFilter={false}>
+                                  <CommandInput
+                                    placeholder="테이블 검색 (라벨 또는 이름)..."
+                                    className="h-7 text-xs"
+                                    value={blockTableSearches[block.id] || ""}
+                                    onValueChange={(value) => {
+                                      setBlockTableSearches((prev) => ({ ...prev, [block.id]: value }));
+                                    }}
+                                  />
+                                  <CommandList>
+                                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                                    <CommandGroup>
+                                      {availableTables
+                                        .filter((table) => {
+                                          const search = (blockTableSearches[block.id] || "").toLowerCase();
+                                          if (!search) return true;
+                                          return (
+                                            table.label.toLowerCase().includes(search) ||
+                                            table.name.toLowerCase().includes(search)
+                                          );
+                                        })
+                                        .map((table) => (
+                                          <CommandItem
+                                            key={table.name}
+                                            value={table.name}
+                                            onSelect={() => {
+                                              updateBlock(block.id, { tableName: table.name, value: "" });
+                                              loadTableColumns(table.name);
+                                              setBlockTableSearches((prev) => ({ ...prev, [block.id]: "" }));
+                                              setBlockTablePopoverOpen((prev) => ({ ...prev, [block.id]: false }));
+                                            }}
+                                            className="text-xs"
+                                          >
+                                            <Check
+                                              className={cn(
+                                                "mr-2 h-3 w-3",
+                                                block.tableName === table.name ? "opacity-100" : "opacity-0",
+                                              )}
+                                            />
+                                            <span className="font-medium">{table.label}</span>
+                                            <span className="text-muted-foreground ml-2 text-[10px]">
+                                              ({table.name})
+                                            </span>
+                                          </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
+
+                            {block.tableName && (
+                              <>
+                                {/* 컬럼 선택 - Combobox (라벨명 표시) */}
+                                <Popover
+                                  open={blockColumnPopoverOpen[block.id] || false}
+                                  onOpenChange={(open) => {
+                                    setBlockColumnPopoverOpen((prev) => ({ ...prev, [block.id]: open }));
+                                  }}
+                                >
+                                  <PopoverTrigger asChild>
+                                    <Button
+                                      variant="outline"
+                                      role="combobox"
+                                      className="h-7 w-full justify-between text-xs"
+                                    >
+                                      {block.value
+                                        ? tableColumnsMap[block.tableName]?.find((c) => c.name === block.value)
+                                            ?.label || block.value
+                                        : "컬럼 선택"}
+                                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                                    </Button>
+                                  </PopoverTrigger>
+                                  <PopoverContent className="w-full p-0" align="start">
+                                    <Command shouldFilter={false}>
+                                      <CommandInput
+                                        placeholder="컬럼 검색 (라벨 또는 이름)..."
+                                        className="h-7 text-xs"
+                                        value={blockColumnSearches[block.id] || ""}
+                                        onValueChange={(value) => {
+                                          setBlockColumnSearches((prev) => ({ ...prev, [block.id]: value }));
+                                        }}
+                                      />
+                                      <CommandList>
+                                        <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                        <CommandGroup>
+                                          {(tableColumnsMap[block.tableName] || [])
+                                            .filter((col) => {
+                                              const search = (blockColumnSearches[block.id] || "").toLowerCase();
+                                              if (!search) return true;
+                                              return (
+                                                col.label.toLowerCase().includes(search) ||
+                                                col.name.toLowerCase().includes(search)
+                                              );
+                                            })
+                                            .map((col) => (
+                                              <CommandItem
+                                                key={col.name}
+                                                value={col.name}
+                                                onSelect={() => {
+                                                  updateBlock(block.id, {
+                                                    value: col.name,
+                                                    label: col.label,
+                                                  });
+                                                  setBlockColumnSearches((prev) => ({ ...prev, [block.id]: "" }));
+                                                  setBlockColumnPopoverOpen((prev) => ({ ...prev, [block.id]: false }));
+                                                }}
+                                                className="text-xs"
+                                              >
+                                                <Check
+                                                  className={cn(
+                                                    "mr-2 h-3 w-3",
+                                                    block.value === col.name ? "opacity-100" : "opacity-0",
+                                                  )}
+                                                />
+                                                <span className="font-medium">{col.label}</span>
+                                                <span className="text-muted-foreground ml-2 text-[10px]">
+                                                  ({col.name})
+                                                </span>
+                                              </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                      </CommandList>
+                                    </Command>
+                                  </PopoverContent>
+                                </Popover>
+
+                                <Input
+                                  placeholder="표시 라벨 (예: 품목명)"
+                                  value={block.label || ""}
+                                  onChange={(e) => updateBlock(block.id, { label: e.target.value })}
+                                  className="h-7 text-xs"
+                                />
+                              </>
+                            )}
+                          </>
+                        )}
+                      </div>
+
+                      {/* 삭제 버튼 */}
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeBlock(block.id)}
+                        className="h-7 w-7 p-0 text-destructive"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </Card>
+                ))
+              )}
+            </div>
+
+            {/* 미리보기 */}
+            {titleBlocks.length > 0 && (
+              <div className="bg-muted mt-2 rounded p-2 text-xs">
+                <span className="text-muted-foreground">미리보기: </span>
+                <span className="font-medium">{generateTitlePreview()}</span>
+              </div>
+            )}
+
+            <p className="text-muted-foreground text-[10px]">
+              • 텍스트: 고정 텍스트 입력 (예: "품목 상세정보 - ")
+              <br />
+              • 필드: 이전 화면 데이터로 자동 채워짐 (예: 품목명, 규격)
+              <br />
+              • 순서 변경: ↑↓ 버튼으로 자유롭게 배치
+              <br />• 데이터가 없으면 "표시 라벨"이 대신 표시됩니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="modal-size-with-data">모달 크기</Label>
+            <Select
+              value={component.componentConfig?.action?.modalSize || "lg"}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.modalSize", value);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="모달 크기 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="sm">작음 (Small)</SelectItem>
+                <SelectItem value="md">보통 (Medium)</SelectItem>
+                <SelectItem value="lg">큼 (Large) - 권장</SelectItem>
+                <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div>
+            <Label htmlFor="target-screen-with-data">대상 화면 선택</Label>
+            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={modalScreenOpen}
+                  className="h-6 w-full justify-between px-2 py-0 text-xs"
+                  disabled={screensLoading}
+                >
+                  {config.action?.targetScreenId
+                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
+                      "화면을 선택하세요..."
+                    : "화면을 선택하세요..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="화면 검색..."
+                      value={modalSearchTerm}
+                      onChange={(e) => setModalSearchTerm(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {(() => {
+                      const filteredScreens = filterScreens(modalSearchTerm);
+                      if (screensLoading) {
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
+                      }
+                      if (filteredScreens.length === 0) {
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
+                      }
+                      return filteredScreens.map((screen, index) => (
+                        <div
+                          key={`modal-data-screen-${screen.id}-${index}`}
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
+                            setModalScreenOpen(false);
+                            setModalSearchTerm("");
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{screen.name}</span>
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="text-muted-foreground mt-1 text-xs">
+              SelectedItemsDetailInput 컴포넌트가 있는 화면을 선택하세요
+            </p>
+          </div>
+
+          {/* 🆕 필드 매핑 설정 (소스 컬럼 → 타겟 컬럼) */}
+          <div className="space-y-2 border-t pt-4">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs font-medium">필드 매핑 (선택사항)</Label>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-6 text-[10px]"
+                onClick={() => {
+                  const currentMappings = config.action?.fieldMappings || [];
+                  const newMapping = { sourceField: "", targetField: "" };
+                  onUpdateProperty("componentConfig.action.fieldMappings", [...currentMappings, newMapping]);
+                }}
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                매핑 추가
+              </Button>
+            </div>
+            <p className="text-muted-foreground text-[10px]">
+              소스 테이블의 컬럼명이 타겟 화면의 입력 필드 컬럼명과 다를 때 매핑을 설정하세요.
+              <br />
+              예: warehouse_code → warehouse_id (분할 패널의 창고코드를 모달의 창고ID에 매핑)
+            </p>
+
+            {/* 컬럼 로드 상태 표시 */}
+            {modalSourceColumns.length > 0 || modalTargetColumns.length > 0 ? (
+              <div className="text-muted-foreground bg-muted/50 rounded p-2 text-[10px]">
+                소스 컬럼: {modalSourceColumns.length}개 / 타겟 컬럼: {modalTargetColumns.length}개
+              </div>
+            ) : (
+              <div className="rounded bg-amber-50 p-2 text-[10px] text-amber-600 dark:bg-amber-950/20">
+                분할 패널 또는 테이블 컴포넌트와 대상 화면을 설정하면 컬럼 목록이 로드됩니다.
+              </div>
+            )}
+
+            {(config.action?.fieldMappings || []).length === 0 ? (
+              <div className="rounded-md border border-dashed p-3 text-center">
+                <p className="text-muted-foreground text-xs">매핑이 없으면 같은 이름의 컬럼끼리 자동으로 매핑됩니다.</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {(config.action?.fieldMappings || []).map((mapping: any, index: number) => (
+                  <div key={index} className="bg-background space-y-2 rounded-md border p-3">
+                    {/* 소스 필드 선택 (Combobox) - 세로 배치 */}
+                    <div className="space-y-1">
+                      <Label className="text-muted-foreground text-[10px]">소스 컬럼</Label>
+                      <Popover
+                        open={modalSourcePopoverOpen[index] || false}
+                        onOpenChange={(open) => setModalSourcePopoverOpen((prev) => ({ ...prev, [index]: open }))}
+                      >
+                        <PopoverTrigger asChild>
+                          <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                            <span className="truncate">
+                              {mapping.sourceField
+                                ? modalSourceColumns.find((c) => c.name === mapping.sourceField)?.label ||
+                                  mapping.sourceField
+                                : "소스 컬럼 선택"}
+                            </span>
+                            <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[--radix-popover-trigger-width] max-w-[280px] p-0" align="start">
+                          <Command>
+                            <CommandInput
+                              placeholder="컬럼 검색..."
+                              className="h-8 text-xs"
+                              value={modalSourceSearch[index] || ""}
+                              onValueChange={(value) => setModalSourceSearch((prev) => ({ ...prev, [index]: value }))}
+                            />
+                            <CommandList className="max-h-[200px]">
+                              <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
+                              <CommandGroup>
+                                {modalSourceColumns.map((col) => (
+                                  <CommandItem
+                                    key={col.name}
+                                    value={`${col.label} ${col.name}`}
+                                    onSelect={() => {
+                                      const mappings = [...(config.action?.fieldMappings || [])];
+                                      mappings[index] = { ...mappings[index], sourceField: col.name };
+                                      onUpdateProperty("componentConfig.action.fieldMappings", mappings);
+                                      setModalSourcePopoverOpen((prev) => ({ ...prev, [index]: false }));
+                                    }}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        mapping.sourceField === col.name ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    <span className="truncate">{col.label}</span>
+                                    {col.label !== col.name && (
+                                      <span className="text-muted-foreground ml-1 truncate">({col.name})</span>
+                                    )}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* 화살표 표시 */}
+                    <div className="flex justify-center">
+                      <span className="text-muted-foreground text-xs">↓</span>
+                    </div>
+
+                    {/* 타겟 필드 선택 (Combobox) - 세로 배치 */}
+                    <div className="space-y-1">
+                      <Label className="text-muted-foreground text-[10px]">타겟 컬럼</Label>
+                      <Popover
+                        open={modalTargetPopoverOpen[index] || false}
+                        onOpenChange={(open) => setModalTargetPopoverOpen((prev) => ({ ...prev, [index]: open }))}
+                      >
+                        <PopoverTrigger asChild>
+                          <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                            <span className="truncate">
+                              {mapping.targetField
+                                ? modalTargetColumns.find((c) => c.name === mapping.targetField)?.label ||
+                                  mapping.targetField
+                                : "타겟 컬럼 선택"}
+                            </span>
+                            <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[--radix-popover-trigger-width] max-w-[280px] p-0" align="start">
+                          <Command>
+                            <CommandInput
+                              placeholder="컬럼 검색..."
+                              className="h-8 text-xs"
+                              value={modalTargetSearch[index] || ""}
+                              onValueChange={(value) => setModalTargetSearch((prev) => ({ ...prev, [index]: value }))}
+                            />
+                            <CommandList className="max-h-[200px]">
+                              <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
+                              <CommandGroup>
+                                {modalTargetColumns.map((col) => (
+                                  <CommandItem
+                                    key={col.name}
+                                    value={`${col.label} ${col.name}`}
+                                    onSelect={() => {
+                                      const mappings = [...(config.action?.fieldMappings || [])];
+                                      mappings[index] = { ...mappings[index], targetField: col.name };
+                                      onUpdateProperty("componentConfig.action.fieldMappings", mappings);
+                                      setModalTargetPopoverOpen((prev) => ({ ...prev, [index]: false }));
+                                    }}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        mapping.targetField === col.name ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    <span className="truncate">{col.label}</span>
+                                    {col.label !== col.name && (
+                                      <span className="text-muted-foreground ml-1 truncate">({col.name})</span>
+                                    )}
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+
+                    {/* 삭제 버튼 */}
+                    <div className="flex justify-end pt-1">
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="text-destructive hover:bg-destructive/10 h-6 text-[10px]"
+                        onClick={() => {
+                          const mappings = [...(config.action?.fieldMappings || [])];
+                          mappings.splice(index, 1);
+                          onUpdateProperty("componentConfig.action.fieldMappings", mappings);
+                        }}
+                      >
+                        <X className="mr-1 h-3 w-3" />
+                        삭제
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 수정 액션 설정 */}
+      {localInputs.actionType === "edit" && (
+        <div className="bg-success/10 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">수정 설정</h4>
+
+          <div>
+            <Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
+            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={modalScreenOpen}
+                  className="h-6 w-full justify-between px-2 py-0 text-xs"
+                  disabled={screensLoading}
+                >
+                  {config.action?.targetScreenId
+                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
+                      "수정 폼 화면을 선택하세요..."
+                    : "수정 폼 화면을 선택하세요..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="화면 검색..."
+                      value={modalSearchTerm}
+                      onChange={(e) => setModalSearchTerm(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {(() => {
+                      const filteredScreens = filterScreens(modalSearchTerm);
+                      if (screensLoading) {
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
+                      }
+                      if (filteredScreens.length === 0) {
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
+                      }
+                      return filteredScreens.map((screen, index) => (
+                        <div
+                          key={`edit-screen-${screen.id}-${index}`}
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
+                            setModalScreenOpen(false);
+                            setModalSearchTerm("");
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{screen.name}</span>
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="text-muted-foreground mt-1 text-xs">
+              선택된 데이터가 이 폼 화면에 자동으로 로드되어 수정할 수 있습니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="edit-mode">수정 모드</Label>
+            <Select
+              value={component.componentConfig?.action?.editMode || "modal"}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.editMode", value);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="수정 모드 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="modal">모달로 열기</SelectItem>
+                <SelectItem value="navigate">새 페이지로 이동</SelectItem>
+                <SelectItem value="inline">현재 화면에서 수정</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {(component.componentConfig?.action?.editMode || "modal") === "modal" && (
+            <>
+              <div>
+                <Label htmlFor="edit-modal-title">모달 제목</Label>
+                <Input
+                  id="edit-modal-title"
+                  placeholder="모달 제목을 입력하세요 (예: 데이터 수정)"
+                  value={localInputs.editModalTitle}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
+                    onUpdateProperty("componentConfig.action.editModalTitle", newValue);
+                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
+                  }}
+                />
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 기본 제목이 표시됩니다</p>
+              </div>
+
+              <div>
+                <Label htmlFor="edit-modal-description">모달 설명</Label>
+                <Input
+                  id="edit-modal-description"
+                  placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 수정합니다)"
+                  value={localInputs.editModalDescription}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
+                    onUpdateProperty("componentConfig.action.editModalDescription", newValue);
+                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
+                  }}
+                />
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 설명이 표시되지 않습니다</p>
+              </div>
+
+              <div>
+                <Label htmlFor="edit-modal-size">모달 크기</Label>
+                <Select
+                  value={component.componentConfig?.action?.modalSize || "md"}
+                  onValueChange={(value) => {
+                    onUpdateProperty("componentConfig.action.modalSize", value);
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="모달 크기 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="sm">작음 (Small)</SelectItem>
+                    <SelectItem value="md">보통 (Medium)</SelectItem>
+                    <SelectItem value="lg">큼 (Large)</SelectItem>
+                    <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
+                    <SelectItem value="full">전체 화면 (Full)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </>
+          )}
+
+          <div>
+            <Label htmlFor="edit-group-by-column">그룹화 컬럼</Label>
+            <Popover open={groupByColumnOpen} onOpenChange={setGroupByColumnOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={groupByColumnOpen}
+                  className="h-8 w-full justify-between text-xs"
+                >
+                  {localInputs.groupByColumn ? (
+                    <span>
+                      {localInputs.groupByColumn}
+                      {currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label &&
+                        currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label !==
+                          localInputs.groupByColumn && (
+                          <span className="text-muted-foreground ml-1">
+                            ({currentTableColumns.find((col) => col.name === localInputs.groupByColumn)?.label})
+                          </span>
+                        )}
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">컬럼을 선택하세요</span>
+                  )}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="컬럼명 또는 라벨 검색..."
+                      value={groupByColumnSearch}
+                      onChange={(e) => setGroupByColumnSearch(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {currentTableColumns.length === 0 ? (
+                      <div className="text-muted-foreground p-3 text-sm">
+                        {currentTableName ? "컬럼을 불러오는 중..." : "테이블이 설정되지 않았습니다"}
+                      </div>
+                    ) : (
+                      <>
+                        {/* 선택 해제 옵션 */}
+                        <div
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            setLocalInputs((prev) => ({ ...prev, groupByColumn: "" }));
+                            onUpdateProperty("componentConfig.action.groupByColumns", undefined);
+                            setGroupByColumnOpen(false);
+                            setGroupByColumnSearch("");
+                          }}
+                        >
+                          <Check
+                            className={cn("mr-2 h-4 w-4", !localInputs.groupByColumn ? "opacity-100" : "opacity-0")}
+                          />
+                          <span className="text-muted-foreground">선택 안 함</span>
+                        </div>
+                        {/* 컬럼 목록 */}
+                        {currentTableColumns
+                          .filter((col) => {
+                            if (!groupByColumnSearch) return true;
+                            const search = groupByColumnSearch.toLowerCase();
+                            return col.name.toLowerCase().includes(search) || col.label.toLowerCase().includes(search);
+                          })
+                          .map((col) => (
+                            <div
+                              key={col.name}
+                              className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                              onClick={() => {
+                                setLocalInputs((prev) => ({ ...prev, groupByColumn: col.name }));
+                                onUpdateProperty("componentConfig.action.groupByColumns", [col.name]);
+                                setGroupByColumnOpen(false);
+                                setGroupByColumnSearch("");
+                              }}
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  localInputs.groupByColumn === col.name ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span className="font-medium">{col.name}</span>
+                                {col.label !== col.name && (
+                                  <span className="text-muted-foreground text-xs">{col.label}</span>
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                      </>
+                    )}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="text-muted-foreground mt-1 text-xs">여러 행을 하나의 그룹으로 묶어서 수정할 때 사용합니다</p>
+          </div>
+        </div>
+      )}
+
+      {/* 복사 액션 설정 */}
+      {localInputs.actionType === "copy" && (
+        <div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
+          <h4 className="text-foreground text-sm font-medium">복사 설정 (품목코드 자동 초기화)</h4>
+
+          <div>
+            <Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
+            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={modalScreenOpen}
+                  className="h-6 w-full justify-between px-2 py-0 text-xs"
+                  disabled={screensLoading}
+                >
+                  {config.action?.targetScreenId
+                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
+                      "복사 폼 화면을 선택하세요..."
+                    : "복사 폼 화면을 선택하세요..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="화면 검색..."
+                      value={modalSearchTerm}
+                      onChange={(e) => setModalSearchTerm(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {(() => {
+                      const filteredScreens = filterScreens(modalSearchTerm);
+                      if (screensLoading) {
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
+                      }
+                      if (filteredScreens.length === 0) {
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
+                      }
+                      return filteredScreens.map((screen, index) => (
+                        <div
+                          key={`copy-screen-${screen.id}-${index}`}
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
+                            setModalScreenOpen(false);
+                            setModalSearchTerm("");
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{screen.name}</span>
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="text-muted-foreground mt-1 text-xs">
+              선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="copy-mode">복사 모드</Label>
+            <Select
+              value={component.componentConfig?.action?.editMode || "modal"}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.editMode", value);
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="복사 모드 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="modal">모달로 열기</SelectItem>
+                <SelectItem value="navigate">새 페이지로 이동</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {(component.componentConfig?.action?.editMode || "modal") === "modal" && (
+            <>
+              <div>
+                <Label htmlFor="copy-modal-title">모달 제목</Label>
+                <Input
+                  id="copy-modal-title"
+                  placeholder="모달 제목을 입력하세요 (예: 데이터 복사)"
+                  value={localInputs.editModalTitle}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalInputs((prev) => ({ ...prev, editModalTitle: newValue }));
+                    onUpdateProperty("componentConfig.action.editModalTitle", newValue);
+                    onUpdateProperty("webTypeConfig.editModalTitle", newValue);
+                  }}
+                />
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 기본 제목이 표시됩니다</p>
+              </div>
+
+              <div>
+                <Label htmlFor="copy-modal-description">모달 설명</Label>
+                <Input
+                  id="copy-modal-description"
+                  placeholder="모달 설명을 입력하세요 (예: 선택한 데이터를 복사합니다)"
+                  value={localInputs.editModalDescription}
+                  onChange={(e) => {
+                    const newValue = e.target.value;
+                    setLocalInputs((prev) => ({ ...prev, editModalDescription: newValue }));
+                    onUpdateProperty("componentConfig.action.editModalDescription", newValue);
+                    onUpdateProperty("webTypeConfig.editModalDescription", newValue);
+                  }}
+                />
+                <p className="text-muted-foreground mt-1 text-xs">비워두면 설명이 표시되지 않습니다</p>
+              </div>
+
+              <div>
+                <Label htmlFor="copy-modal-size">모달 크기</Label>
+                <Select
+                  value={component.componentConfig?.action?.modalSize || "md"}
+                  onValueChange={(value) => {
+                    onUpdateProperty("componentConfig.action.modalSize", value);
+                  }}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="모달 크기 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="sm">작음 (Small)</SelectItem>
+                    <SelectItem value="md">보통 (Medium)</SelectItem>
+                    <SelectItem value="lg">큼 (Large)</SelectItem>
+                    <SelectItem value="xl">매우 큼 (Extra Large)</SelectItem>
+                    <SelectItem value="full">전체 화면 (Full)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* 테이블 이력 보기 액션 설정 */}
+      {localInputs.actionType === "view_table_history" && (
+        <div className="mt-4 space-y-4">
+          <div>
+            <Label>
+              전체 이력 표시 컬럼 (필수) <span className="text-destructive">*</span>
+            </Label>
+
+            <Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={displayColumnOpen}
+                  className="mt-2 h-8 w-full justify-between text-xs"
+                  disabled={columnsLoading || tableColumns.length === 0}
+                >
+                  {columnsLoading
+                    ? "로딩 중..."
+                    : config.action?.historyDisplayColumn
+                      ? config.action.historyDisplayColumn
+                      : tableColumns.length === 0
+                        ? "사용 가능한 컬럼이 없습니다"
+                        : "컬럼을 선택하세요"}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      {tableColumns.map((column) => (
+                        <CommandItem
+                          key={column}
+                          value={column}
+                          onSelect={(currentValue) => {
+                            onUpdateProperty("componentConfig.action.historyDisplayColumn", currentValue);
+                            setDisplayColumnOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              config.action?.historyDisplayColumn === column ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          {column}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+      )}
+
+      {/* 페이지 이동 액션 설정 */}
+      {localInputs.actionType === "navigate" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">페이지 이동 설정</h4>
+
+          <div>
+            <Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
+            <Popover open={navScreenOpen} onOpenChange={setNavScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={navScreenOpen}
+                  className="h-6 w-full justify-between px-2 py-0 text-xs"
+                  disabled={screensLoading}
+                >
+                  {config.action?.targetScreenId
+                    ? screens.find((screen) => screen.id === parseInt(config.action?.targetScreenId))?.name ||
+                      "화면을 선택하세요..."
+                    : "화면을 선택하세요..."}
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
+                <div className="flex flex-col">
+                  <div className="flex items-center border-b px-3 py-2">
+                    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                    <Input
+                      placeholder="화면 검색..."
+                      value={navSearchTerm}
+                      onChange={(e) => setNavSearchTerm(e.target.value)}
+                      className="border-0 p-0 focus-visible:ring-0"
+                    />
+                  </div>
+                  <div className="max-h-[200px] overflow-auto">
+                    {(() => {
+                      const filteredScreens = filterScreens(navSearchTerm);
+                      if (screensLoading) {
+                        return <div className="text-muted-foreground p-3 text-sm">화면 목록을 불러오는 중...</div>;
+                      }
+                      if (filteredScreens.length === 0) {
+                        return <div className="text-muted-foreground p-3 text-sm">검색 결과가 없습니다.</div>;
+                      }
+                      return filteredScreens.map((screen, index) => (
+                        <div
+                          key={`navigate-screen-${screen.id}-${index}`}
+                          className="hover:bg-muted flex cursor-pointer items-center px-3 py-2"
+                          onClick={() => {
+                            onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
+                            setNavScreenOpen(false);
+                            setNavSearchTerm("");
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-4 w-4",
+                              parseInt(config.action?.targetScreenId) === screen.id ? "opacity-100" : "opacity-0",
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{screen.name}</span>
+                            {screen.description && (
+                              <span className="text-muted-foreground text-xs">{screen.description}</span>
+                            )}
+                          </div>
+                        </div>
+                      ));
+                    })()}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p className="text-muted-foreground mt-1 text-xs">
+              선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="target-url">또는 직접 URL 입력 (고급)</Label>
+            <Input
+              id="target-url"
+              placeholder="예: /admin/users 또는 https://example.com"
+              value={localInputs.targetUrl}
+              onChange={(e) => {
+                const newValue = e.target.value;
+                setLocalInputs((prev) => ({ ...prev, targetUrl: newValue }));
+                onUpdateProperty("componentConfig.action.targetUrl", newValue);
+              }}
+              className="h-6 w-full px-2 py-0 text-xs"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
+          </div>
+        </div>
+      )}
+
+      {/* 엑셀 다운로드 액션 설정 */}
+      {localInputs.actionType === "excel_download" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">엑셀 다운로드 설정</h4>
+
+          <div>
+            <Label htmlFor="excel-filename">파일명 (선택사항)</Label>
+            <Input
+              id="excel-filename"
+              placeholder="예: 데이터목록 (기본값: export)"
+              value={config.action?.excelFileName || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.excelFileName", e.target.value)}
+              className="h-8 text-xs"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">확장자(.xlsx)는 자동으로 추가됩니다</p>
+          </div>
+
+          <div>
+            <Label htmlFor="excel-sheetname">시트명 (선택사항)</Label>
+            <Input
+              id="excel-sheetname"
+              placeholder="예: Sheet1 (기본값)"
+              value={config.action?.excelSheetName || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.excelSheetName", e.target.value)}
+              className="h-8 text-xs"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="excel-include-headers">헤더 포함</Label>
+            <Switch
+              id="excel-include-headers"
+              checked={config.action?.excelIncludeHeaders !== false}
+              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.excelIncludeHeaders", checked)}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* 엑셀 업로드 액션 설정 */}
+      {localInputs.actionType === "excel_upload" && (
+        <ExcelUploadConfigSection
+          config={config}
+          onUpdateProperty={onUpdateProperty}
+          allComponents={allComponents}
+          currentTableName={currentTableName}
+        />
+      )}
+
+      {/* 다중 테이블 엑셀 업로드: 설정 불필요 (버튼 클릭 시 화면 테이블에서 자동 감지) */}
+
+      {/* 바코드 스캔 액션 설정 */}
+      {localInputs.actionType === "barcode_scan" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">📷 바코드 스캔 설정</h4>
+
+          <div>
+            <Label htmlFor="barcode-target-field">
+              대상 필드명 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="barcode-target-field"
+              placeholder="예: barcode, qr_code"
+              value={config.action?.barcodeTargetField || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.barcodeTargetField", e.target.value)}
+              className="h-8 text-xs"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">스캔 결과가 입력될 폼 필드명</p>
+          </div>
+
+          <div>
+            <Label htmlFor="barcode-format">바코드 형식</Label>
+            <Select
+              value={config.action?.barcodeFormat || "all"}
+              onValueChange={(value) => onUpdateProperty("componentConfig.action.barcodeFormat", value)}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">모든 형식</SelectItem>
+                <SelectItem value="1d">1D 바코드만 (CODE128, EAN13 등)</SelectItem>
+                <SelectItem value="2d">2D 바코드만 (QR코드, DataMatrix 등)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="barcode-auto-submit">스캔 후 자동 저장</Label>
+            <Switch
+              id="barcode-auto-submit"
+              checked={config.action?.barcodeAutoSubmit === true}
+              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.barcodeAutoSubmit", checked)}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* 코드 병합 액션 설정 */}
+      {localInputs.actionType === "code_merge" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">🔀 코드 병합 설정</h4>
+
+          <div>
+            <Label htmlFor="merge-column-name">
+              병합할 컬럼명 <span className="text-destructive">*</span>
+            </Label>
+            <Input
+              id="merge-column-name"
+              placeholder="예: item_code, product_id"
+              value={config.action?.mergeColumnName || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.mergeColumnName", e.target.value)}
+              className="h-8 text-xs"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">
+              병합할 컬럼명 (예: item_code). 이 컬럼이 있는 모든 테이블에 병합이 적용됩니다.
+            </p>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="merge-show-preview">병합 전 미리보기</Label>
+              <p className="text-muted-foreground text-xs">영향받을 테이블과 행 수를 미리 확인합니다</p>
+            </div>
+            <Switch
+              id="merge-show-preview"
+              checked={config.action?.mergeShowPreview !== false}
+              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.mergeShowPreview", checked)}
+            />
+          </div>
+
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
+              <strong>사용 방법:</strong>
+              <br />
+              1. 테이블에서 병합할 두 개의 행을 선택합니다
+              <br />
+              2. 이 버튼을 클릭하면 병합 방향을 선택할 수 있습니다
+              <br />
+              3. 데이터는 삭제되지 않고, 컬럼 값만 변경됩니다
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 공차등록 설정 - 운행알림으로 통합되어 주석 처리 */}
+      {/* {localInputs.actionType === "empty_vehicle" && (
+        <div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
+          ... 공차등록 설정 UI 생략 ...
+        </div>
+      )} */}
+
+      {/* 운행알림 및 종료 설정 */}
+      {localInputs.actionType === "operation_control" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">🚗 운행알림 및 종료 설정</h4>
+
+          <div>
+            <Label htmlFor="update-table">
+              대상 테이블 <span className="text-destructive">*</span>
+            </Label>
+            <Select
+              value={config.action?.updateTableName || currentTableName || ""}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.updateTableName", value);
+                onUpdateProperty("componentConfig.action.updateTargetField", "");
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="테이블 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableTables.map((table) => (
+                  <SelectItem key={table.name} value={table.name} className="text-xs">
+                    {table.label || table.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-xs">필드 값을 변경할 테이블 (기본: 현재 화면 테이블)</p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="update-target-field">
+                변경할 필드명 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="update-target-field"
+                placeholder="예: status"
+                value={config.action?.updateTargetField || ""}
+                onChange={(e) => onUpdateProperty("componentConfig.action.updateTargetField", e.target.value)}
+                className="h-8 text-xs"
+              />
+              <p className="text-muted-foreground mt-1 text-xs">변경할 DB 컬럼</p>
+            </div>
+            <div>
+              <Label htmlFor="update-target-value">
+                변경할 값 <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="update-target-value"
+                placeholder="예: active"
+                value={config.action?.updateTargetValue || ""}
+                onChange={(e) => onUpdateProperty("componentConfig.action.updateTargetValue", e.target.value)}
+                className="h-8 text-xs"
+              />
+              <p className="text-muted-foreground mt-1 text-xs">변경할 값 (문자열, 숫자)</p>
+            </div>
+          </div>
+
+          {/* 🆕 키 필드 설정 (레코드 식별용) */}
+          <div className="mt-4 border-t pt-4">
+            <h5 className="text-muted-foreground mb-3 text-xs font-medium">레코드 식별 설정</h5>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <Label htmlFor="update-key-field">
+                  키 필드 (DB 컬럼) <span className="text-destructive">*</span>
+                </Label>
+                <Input
+                  id="update-key-field"
+                  placeholder="예: user_id"
+                  value={config.action?.updateKeyField || ""}
+                  onChange={(e) => onUpdateProperty("componentConfig.action.updateKeyField", e.target.value)}
+                  className="h-8 text-xs"
+                />
+                <p className="text-muted-foreground mt-1 text-xs">레코드를 찾을 DB 컬럼명</p>
+              </div>
+              <div>
+                <Label htmlFor="update-key-source">
+                  키 값 소스 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={config.action?.updateKeySourceField || ""}
+                  onValueChange={(value) => onUpdateProperty("componentConfig.action.updateKeySourceField", value)}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="키 값 소스 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__userId__" className="text-xs">
+                      <span className="flex items-center gap-1">
+                        <span className="text-amber-500">🔑</span> 로그인 사용자 ID
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="__userName__" className="text-xs">
+                      <span className="flex items-center gap-1">
+                        <span className="text-amber-500">🔑</span> 로그인 사용자 이름
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="__companyCode__" className="text-xs">
+                      <span className="flex items-center gap-1">
+                        <span className="text-amber-500">🔑</span> 회사 코드
+                      </span>
+                    </SelectItem>
+                    {tableColumns.map((column) => (
+                      <SelectItem key={column} value={column} className="text-xs">
+                        {column}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-muted-foreground mt-1 text-xs">키 값을 가져올 소스</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="update-auto-save">변경 후 자동 저장</Label>
+              <p className="text-muted-foreground text-xs">버튼 클릭 시 즉시 DB에 저장</p>
+            </div>
+            <Switch
+              id="update-auto-save"
+              checked={config.action?.updateAutoSave !== false}
+              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateAutoSave", checked)}
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="update-confirm-message">확인 메시지 (선택)</Label>
+            <Input
+              id="update-confirm-message"
+              placeholder="예: 운행을 시작하시겠습니까?"
+              value={config.action?.confirmMessage || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.confirmMessage", e.target.value)}
+              className="h-8 text-xs"
+            />
+            <p className="text-muted-foreground mt-1 text-xs">입력하면 변경 전 확인 창이 표시됩니다</p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="update-success-message">성공 메시지 (선택)</Label>
+              <Input
+                id="update-success-message"
+                placeholder="예: 운행이 시작되었습니다."
+                value={config.action?.successMessage || ""}
+                onChange={(e) => onUpdateProperty("componentConfig.action.successMessage", e.target.value)}
+                className="h-8 text-xs"
+              />
+            </div>
+            <div>
+              <Label htmlFor="update-error-message">오류 메시지 (선택)</Label>
+              <Input
+                id="update-error-message"
+                placeholder="예: 운행 시작에 실패했습니다."
+                value={config.action?.errorMessage || ""}
+                onChange={(e) => onUpdateProperty("componentConfig.action.errorMessage", e.target.value)}
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+
+          {/* 위치정보 수집 옵션 */}
+          <div className="mt-4 border-t pt-4">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="update-with-geolocation">위치정보도 함께 수집</Label>
+                <p className="text-muted-foreground text-xs">상태 변경과 함께 현재 GPS 좌표를 수집합니다</p>
+              </div>
+              <Switch
+                id="update-with-geolocation"
+                checked={config.action?.updateWithGeolocation === true}
+                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateWithGeolocation", checked)}
+              />
+            </div>
+
+            {config.action?.updateWithGeolocation && (
+              <div className="mt-3 space-y-3 rounded-md bg-amber-50 p-3 dark:bg-amber-950">
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <Label>
+                      위도 저장 필드 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      placeholder="예: latitude"
+                      value={config.action?.updateGeolocationLatField || ""}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationLatField", e.target.value)
+                      }
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label>
+                      경도 저장 필드 <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      placeholder="예: longitude"
+                      value={config.action?.updateGeolocationLngField || ""}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationLngField", e.target.value)
+                      }
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <Label>정확도 필드 (선택)</Label>
+                    <Input
+                      placeholder="예: accuracy"
+                      value={config.action?.updateGeolocationAccuracyField || ""}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationAccuracyField", e.target.value)
+                      }
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label>타임스탬프 필드 (선택)</Label>
+                    <Input
+                      placeholder="예: location_time"
+                      value={config.action?.updateGeolocationTimestampField || ""}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.updateGeolocationTimestampField", e.target.value)
+                      }
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                </div>
+                <p className="text-[10px] text-amber-700 dark:text-amber-300">
+                  버튼 클릭 시 GPS 위치를 수집하여 위 필드에 저장합니다.
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* 🆕 연속 위치 추적 설정 */}
+          <div className="flex items-center justify-between">
+            <div>
+              <Label htmlFor="update-with-tracking">연속 위치 추적</Label>
+              <p className="text-muted-foreground text-xs">10초마다 위치를 경로 테이블에 저장합니다</p>
+            </div>
+            <Switch
+              id="update-with-tracking"
+              checked={config.action?.updateWithTracking === true}
+              onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.updateWithTracking", checked)}
+            />
+          </div>
+
+          {config.action?.updateWithTracking && (
+            <div className="mt-3 space-y-3 rounded-md bg-emerald-50 p-3 dark:bg-emerald-950">
+              <div>
+                <Label>
+                  추적 모드 <span className="text-destructive">*</span>
+                </Label>
+                <Select
+                  value={config.action?.updateTrackingMode || "start"}
+                  onValueChange={(value) => onUpdateProperty("componentConfig.action.updateTrackingMode", value)}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="모드 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="start">추적 시작 (운행 시작)</SelectItem>
+                    <SelectItem value="stop">추적 종료 (운행 종료)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {config.action?.updateTrackingMode === "start" && (
+                <div>
+                  <Label>위치 저장 주기 (초)</Label>
+                  <Input
+                    type="number"
+                    placeholder="10"
+                    value={(config.action?.updateTrackingInterval || 10000) / 1000}
+                    onChange={(e) =>
+                      onUpdateProperty(
+                        "componentConfig.action.updateTrackingInterval",
+                        parseInt(e.target.value) * 1000 || 10000,
+                      )
+                    }
+                    className="h-8 text-xs"
+                    min={5}
+                    max={300}
+                  />
+                  <p className="text-muted-foreground mt-1 text-[10px]">5초 ~ 300초 사이로 설정 (기본: 10초)</p>
+                </div>
+              )}
+
+              <p className="text-[10px] text-emerald-700 dark:text-emerald-300">
+                {config.action?.updateTrackingMode === "start"
+                  ? "버튼 클릭 시 연속 위치 추적이 시작되고, vehicle_location_history 테이블에 경로가 저장됩니다."
+                  : "버튼 클릭 시 진행 중인 위치 추적이 종료됩니다."}
+              </p>
+            </div>
+          )}
+
+          {/* 🆕 버튼 활성화 조건 설정 */}
+          <div className="mt-4 border-t pt-4">
+            <h5 className="text-muted-foreground mb-3 text-xs font-medium">버튼 활성화 조건</h5>
+
+            {/* 출발지/도착지 필수 체크 */}
+            <div className="flex items-center justify-between">
+              <div>
+                <Label htmlFor="require-location">출발지/도착지 필수</Label>
+                <p className="text-muted-foreground text-xs">선택하지 않으면 버튼 비활성화</p>
+              </div>
+              <Switch
+                id="require-location"
+                checked={config.action?.requireLocationFields === true}
+                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.requireLocationFields", checked)}
+              />
+            </div>
+
+            {config.action?.requireLocationFields && (
+              <div className="mt-3 space-y-2 rounded-md bg-amber-50 p-3 dark:bg-orange-950">
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <Label>출발지 필드명</Label>
+                    <Input
+                      placeholder="departure"
+                      value={config.action?.trackingDepartureField || "departure"}
+                      onChange={(e) =>
+                        onUpdateProperty("componentConfig.action.trackingDepartureField", e.target.value)
+                      }
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                  <div>
+                    <Label>도착지 필드명</Label>
+                    <Input
+                      placeholder="destination"
+                      value={config.action?.trackingArrivalField || "destination"}
+                      onChange={(e) => onUpdateProperty("componentConfig.action.trackingArrivalField", e.target.value)}
+                      className="h-8 text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 상태 기반 활성화 조건 */}
+            <div className="mt-4 flex items-center justify-between">
+              <div>
+                <Label htmlFor="enable-on-status">상태 기반 활성화</Label>
+                <p className="text-muted-foreground text-xs">특정 상태일 때만 버튼 활성화</p>
+              </div>
+              <Switch
+                id="enable-on-status"
+                checked={config.action?.enableOnStatusCheck === true}
+                onCheckedChange={(checked) => onUpdateProperty("componentConfig.action.enableOnStatusCheck", checked)}
+              />
+            </div>
+
+            {config.action?.enableOnStatusCheck && (
+              <div className="mt-3 space-y-2 rounded-md bg-purple-50 p-3 dark:bg-purple-950">
+                <div>
+                  <Label>상태 조회 테이블</Label>
+                  <Select
+                    value={config.action?.statusCheckTableName || "vehicles"}
+                    onValueChange={(value) => onUpdateProperty("componentConfig.action.statusCheckTableName", value)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {availableTables.map((table) => (
+                        <SelectItem key={table.name} value={table.name} className="text-xs">
+                          {table.label || table.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <p className="text-muted-foreground mt-1 text-[10px]">상태를 조회할 테이블 (기본: vehicles)</p>
+                </div>
+                <div>
+                  <Label>조회 키 필드</Label>
+                  <Input
+                    placeholder="user_id"
+                    value={config.action?.statusCheckKeyField || "user_id"}
+                    onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckKeyField", e.target.value)}
+                    className="h-8 text-xs"
+                  />
+                  <p className="text-muted-foreground mt-1 text-[10px]">
+                    현재 로그인 사용자 ID로 조회할 필드 (기본: user_id)
+                  </p>
+                </div>
+                <div>
+                  <Label>상태 컬럼명</Label>
+                  <Input
+                    placeholder="status"
+                    value={config.action?.statusCheckField || "status"}
+                    onChange={(e) => onUpdateProperty("componentConfig.action.statusCheckField", e.target.value)}
+                    className="h-8 text-xs"
+                  />
+                  <p className="text-muted-foreground mt-1 text-[10px]">상태 값이 저장된 컬럼명 (기본: status)</p>
+                </div>
+                <div>
+                  <Label>상태 조건</Label>
+                  <Select
+                    value={config.action?.statusConditionType || "enableOn"}
+                    onValueChange={(value) => onUpdateProperty("componentConfig.action.statusConditionType", value)}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="enableOn">이 상태일 때만 활성화</SelectItem>
+                      <SelectItem value="disableOn">이 상태일 때 비활성화</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div>
+                  <Label>상태값 (쉼표로 구분)</Label>
+                  <Input
+                    placeholder="예: active, inactive"
+                    value={config.action?.statusConditionValues || ""}
+                    onChange={(e) => onUpdateProperty("componentConfig.action.statusConditionValues", e.target.value)}
+                    className="h-8 text-xs"
+                  />
+                  <p className="text-muted-foreground mt-1 text-[10px]">여러 상태값은 쉼표(,)로 구분</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
+              <strong>사용 예시:</strong>
+              <br />
+              - 운행 시작: status를 &quot;active&quot;로 + 연속 추적 시작
+              <br />
+              - 운행 종료: status를 &quot;completed&quot;로 + 연속 추적 종료
+              <br />- 공차등록: status를 &quot;inactive&quot;로 + 1회성 위치정보 수집
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 데이터 전달 액션 설정 */}
+      {localInputs.actionType === "transferData" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">📦 데이터 전달 설정</h4>
+
+          {/* 소스 컴포넌트 선택 (Combobox) */}
+          <div>
+            <Label>
+              소스 컴포넌트 <span className="text-destructive">*</span>
+            </Label>
+            <Select
+              value={config.action?.dataTransfer?.sourceComponentId || ""}
+              onValueChange={(value) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.sourceComponentId", value)
+              }
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="데이터를 가져올 컴포넌트 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {/* 자동 탐색 옵션 (레이어별 테이블이 다를 때 유용) */}
+                <SelectItem value="__auto__">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">자동 탐색 (현재 활성 테이블)</span>
+                    <span className="text-muted-foreground text-[10px]">(auto)</span>
+                  </div>
+                </SelectItem>
+                {/* 데이터 제공 가능한 컴포넌트 필터링 (모든 레이어 포함) */}
+                {allComponents
+                  .filter((comp: any) => {
+                    const type = comp.componentType || comp.type || "";
+                    return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                      type.includes(t),
+                    );
+                  })
+                  .map((comp: any) => {
+                    const compType = comp.componentType || comp.type || "unknown";
+                    const compLabel = comp.label || comp.componentConfig?.title || comp.id;
+                    const layerName = comp._layerName;
+                    return (
+                      <SelectItem key={comp.id} value={comp.id}>
+                        <div className="flex items-center gap-2">
+                          <span className="text-xs font-medium">{compLabel}</span>
+                          <span className="text-muted-foreground text-[10px]">({compType})</span>
+                          {layerName && (
+                            <span className="rounded bg-amber-100 px-1 text-[9px] text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                              {layerName}
+                            </span>
+                          )}
+                        </div>
+                      </SelectItem>
+                    );
+                  })}
+                {allComponents.filter((comp: any) => {
+                  const type = comp.componentType || comp.type || "";
+                  return ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                    type.includes(t),
+                  );
+                }).length === 0 && (
+                  <SelectItem value="__none__" disabled>
+                    데이터 제공 가능한 컴포넌트가 없습니다
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-xs">
+              레이어별로 다른 테이블이 있을 경우 "자동 탐색"을 선택하면 현재 활성화된 레이어의 테이블을 자동으로
+              사용합니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="target-type">
+              타겟 타입 <span className="text-destructive">*</span>
+            </Label>
+            <Select
+              value={config.action?.dataTransfer?.targetType || "component"}
+              onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.targetType", value)}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="component">같은 화면의 컴포넌트</SelectItem>
+                <SelectItem value="splitPanel">분할 패널 반대편 화면</SelectItem>
+                <SelectItem value="screen" disabled>
+                  다른 화면 (구현 예정)
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            {config.action?.dataTransfer?.targetType === "splitPanel" && (
+              <p className="text-muted-foreground mt-1 text-[10px]">
+                이 버튼이 분할 패널 내부에 있어야 합니다. 좌측 화면에서 우측으로, 또는 우측에서 좌측으로 데이터가
+                전달됩니다.
+              </p>
+            )}
+          </div>
+
+          {/* 타겟 컴포넌트 선택 (같은 화면의 컴포넌트일 때만) */}
+          {config.action?.dataTransfer?.targetType === "component" && (
+            <div>
+              <Label>
+                타겟 컴포넌트 <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={config.action?.dataTransfer?.targetComponentId || ""}
+                onValueChange={(value) => {
+                  onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", value);
+                  // 선택한 컴포넌트가 다른 레이어에 있으면 targetLayerId도 저장
+                  const selectedComp = allComponents.find((c: any) => c.id === value);
+                  if (selectedComp && (selectedComp as any)._layerId) {
+                    onUpdateProperty(
+                      "componentConfig.action.dataTransfer.targetLayerId",
+                      (selectedComp as any)._layerId,
+                    );
+                  } else {
+                    onUpdateProperty("componentConfig.action.dataTransfer.targetLayerId", undefined);
+                  }
+                }}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="데이터를 받을 컴포넌트 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {/* 데이터 수신 가능한 컴포넌트 필터링 (모든 레이어 포함, 소스와 다른 컴포넌트만) */}
+                  {allComponents
+                    .filter((comp: any) => {
+                      const type = comp.componentType || comp.type || "";
+                      const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some(
+                        (t) => type.includes(t),
+                      );
+                      return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
+                    })
+                    .map((comp: any) => {
+                      const compType = comp.componentType || comp.type || "unknown";
+                      const compLabel = comp.label || comp.componentConfig?.title || comp.id;
+                      const layerName = comp._layerName;
+                      return (
+                        <SelectItem key={comp.id} value={comp.id}>
+                          <div className="flex items-center gap-2">
+                            <span className="text-xs font-medium">{compLabel}</span>
+                            <span className="text-muted-foreground text-[10px]">({compType})</span>
+                            {layerName && (
+                              <span className="rounded bg-amber-100 px-1 text-[9px] text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+                                {layerName}
+                              </span>
+                            )}
+                          </div>
+                        </SelectItem>
+                      );
+                    })}
+                  {allComponents.filter((comp: any) => {
+                    const type = comp.componentType || comp.type || "";
+                    const isReceivable = ["table-list", "repeater-field-group", "form-group", "data-table"].some((t) =>
+                      type.includes(t),
+                    );
+                    return isReceivable && comp.id !== config.action?.dataTransfer?.sourceComponentId;
+                  }).length === 0 && (
+                    <SelectItem value="__none__" disabled>
+                      데이터 수신 가능한 컴포넌트가 없습니다
+                    </SelectItem>
+                  )}
+                </SelectContent>
+              </Select>
+              <p className="text-muted-foreground mt-1 text-xs">테이블, 반복 필드 그룹 등 데이터를 받는 컴포넌트</p>
+            </div>
+          )}
+
+          {/* 분할 패널 반대편 타겟 설정 */}
+          {config.action?.dataTransfer?.targetType === "splitPanel" && (
+            <div>
+              <Label>타겟 컴포넌트 ID (선택사항)</Label>
+              <Input
+                value={config.action?.dataTransfer?.targetComponentId || ""}
+                onChange={(e) =>
+                  onUpdateProperty("componentConfig.action.dataTransfer.targetComponentId", e.target.value)
+                }
+                placeholder="비워두면 첫 번째 수신 가능 컴포넌트로 전달"
+                className="h-8 text-xs"
+              />
+              <p className="text-muted-foreground mt-1 text-xs">
+                반대편 화면의 특정 컴포넌트 ID를 지정하거나, 비워두면 자동으로 첫 번째 수신 가능 컴포넌트로 전달됩니다.
+              </p>
+            </div>
+          )}
+
+          <div>
+            <Label htmlFor="transfer-mode">데이터 전달 모드</Label>
+            <Select
+              value={config.action?.dataTransfer?.mode || "append"}
+              onValueChange={(value) => onUpdateProperty("componentConfig.action.dataTransfer.mode", value)}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="append">추가 (Append)</SelectItem>
+                <SelectItem value="replace">교체 (Replace)</SelectItem>
+                <SelectItem value="merge">병합 (Merge)</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-xs">기존 데이터를 어떻게 처리할지 선택</p>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="clear-after-transfer">전달 후 소스 선택 초기화</Label>
+              <p className="text-muted-foreground text-xs">데이터 전달 후 소스의 선택을 해제합니다</p>
+            </div>
+            <Switch
+              id="clear-after-transfer"
+              checked={config.action?.dataTransfer?.clearAfterTransfer === true}
+              onCheckedChange={(checked) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.clearAfterTransfer", checked)
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label htmlFor="confirm-before-transfer">전달 전 확인 메시지</Label>
+              <p className="text-muted-foreground text-xs">데이터 전달 전 확인 다이얼로그를 표시합니다</p>
+            </div>
+            <Switch
+              id="confirm-before-transfer"
+              checked={config.action?.dataTransfer?.confirmBeforeTransfer === true}
+              onCheckedChange={(checked) =>
+                onUpdateProperty("componentConfig.action.dataTransfer.confirmBeforeTransfer", checked)
+              }
+            />
+          </div>
+
+          {config.action?.dataTransfer?.confirmBeforeTransfer && (
+            <div>
+              <Label htmlFor="confirm-message">확인 메시지</Label>
+              <Input
+                id="confirm-message"
+                placeholder="선택한 항목을 전달하시겠습니까?"
+                value={config.action?.dataTransfer?.confirmMessage || ""}
+                onChange={(e) => onUpdateProperty("componentConfig.action.dataTransfer.confirmMessage", e.target.value)}
+                className="h-8 text-xs"
+              />
+            </div>
+          )}
+
+          <div className="space-y-2">
+            <Label>검증 설정</Label>
+            <div className="space-y-2 rounded-md border p-3">
+              <div className="flex items-center gap-2">
+                <Label htmlFor="min-selection" className="text-xs">
+                  최소 선택 개수
+                </Label>
+                <Input
+                  id="min-selection"
+                  type="number"
+                  placeholder="0"
+                  value={config.action?.dataTransfer?.validation?.minSelection || ""}
+                  onChange={(e) =>
+                    onUpdateProperty(
+                      "componentConfig.action.dataTransfer.validation.minSelection",
+                      parseInt(e.target.value) || 0,
+                    )
+                  }
+                  className="h-8 w-20 text-xs"
+                />
+              </div>
+              <div className="flex items-center gap-2">
+                <Label htmlFor="max-selection" className="text-xs">
+                  최대 선택 개수
+                </Label>
+                <Input
+                  id="max-selection"
+                  type="number"
+                  placeholder="제한없음"
+                  value={config.action?.dataTransfer?.validation?.maxSelection || ""}
+                  onChange={(e) =>
+                    onUpdateProperty(
+                      "componentConfig.action.dataTransfer.validation.maxSelection",
+                      parseInt(e.target.value) || undefined,
+                    )
+                  }
+                  className="h-8 w-20 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>추가 데이터 소스 (선택사항)</Label>
+            <p className="text-muted-foreground text-xs">
+              조건부 컨테이너의 카테고리 값 등 추가 데이터를 함께 전달할 수 있습니다
+            </p>
+            <div className="space-y-2 rounded-md border p-3">
+              <div>
+                <Label className="text-xs">추가 컴포넌트</Label>
+                <Select
+                  value={config.action?.dataTransfer?.additionalSources?.[0]?.componentId || ""}
+                  onValueChange={(value) => {
+                    const currentSources = config.action?.dataTransfer?.additionalSources || [];
+                    const newSources = [...currentSources];
+                    if (newSources.length === 0) {
+                      newSources.push({ componentId: value, fieldName: "" });
+                    } else {
+                      newSources[0] = { ...newSources[0], componentId: value };
+                    }
+                    onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+                  }}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="추가 데이터 컴포넌트 선택 (선택사항)" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__clear__">
+                      <span className="text-muted-foreground">선택 안 함</span>
+                    </SelectItem>
+                    {/* 추가 데이터 제공 가능한 컴포넌트 (조건부 컨테이너, 셀렉트박스 등) */}
+                    {allComponents
+                      .filter((comp: any) => {
+                        const type = comp.componentType || comp.type || "";
+                        // 소스/타겟과 다른 컴포넌트 중 값을 제공할 수 있는 타입
+                        return ["conditional-container", "select-basic", "select", "combobox"].some((t) =>
+                          type.includes(t),
+                        );
+                      })
+                      .map((comp: any) => {
+                        const compType = comp.componentType || comp.type || "unknown";
+                        const compLabel = comp.label || comp.componentConfig?.controlLabel || comp.id;
+                        return (
+                          <SelectItem key={comp.id} value={comp.id}>
+                            <div className="flex items-center gap-2">
+                              <span className="text-xs font-medium">{compLabel}</span>
+                              <span className="text-muted-foreground text-[10px]">({compType})</span>
+                            </div>
+                          </SelectItem>
+                        );
+                      })}
+                  </SelectContent>
+                </Select>
+                <p className="text-muted-foreground mt-1 text-xs">
+                  조건부 컨테이너, 셀렉트박스 등 (카테고리 값 전달용)
+                </p>
+              </div>
+              <div>
+                <Label htmlFor="additional-field-name" className="text-xs">
+                  타겟 필드명 (선택사항)
+                </Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                      {(() => {
+                        const fieldName = config.action?.dataTransfer?.additionalSources?.[0]?.fieldName;
+                        if (!fieldName) return "필드 선택 (비워두면 전체 데이터)";
+                        const cols = mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns;
+                        const found = cols.find((c) => c.name === fieldName);
+                        return found ? `${found.label || found.name}` : fieldName;
+                      })()}
+                      <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[240px] p-0" align="start">
+                    <Command>
+                      <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                      <CommandList>
+                        <CommandEmpty className="py-2 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                        <CommandGroup>
+                          <CommandItem
+                            value="__none__"
+                            onSelect={() => {
+                              const currentSources = config.action?.dataTransfer?.additionalSources || [];
+                              const newSources = [...currentSources];
+                              if (newSources.length === 0) {
+                                newSources.push({ componentId: "", fieldName: "" });
+                              } else {
+                                newSources[0] = { ...newSources[0], fieldName: "" };
+                              }
+                              onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                !config.action?.dataTransfer?.additionalSources?.[0]?.fieldName
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <span className="text-muted-foreground">선택 안 함 (전체 데이터 병합)</span>
+                          </CommandItem>
+                          {(mappingTargetColumns.length > 0 ? mappingTargetColumns : currentTableColumns).map((col) => (
+                            <CommandItem
+                              key={col.name}
+                              value={`${col.label || ""} ${col.name}`}
+                              onSelect={() => {
+                                const currentSources = config.action?.dataTransfer?.additionalSources || [];
+                                const newSources = [...currentSources];
+                                if (newSources.length === 0) {
+                                  newSources.push({ componentId: "", fieldName: col.name });
+                                } else {
+                                  newSources[0] = { ...newSources[0], fieldName: col.name };
+                                }
+                                onUpdateProperty("componentConfig.action.dataTransfer.additionalSources", newSources);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-3 w-3",
+                                  config.action?.dataTransfer?.additionalSources?.[0]?.fieldName === col.name
+                                    ? "opacity-100"
+                                    : "opacity-0",
+                                )}
+                              />
+                              <span className="font-medium">{col.label || col.name}</span>
+                              {col.label && col.label !== col.name && (
+                                <span className="text-muted-foreground ml-1 text-[10px]">({col.name})</span>
+                              )}
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <p className="text-muted-foreground mt-1 text-xs">추가 데이터가 저장될 타겟 테이블 컬럼</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 멀티 테이블 필드 매핑 */}
+          <div className="space-y-3">
+            <Label>필드 매핑 설정</Label>
+
+            {/* 타겟 테이블 (공통) */}
+            <div className="space-y-1">
+              <Label className="text-xs">타겟 테이블</Label>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                    {config.action?.dataTransfer?.targetTable
+                      ? availableTables.find((t) => t.name === config.action?.dataTransfer?.targetTable)?.label ||
+                        config.action?.dataTransfer?.targetTable
+                      : "타겟 테이블 선택"}
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[250px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="py-2 text-center text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+                      <CommandGroup>
+                        {availableTables.map((table) => (
+                          <CommandItem
+                            key={table.name}
+                            value={`${table.label} ${table.name}`}
+                            onSelect={() => {
+                              onUpdateProperty("componentConfig.action.dataTransfer.targetTable", table.name);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                config.action?.dataTransfer?.targetTable === table.name ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <span className="font-medium">{table.label}</span>
+                            <span className="text-muted-foreground ml-1">({table.name})</span>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+
+            {/* 소스 테이블 매핑 그룹 */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs">소스 테이블별 매핑</Label>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 text-[10px]"
+                  onClick={() => {
+                    const currentMappings = config.action?.dataTransfer?.multiTableMappings || [];
+                    onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", [
+                      ...currentMappings,
+                      { sourceTable: "", mappingRules: [] },
+                    ]);
+                    setActiveMappingGroupIndex(currentMappings.length);
+                  }}
+                  disabled={!config.action?.dataTransfer?.targetTable}
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  소스 테이블 추가
+                </Button>
+              </div>
+              <p className="text-muted-foreground text-[10px]">
+                여러 소스 테이블에서 데이터를 전달할 때, 각 테이블별로 매핑 규칙을 설정합니다. 런타임에 소스 테이블을
+                자동 감지합니다.
+              </p>
+
+              {!config.action?.dataTransfer?.targetTable ? (
+                <div className="rounded-md border border-dashed p-3 text-center">
+                  <p className="text-muted-foreground text-xs">먼저 타겟 테이블을 선택하세요.</p>
+                </div>
+              ) : !(config.action?.dataTransfer?.multiTableMappings || []).length ? (
+                <div className="rounded-md border border-dashed p-3 text-center">
+                  <p className="text-muted-foreground text-xs">매핑 그룹이 없습니다. 소스 테이블을 추가하세요.</p>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {/* 소스 테이블 탭 */}
+                  <div className="flex flex-wrap gap-1">
+                    {(config.action?.dataTransfer?.multiTableMappings || []).map((group: any, gIdx: number) => (
+                      <div key={gIdx} className="flex items-center gap-0.5">
+                        <Button
+                          type="button"
+                          variant={activeMappingGroupIndex === gIdx ? "default" : "outline"}
+                          size="sm"
+                          className="h-6 text-[10px]"
+                          onClick={() => setActiveMappingGroupIndex(gIdx)}
+                        >
+                          {group.sourceTable
+                            ? availableTables.find((t) => t.name === group.sourceTable)?.label || group.sourceTable
+                            : `그룹 ${gIdx + 1}`}
+                          {group.mappingRules?.length > 0 && (
+                            <span className="bg-primary/20 ml-1 rounded-full px-1 text-[9px]">
+                              {group.mappingRules.length}
+                            </span>
+                          )}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive hover:bg-destructive/10 h-5 w-5"
+                          onClick={() => {
+                            const mappings = [...(config.action?.dataTransfer?.multiTableMappings || [])];
+                            mappings.splice(gIdx, 1);
+                            onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
+                            if (activeMappingGroupIndex >= mappings.length) {
+                              setActiveMappingGroupIndex(Math.max(0, mappings.length - 1));
+                            }
+                          }}
+                        >
+                          <X className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* 활성 그룹 편집 영역 */}
+                  {(() => {
+                    const multiMappings = config.action?.dataTransfer?.multiTableMappings || [];
+                    const activeGroup = multiMappings[activeMappingGroupIndex];
+                    if (!activeGroup) return null;
+
+                    const activeSourceTable = activeGroup.sourceTable || "";
+                    const activeSourceColumns = mappingSourceColumnsMap[activeSourceTable] || [];
+                    const activeRules: any[] = activeGroup.mappingRules || [];
+
+                    const updateGroupField = (field: string, value: any) => {
+                      const mappings = [...multiMappings];
+                      mappings[activeMappingGroupIndex] = { ...mappings[activeMappingGroupIndex], [field]: value };
+                      onUpdateProperty("componentConfig.action.dataTransfer.multiTableMappings", mappings);
+                    };
+
+                    return (
+                      <div className="space-y-2 rounded-md border p-3">
+                        {/* 소스 테이블 선택 */}
+                        <div className="space-y-1">
+                          <Label className="text-xs">소스 테이블</Label>
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <Button variant="outline" role="combobox" className="h-8 w-full justify-between text-xs">
+                                {activeSourceTable
+                                  ? availableTables.find((t) => t.name === activeSourceTable)?.label ||
+                                    activeSourceTable
+                                  : "소스 테이블 선택"}
+                                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-[250px] p-0" align="start">
+                              <Command>
+                                <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                                <CommandList>
+                                  <CommandEmpty className="py-2 text-center text-xs">
+                                    테이블을 찾을 수 없습니다
+                                  </CommandEmpty>
+                                  <CommandGroup>
+                                    {availableTables.map((table) => (
+                                      <CommandItem
+                                        key={table.name}
+                                        value={`${table.label} ${table.name}`}
+                                        onSelect={async () => {
+                                          updateGroupField("sourceTable", table.name);
+                                          if (!mappingSourceColumnsMap[table.name]) {
+                                            const cols = await loadMappingColumns(table.name);
+                                            setMappingSourceColumnsMap((prev) => ({ ...prev, [table.name]: cols }));
+                                          }
+                                        }}
+                                        className="text-xs"
+                                      >
+                                        <Check
+                                          className={cn(
+                                            "mr-2 h-3 w-3",
+                                            activeSourceTable === table.name ? "opacity-100" : "opacity-0",
+                                          )}
+                                        />
+                                        <span className="font-medium">{table.label}</span>
+                                        <span className="text-muted-foreground ml-1">({table.name})</span>
+                                      </CommandItem>
+                                    ))}
+                                  </CommandGroup>
+                                </CommandList>
+                              </Command>
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+
+                        {/* 매핑 규칙 목록 */}
+                        <div className="space-y-1">
+                          <div className="flex items-center justify-between">
+                            <Label className="text-[10px]">매핑 규칙</Label>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              className="h-5 text-[10px]"
+                              onClick={() => {
+                                updateGroupField("mappingRules", [
+                                  ...activeRules,
+                                  { sourceField: "", targetField: "" },
+                                ]);
+                              }}
+                              disabled={!activeSourceTable}
+                            >
+                              <Plus className="mr-1 h-3 w-3" />
+                              추가
+                            </Button>
+                          </div>
+
+                          {!activeSourceTable ? (
+                            <p className="text-muted-foreground text-[10px]">소스 테이블을 먼저 선택하세요.</p>
+                          ) : activeRules.length === 0 ? (
+                            <p className="text-muted-foreground text-[10px]">매핑 없음 (동일 필드명 자동 매핑)</p>
+                          ) : (
+                            activeRules.map((rule: any, rIdx: number) => {
+                              const popoverKeyS = `${activeMappingGroupIndex}-${rIdx}-s`;
+                              const popoverKeyT = `${activeMappingGroupIndex}-${rIdx}-t`;
+                              return (
+                                <div key={rIdx} className="bg-background flex items-center gap-2 rounded-md border p-2">
+                                  <div className="flex-1">
+                                    <Popover
+                                      open={mappingSourcePopoverOpen[popoverKeyS] || false}
+                                      onOpenChange={(open) =>
+                                        setMappingSourcePopoverOpen((prev) => ({ ...prev, [popoverKeyS]: open }))
+                                      }
+                                    >
+                                      <PopoverTrigger asChild>
+                                        <Button
+                                          variant="outline"
+                                          role="combobox"
+                                          className="h-7 w-full justify-between text-xs"
+                                        >
+                                          {rule.sourceField
+                                            ? activeSourceColumns.find((c) => c.name === rule.sourceField)?.label ||
+                                              rule.sourceField
+                                            : "소스 필드"}
+                                          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                                        </Button>
+                                      </PopoverTrigger>
+                                      <PopoverContent className="w-[200px] p-0" align="start">
+                                        <Command>
+                                          <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                          <CommandList>
+                                            <CommandEmpty className="py-2 text-center text-xs">컬럼 없음</CommandEmpty>
+                                            <CommandGroup>
+                                              {activeSourceColumns.map((col) => (
+                                                <CommandItem
+                                                  key={col.name}
+                                                  value={`${col.label} ${col.name}`}
+                                                  onSelect={() => {
+                                                    const newRules = [...activeRules];
+                                                    newRules[rIdx] = { ...newRules[rIdx], sourceField: col.name };
+                                                    updateGroupField("mappingRules", newRules);
+                                                    setMappingSourcePopoverOpen((prev) => ({
+                                                      ...prev,
+                                                      [popoverKeyS]: false,
+                                                    }));
+                                                  }}
+                                                  className="text-xs"
+                                                >
+                                                  <Check
+                                                    className={cn(
+                                                      "mr-2 h-3 w-3",
+                                                      rule.sourceField === col.name ? "opacity-100" : "opacity-0",
+                                                    )}
+                                                  />
+                                                  <span>{col.label}</span>
+                                                  {col.label !== col.name && (
+                                                    <span className="text-muted-foreground ml-1">({col.name})</span>
+                                                  )}
+                                                </CommandItem>
+                                              ))}
+                                            </CommandGroup>
+                                          </CommandList>
+                                        </Command>
+                                      </PopoverContent>
+                                    </Popover>
+                                  </div>
+
+                                  <span className="text-muted-foreground text-xs">→</span>
+
+                                  <div className="flex-1">
+                                    <Popover
+                                      open={mappingTargetPopoverOpen[popoverKeyT] || false}
+                                      onOpenChange={(open) =>
+                                        setMappingTargetPopoverOpen((prev) => ({ ...prev, [popoverKeyT]: open }))
+                                      }
+                                    >
+                                      <PopoverTrigger asChild>
+                                        <Button
+                                          variant="outline"
+                                          role="combobox"
+                                          className="h-7 w-full justify-between text-xs"
+                                        >
+                                          {rule.targetField
+                                            ? mappingTargetColumns.find((c) => c.name === rule.targetField)?.label ||
+                                              rule.targetField
+                                            : "타겟 필드"}
+                                          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+                                        </Button>
+                                      </PopoverTrigger>
+                                      <PopoverContent className="w-[200px] p-0" align="start">
+                                        <Command>
+                                          <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                                          <CommandList>
+                                            <CommandEmpty className="py-2 text-center text-xs">컬럼 없음</CommandEmpty>
+                                            <CommandGroup>
+                                              {mappingTargetColumns.map((col) => (
+                                                <CommandItem
+                                                  key={col.name}
+                                                  value={`${col.label} ${col.name}`}
+                                                  onSelect={() => {
+                                                    const newRules = [...activeRules];
+                                                    newRules[rIdx] = { ...newRules[rIdx], targetField: col.name };
+                                                    updateGroupField("mappingRules", newRules);
+                                                    setMappingTargetPopoverOpen((prev) => ({
+                                                      ...prev,
+                                                      [popoverKeyT]: false,
+                                                    }));
+                                                  }}
+                                                  className="text-xs"
+                                                >
+                                                  <Check
+                                                    className={cn(
+                                                      "mr-2 h-3 w-3",
+                                                      rule.targetField === col.name ? "opacity-100" : "opacity-0",
+                                                    )}
+                                                  />
+                                                  <span>{col.label}</span>
+                                                  {col.label !== col.name && (
+                                                    <span className="text-muted-foreground ml-1">({col.name})</span>
+                                                  )}
+                                                </CommandItem>
+                                              ))}
+                                            </CommandGroup>
+                                          </CommandList>
+                                        </Command>
+                                      </PopoverContent>
+                                    </Popover>
+                                  </div>
+
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="text-destructive hover:bg-destructive/10 h-7 w-7"
+                                    onClick={() => {
+                                      const newRules = [...activeRules];
+                                      newRules.splice(rIdx, 1);
+                                      updateGroupField("mappingRules", newRules);
+                                    }}
+                                  >
+                                    <X className="h-3 w-3" />
+                                  </Button>
+                                </div>
+                              );
+                            })
+                          )}
+                        </div>
+                      </div>
+                    );
+                  })()}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="rounded-md bg-primary/10 p-3 dark:bg-primary/15">
+            <p className="text-xs text-primary dark:text-primary/60">
+              <strong>사용 방법:</strong>
+              <br />
+              1. 소스 컴포넌트에서 데이터를 선택합니다
+              <br />
+              2. 소스 테이블별로 필드 매핑 규칙을 설정합니다
+              <br />
+              3. 이 버튼을 클릭하면 소스 테이블을 자동 감지하여 매핑된 데이터가 타겟으로 전달됩니다
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* 🆕 즉시 저장(quickInsert) 액션 설정 */}
+      {component.componentConfig?.action?.type === "quickInsert" && (
+        <QuickInsertConfigSection
+          component={component}
+          onUpdateProperty={onUpdateProperty}
+          allComponents={allComponents}
+          currentTableName={currentTableName}
+        />
+      )}
+
+      {/* 결재 요청(approval) 액션 설정 */}
+      {localInputs.actionType === "approval" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">결재 요청 설정</h4>
+          <p className="text-muted-foreground text-xs">
+            버튼 클릭 시 결재 요청 모달이 열립니다. 결재 유형을 선택하면 기본 결재선이 자동으로 세팅됩니다.
+          </p>
+
+          <div>
+            <Label htmlFor="approval-definition" className="text-xs sm:text-sm">
+              결재 유형
+            </Label>
+            <Select
+              value={String(component.componentConfig?.action?.approvalDefinitionId || "")}
+              onValueChange={(value) => {
+                onUpdateProperty(
+                  "componentConfig.action.approvalDefinitionId",
+                  value === "none" ? null : Number(value),
+                );
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                <SelectValue placeholder={approvalDefinitionsLoading ? "로딩 중..." : "결재 유형 선택 (선택사항)"} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">유형 없음 (직접 설정)</SelectItem>
+                {approvalDefinitions.map((def) => (
+                  <SelectItem key={def.definition_id} value={String(def.definition_id)}>
+                    {def.definition_name}
+                    {def.description ? ` - ${def.description}` : ""}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              결재 유형을 선택하면 기본 결재선 템플릿이 자동 적용됩니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="approval-target-table" className="text-xs sm:text-sm">
+              대상 테이블
+            </Label>
+            <Input
+              id="approval-target-table"
+              placeholder={currentTableName || "예: purchase_orders"}
+              value={component.componentConfig?.action?.approvalTargetTable || currentTableName || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.approvalTargetTable", e.target.value)}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+              readOnly={!!currentTableName && !component.componentConfig?.action?.approvalTargetTable}
+            />
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              {currentTableName
+                ? `현재 화면 테이블 "${currentTableName}" 자동 적용됨`
+                : "결재 대상 레코드가 저장된 테이블명"}
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="approval-record-id-field" className="text-xs sm:text-sm">
+              레코드 ID 필드명
+            </Label>
+            <Input
+              id="approval-record-id-field"
+              placeholder="예: id, purchase_id"
+              value={component.componentConfig?.action?.approvalRecordIdField || "id"}
+              onChange={(e) => onUpdateProperty("componentConfig.action.approvalRecordIdField", e.target.value)}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">현재 선택된 레코드의 PK 컬럼명</p>
+          </div>
+        </div>
+      )}
+
+      {/* 🆕 이벤트 발송 액션 설정 */}
+      {localInputs.actionType === "event" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">이벤트 발송 설정</h4>
+          <p className="text-muted-foreground text-xs">
+            버튼 클릭 시 V2 이벤트 버스를 통해 이벤트를 발송합니다. 다른 컴포넌트나 서비스에서 이 이벤트를 수신하여
+            처리할 수 있습니다.
+          </p>
+
+          <div>
+            <Label htmlFor="event-name">이벤트 이름</Label>
+            <Select
+              value={component.componentConfig?.action?.eventConfig?.eventName || ""}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.eventConfig.eventName", value);
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="이벤트 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="SCHEDULE_GENERATE_REQUEST">스케줄 자동 생성 요청</SelectItem>
+                <SelectItem value="TABLE_REFRESH">테이블 새로고침</SelectItem>
+                <SelectItem value="DATA_CHANGED">데이터 변경 알림</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          {component.componentConfig?.action?.eventConfig?.eventName === "SCHEDULE_GENERATE_REQUEST" && (
+            <div className="border-primary/20 space-y-3 border-l-2 pl-4">
+              <div>
+                <Label>스케줄 유형</Label>
+                <Select
+                  value={component.componentConfig?.action?.eventConfig?.eventPayload?.scheduleType || "PRODUCTION"}
+                  onValueChange={(value) => {
+                    onUpdateProperty("componentConfig.action.eventConfig.eventPayload.scheduleType", value);
+                  }}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue placeholder="스케줄 유형 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="PRODUCTION">생산 스케줄</SelectItem>
+                    <SelectItem value="DELIVERY">배송 스케줄</SelectItem>
+                    <SelectItem value="MAINTENANCE">정비 스케줄</SelectItem>
+                    <SelectItem value="CUSTOM">커스텀</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label>리드타임 (일)</Label>
+                <Input
+                  type="number"
+                  className="h-8 text-xs"
+                  placeholder="3"
+                  value={
+                    component.componentConfig?.action?.eventConfig?.eventPayload?.config?.scheduling?.leadTimeDays || 3
+                  }
+                  onChange={(e) => {
+                    onUpdateProperty(
+                      "componentConfig.action.eventConfig.eventPayload.config.scheduling.leadTimeDays",
+                      parseInt(e.target.value) || 3,
+                    );
+                  }}
+                />
+              </div>
+
+              <div>
+                <Label>일일 최대 생산량</Label>
+                <Input
+                  type="number"
+                  className="h-8 text-xs"
+                  placeholder="100"
+                  value={
+                    component.componentConfig?.action?.eventConfig?.eventPayload?.config?.scheduling
+                      ?.maxDailyCapacity || 100
+                  }
+                  onChange={(e) => {
+                    onUpdateProperty(
+                      "componentConfig.action.eventConfig.eventPayload.config.scheduling.maxDailyCapacity",
+                      parseInt(e.target.value) || 100,
+                    );
+                  }}
+                />
+              </div>
+
+              <div className="rounded-md bg-primary/10 p-2 dark:bg-primary/10">
+                <p className="text-xs text-primary dark:text-primary/70">
+                  <strong>동작 방식:</strong> 테이블에서 선택된 데이터를 기반으로 스케줄을 자동 생성합니다. 생성 전
+                  미리보기 확인 다이얼로그가 표시됩니다.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 마스터-디테일 엑셀 업로드 설정 컴포넌트
+ * 분할 패널 + column_labels에서 관계를 자동 감지 (채번은 테이블 타입 관리에서 자동 감지)
+ */
+const MasterDetailExcelUploadConfig: React.FC<{
+  config: any;
+  onUpdateProperty: (path: string, value: any) => void;
+  allComponents: ComponentData[];
+}> = ({ config, onUpdateProperty, allComponents }) => {
+  const [relationInfo, setRelationInfo] = useState<{
+    masterTable: string;
+    detailTable: string;
+    masterKeyColumn: string;
+    detailFkColumn: string;
+  } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [masterColumns, setMasterColumns] = useState<
+    Array<{
+      columnName: string;
+      columnLabel: string;
+      inputType: string;
+      referenceTable?: string;
+      referenceColumn?: string;
+      displayColumn?: string;
+    }>
+  >([]);
+  // 참조 테이블별 컬럼 목록 캐시 (컬럼명 + 라벨)
+  const [refTableColumns, setRefTableColumns] = useState<Record<string, Array<{ name: string; label: string }>>>({});
+
+  // 마스터-디테일 설정
+  const masterDetailConfig = config.action?.masterDetailExcel || {};
+
+  // 분할 패널에서 마스터/디테일 테이블명 자동 감지
+  const splitPanelInfo = useMemo(() => {
+    const findSplitPanel = (components: any[]): any => {
+      for (const comp of components) {
+        const compId = comp.componentId || comp.componentType;
+        if (compId === "split-panel-layout") {
+          return comp.componentConfig;
+        }
+        if (comp.children && comp.children.length > 0) {
+          const found = findSplitPanel(comp.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    return findSplitPanel(allComponents as any[]);
+  }, [allComponents]);
+
+  const masterTable = splitPanelInfo?.leftPanel?.tableName || "";
+  const detailTable = splitPanelInfo?.rightPanel?.tableName || "";
+
+  // 마스터 테이블 컬럼 로드
+  useEffect(() => {
+    if (!masterTable) {
+      setMasterColumns([]);
+      return;
+    }
+
+    const loadMasterColumns = async () => {
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get(`/table-management/tables/${masterTable}/columns`);
+        if (response.data?.success && response.data?.data?.columns) {
+          const cols = response.data.data.columns.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+            inputType: col.inputType || col.input_type || "text",
+            referenceTable: col.referenceTable || col.reference_table,
+            referenceColumn: col.referenceColumn || col.reference_column,
+            displayColumn: col.displayColumn || col.display_column,
+          }));
+          setMasterColumns(cols);
+        }
+      } catch (error) {
+        console.error("마스터 테이블 컬럼 로드 실패:", error);
+      }
+    };
+    loadMasterColumns();
+  }, [masterTable]);
+
+  // 선택된 엔티티 필드들의 참조 테이블 컬럼 로드
+  useEffect(() => {
+    const entityFields = (masterDetailConfig.masterSelectFields || []).filter(
+      (f: any) => f.inputType === "entity" && f.referenceTable,
+    );
+
+    const loadRefTableColumns = async () => {
+      const { apiClient } = await import("@/lib/api/client");
+
+      for (const field of entityFields) {
+        // 이미 로드된 테이블은 스킵
+        if (refTableColumns[field.referenceTable]) continue;
+
+        try {
+          const response = await apiClient.get(`/table-management/tables/${field.referenceTable}/columns`);
+          if (response.data?.success && response.data?.data?.columns) {
+            const cols = response.data.data.columns.map((c: any) => ({
+              name: c.columnName || c.column_name,
+              label: c.displayName || c.columnLabel || c.column_label || c.columnName || c.column_name,
+            }));
+            setRefTableColumns((prev) => ({
+              ...prev,
+              [field.referenceTable]: cols,
+            }));
+          }
+        } catch (error) {
+          console.error("참조 테이블 컬럼 로드 실패:", field.referenceTable, error);
+        }
+      }
+    };
+
+    if (entityFields.length > 0) {
+      loadRefTableColumns();
+    }
+  }, [masterDetailConfig.masterSelectFields, refTableColumns]);
+
+  // column_labels에서 FK 관계 자동 감지
+  useEffect(() => {
+    if (!masterTable || !detailTable) {
+      setRelationInfo(null);
+      return;
+    }
+
+    const loadRelationInfo = async () => {
+      setLoading(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        // 디테일 테이블의 컬럼 정보 조회 (referenceTable, referenceColumn 포함)
+        const response = await apiClient.get(`/table-management/tables/${detailTable}/columns`);
+
+        if (response.data?.success && response.data?.data?.columns) {
+          const columns = response.data.data.columns;
+          // referenceTable이 마스터 테이블인 컬럼 찾기
+          const fkColumn = columns.find((col: any) => col.referenceTable === masterTable);
+
+          if (fkColumn) {
+            const detailFk = fkColumn.columnName || fkColumn.column_name;
+            const masterKey = fkColumn.referenceColumn || fkColumn.reference_column;
+
+            setRelationInfo({
+              masterTable,
+              detailTable,
+              masterKeyColumn: masterKey,
+              detailFkColumn: detailFk,
+            });
+
+            // 설정에 자동으로 저장
+            onUpdateProperty("componentConfig.action.masterDetailExcel", {
+              ...masterDetailConfig,
+              masterTable,
+              detailTable,
+              masterKeyColumn: masterKey,
+              detailFkColumn: detailFk,
+            });
+          } else {
+            setRelationInfo(null);
+          }
+        }
+      } catch (error) {
+        console.error("FK 관계 로드 실패:", error);
+        setRelationInfo(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadRelationInfo();
+  }, [masterTable, detailTable]);
+
+  const updateMasterDetailConfig = (updates: Record<string, any>) => {
+    onUpdateProperty("componentConfig.action.masterDetailExcel", {
+      ...masterDetailConfig,
+      ...updates,
+    });
+  };
+
+  // 분할 패널이 없으면 표시하지 않음
+  if (!splitPanelInfo) {
+    return (
+      <div className="space-y-2 border-t pt-4">
+        <p className="text-muted-foreground text-xs">
+          이 화면에 분할 패널이 없습니다. 마스터-디테일 업로드는 분할 패널 화면에서만 사용할 수 있습니다.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 border-t pt-4">
+      <h5 className="text-muted-foreground text-xs font-medium">마스터-디테일 설정 (자동 감지)</h5>
+
+      {/* 자동 감지된 정보 표시 */}
+      <div className="rounded-md bg-muted p-3 dark:bg-foreground">
+        <p className="mb-2 text-xs font-medium">분할 패널에서 감지된 정보:</p>
+        <div className="grid grid-cols-2 gap-2 text-xs">
+          <div>
+            <span className="text-muted-foreground">마스터:</span>{" "}
+            <span className="font-medium">{masterTable || "-"}</span>
+          </div>
+          <div>
+            <span className="text-muted-foreground">디테일:</span>{" "}
+            <span className="font-medium">{detailTable || "-"}</span>
+          </div>
+        </div>
+
+        {loading ? (
+          <p className="text-muted-foreground mt-2 text-xs">FK 관계 조회 중...</p>
+        ) : relationInfo ? (
+          <div className="mt-2 grid grid-cols-2 gap-2 text-xs">
+            <div>
+              <span className="text-muted-foreground">마스터 키:</span>{" "}
+              <span className="font-medium text-emerald-600">{relationInfo.masterKeyColumn}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">디테일 FK:</span>{" "}
+              <span className="font-medium text-emerald-600">{relationInfo.detailFkColumn}</span>
+            </div>
+          </div>
+        ) : (
+          <p className="mt-2 text-xs text-amber-600">
+            FK 관계를 찾을 수 없습니다. 테이블 타입관리에서 reference_table을 설정해주세요.
+          </p>
+        )}
+      </div>
+
+      {/* 마스터 키 자동 생성 안내 */}
+      {relationInfo && (
+        <p className="text-muted-foreground border-t pt-2 text-xs">
+          마스터 테이블의 <strong>{relationInfo.masterKeyColumn}</strong> 값은 테이블 타입 관리에서 설정된 채번 규칙으로
+          자동 생성됩니다.
+        </p>
+      )}
+
+      {/* 마스터 필드 선택 - 사용자가 엑셀 업로드 시 입력할 필드 */}
+      {relationInfo && masterColumns.length > 0 && (
+        <div>
+          <Label className="text-xs">사용자 입력 필드 (마스터)</Label>
+          <p className="text-muted-foreground mb-2 text-xs">
+            엑셀 업로드 시 사용자가 직접 선택/입력할 마스터 테이블 필드를 선택하세요.
+          </p>
+          <div className="max-h-40 space-y-1 overflow-y-auto rounded-md border p-2">
+            {masterColumns
+              .filter((col) => col.columnName !== relationInfo.masterKeyColumn) // 채번으로 자동 생성되는 키는 제외
+              .map((col) => {
+                const selectedFields = masterDetailConfig.masterSelectFields || [];
+                const isSelected = selectedFields.some((f: any) => f.columnName === col.columnName);
+                return (
+                  <div key={col.columnName} className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id={`master-field-${col.columnName}`}
+                      checked={isSelected}
+                      onChange={(e) => {
+                        const checked = e.target.checked;
+                        let newFields = [...selectedFields];
+                        if (checked) {
+                          newFields.push({
+                            columnName: col.columnName,
+                            columnLabel: col.columnLabel,
+                            inputType: col.inputType,
+                            referenceTable: col.referenceTable,
+                            referenceColumn: col.referenceColumn,
+                            displayColumn: col.displayColumn,
+                            required: true,
+                          });
+                        } else {
+                          newFields = newFields.filter((f: any) => f.columnName !== col.columnName);
+                        }
+                        updateMasterDetailConfig({ masterSelectFields: newFields });
+                      }}
+                      className="h-4 w-4 rounded border-input"
+                    />
+                    <label htmlFor={`master-field-${col.columnName}`} className="flex-1 cursor-pointer text-xs">
+                      {col.columnLabel}
+                      <span className="text-muted-foreground ml-1">({col.columnName})</span>
+                      {col.inputType === "entity" && <span className="ml-1 text-primary">[엔티티]</span>}
+                    </label>
+                  </div>
+                );
+              })}
+          </div>
+          {(masterDetailConfig.masterSelectFields?.length || 0) > 0 && (
+            <p className="text-muted-foreground mt-1 text-xs">
+              선택된 필드: {masterDetailConfig.masterSelectFields.length}개
+            </p>
+          )}
+
+          {/* 엔티티 필드의 표시컬럼 설정 */}
+          {masterDetailConfig.masterSelectFields?.filter((f: any) => f.inputType === "entity").length > 0 && (
+            <div className="mt-3 space-y-2 border-t pt-3">
+              <Label className="text-xs">엔티티 필드 표시컬럼 설정</Label>
+              {masterDetailConfig.masterSelectFields
+                .filter((f: any) => f.inputType === "entity")
+                .map((field: any) => {
+                  const availableColumns = refTableColumns[field.referenceTable] || [];
+                  return (
+                    <div key={`display-${field.columnName}`} className="flex items-center gap-2">
+                      <span className="w-24 truncate text-xs">{field.columnLabel}:</span>
+                      <Select
+                        value={field.displayColumn || ""}
+                        onValueChange={(value) => {
+                          const newFields = masterDetailConfig.masterSelectFields.map((f: any) =>
+                            f.columnName === field.columnName ? { ...f, displayColumn: value } : f,
+                          );
+                          updateMasterDetailConfig({ masterSelectFields: newFields });
+                        }}
+                      >
+                        <SelectTrigger className="h-7 flex-1 text-xs">
+                          <SelectValue placeholder="표시컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {availableColumns.length === 0 ? (
+                            <SelectItem value="__loading__" disabled>
+                              {field.referenceTable ? "로딩 중..." : "참조 테이블 없음"}
+                            </SelectItem>
+                          ) : (
+                            availableColumns.map((col) => (
+                              <SelectItem key={col.name} value={col.name} className="text-xs">
+                                {col.label}
+                              </SelectItem>
+                            ))
+                          )}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  );
+                })}
+              <p className="text-muted-foreground text-xs">참조 테이블에서 사용자에게 표시할 컬럼을 선택하세요.</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 엑셀 업로드 채번 규칙 안내 (테이블 타입 관리에서 자동 감지)
+ */
+const ExcelNumberingRuleInfo: React.FC = () => {
+  return (
+    <div className="border-t pt-3">
+      <Label className="text-xs">채번 규칙</Label>
+      <p className="text-muted-foreground mt-1 text-xs">
+        테이블 타입 관리에서 "채번" 타입으로 설정된 컬럼의 채번 규칙이 업로드 시 자동으로 적용됩니다.
+      </p>
+    </div>
+  );
+};
+
+/**
+ * 엑셀 업로드 후 제어 실행 설정 (단일 테이블/마스터-디테일 모두 사용 가능)
+ */
+const ExcelAfterUploadControlConfig: React.FC<{
+  config: { afterUploadFlows?: Array<{ flowId: string; order: number }> };
+  updateConfig: (updates: { afterUploadFlows?: Array<{ flowId: string; order: number }> }) => void;
+}> = ({ config, updateConfig }) => {
+  const [nodeFlows, setNodeFlows] = useState<Array<{ flowId: number; flowName: string; flowDescription?: string }>>([]);
+  const [flowSelectOpen, setFlowSelectOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const selectedFlows = config.afterUploadFlows || [];
+
+  // 노드 플로우 목록 로드
+  useEffect(() => {
+    const loadNodeFlows = async () => {
+      setIsLoading(true);
+      try {
+        const { apiClient } = await import("@/lib/api/client");
+        const response = await apiClient.get("/dataflow/node-flows");
+        if (response.data?.success && response.data?.data) {
+          setNodeFlows(response.data.data);
+        }
+      } catch (error) {
+        console.error("노드 플로우 목록 로드 실패:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadNodeFlows();
+  }, []);
+
+  const addFlow = (flowId: string) => {
+    if (selectedFlows.some((f) => f.flowId === flowId)) return;
+    const newFlows = [...selectedFlows, { flowId, order: selectedFlows.length + 1 }];
+    updateConfig({ afterUploadFlows: newFlows });
+    setFlowSelectOpen(false);
+  };
+
+  const removeFlow = (flowId: string) => {
+    const newFlows = selectedFlows.filter((f) => f.flowId !== flowId).map((f, idx) => ({ ...f, order: idx + 1 }));
+    updateConfig({ afterUploadFlows: newFlows });
+  };
+
+  const moveUp = (index: number) => {
+    if (index === 0) return;
+    const newFlows = [...selectedFlows];
+    [newFlows[index - 1], newFlows[index]] = [newFlows[index], newFlows[index - 1]];
+    updateConfig({ afterUploadFlows: newFlows.map((f, idx) => ({ ...f, order: idx + 1 })) });
+  };
+
+  const moveDown = (index: number) => {
+    if (index === selectedFlows.length - 1) return;
+    const newFlows = [...selectedFlows];
+    [newFlows[index], newFlows[index + 1]] = [newFlows[index + 1], newFlows[index]];
+    updateConfig({ afterUploadFlows: newFlows.map((f, idx) => ({ ...f, order: idx + 1 })) });
+  };
+
+  const availableFlows = nodeFlows.filter((f) => !selectedFlows.some((s) => s.flowId === String(f.flowId)));
+
+  return (
+    <div className="border-t pt-3">
+      <Label className="text-xs">업로드 후 제어 실행</Label>
+      <p className="text-muted-foreground mb-2 text-xs">엑셀 업로드 완료 후 순서대로 실행할 제어를 추가하세요.</p>
+
+      {selectedFlows.length > 0 && (
+        <div className="mb-2 space-y-1">
+          {selectedFlows.map((selected, index) => {
+            const flow = nodeFlows.find((f) => String(f.flowId) === selected.flowId);
+            return (
+              <div key={selected.flowId} className="flex items-center gap-1 rounded border bg-white p-1.5">
+                <span className="text-muted-foreground w-5 text-center text-xs">{index + 1}</span>
+                <span className="flex-1 truncate text-xs">{flow?.flowName || `Flow ${selected.flowId}`}</span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0"
+                  onClick={() => moveUp(index)}
+                  disabled={index === 0}
+                >
+                  <ChevronUp className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0"
+                  onClick={() => moveDown(index)}
+                  disabled={index === selectedFlows.length - 1}
+                >
+                  <ChevronDown className="h-3 w-3" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-5 w-5 p-0 text-destructive"
+                  onClick={() => removeFlow(selected.flowId)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <Popover open={flowSelectOpen} onOpenChange={setFlowSelectOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            className="h-8 w-full justify-between text-xs"
+            disabled={isLoading || availableFlows.length === 0}
+          >
+            {isLoading ? "로딩 중..." : availableFlows.length === 0 ? "추가 가능한 제어 없음" : "제어 추가..."}
+            <Plus className="ml-2 h-4 w-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[300px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="제어 검색..." className="text-xs" />
+            <CommandList>
+              <CommandEmpty className="py-2 text-center text-xs">검색 결과 없음</CommandEmpty>
+              <CommandGroup>
+                {availableFlows.map((flow) => (
+                  <CommandItem
+                    key={flow.flowId}
+                    value={flow.flowName}
+                    onSelect={() => addFlow(String(flow.flowId))}
+                    className="text-xs"
+                  >
+                    <div className="flex flex-col">
+                      <span>{flow.flowName}</span>
+                      {flow.flowDescription && (
+                        <span className="text-muted-foreground text-[10px]">{flow.flowDescription}</span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {selectedFlows.length > 0 && (
+        <p className="text-muted-foreground mt-1 text-xs">
+          업로드 완료 후 위 순서대로 {selectedFlows.length}개의 제어가 실행됩니다.
+        </p>
+      )}
+    </div>
+  );
+};
+
+/**
+ * 엑셀 업로드 설정 섹션 컴포넌트
+ * 마스터-디테일 설정은 분할 패널 자동 감지
+ */
+const ExcelUploadConfigSection: React.FC<{
+  config: any;
+  onUpdateProperty: (path: string, value: any) => void;
+  allComponents: ComponentData[];
+  currentTableName?: string; // 현재 화면의 테이블명 (ButtonConfigPanel에서 전달)
+}> = ({ config, onUpdateProperty, allComponents, currentTableName: propTableName }) => {
+  // 엑셀 업로드 설정 상태 관리 (채번은 테이블 타입 관리에서 자동 감지)
+  const [excelUploadConfig, setExcelUploadConfig] = useState<{
+    afterUploadFlows?: Array<{ flowId: string; order: number }>;
+  }>({
+    afterUploadFlows: config.action?.excelAfterUploadFlows || [],
+  });
+
+  // 분할 패널 감지
+  const splitPanelInfo = useMemo(() => {
+    const findSplitPanel = (components: any[]): any => {
+      for (const comp of components) {
+        const compId = comp.componentId || comp.componentType;
+        if (compId === "split-panel-layout") {
+          return comp.componentConfig;
+        }
+        if (comp.children && comp.children.length > 0) {
+          const found = findSplitPanel(comp.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    return findSplitPanel(allComponents as any[]);
+  }, [allComponents]);
+
+  const hasSplitPanel = !!splitPanelInfo;
+
+  // 단일 테이블 감지 (props 우선, 없으면 컴포넌트에서 탐색)
+  const singleTableName = useMemo(() => {
+    if (hasSplitPanel) return undefined;
+
+    // props로 전달된 테이블명 우선 사용
+    if (propTableName) return propTableName;
+
+    // 컴포넌트에서 테이블명 탐색
+    const findTableName = (components: any[]): string | undefined => {
+      for (const comp of components) {
+        const compId = comp.componentId || comp.componentType;
+        const compConfig = comp.componentConfig || comp.config || comp;
+
+        // 테이블 패널이나 데이터 테이블에서 테이블명 찾기
+        if (
+          compId === "table-panel" ||
+          compId === "data-table" ||
+          compId === "table-list" ||
+          compId === "simple-table"
+        ) {
+          const tableName = compConfig?.tableName || compConfig?.table;
+          if (tableName) return tableName;
+        }
+
+        // 폼 컴포넌트에서 테이블명 찾기
+        if (compId === "form-panel" || compId === "input-form" || compId === "form" || compId === "detail-form") {
+          const tableName = compConfig?.tableName || compConfig?.table;
+          if (tableName) return tableName;
+        }
+
+        // 범용적으로 tableName 속성이 있는 컴포넌트 찾기
+        if (compConfig?.tableName) {
+          return compConfig.tableName;
+        }
+
+        if (comp.children && comp.children.length > 0) {
+          const found = findTableName(comp.children);
+          if (found) return found;
+        }
+      }
+      return undefined;
+    };
+    return findTableName(allComponents as any[]);
+  }, [allComponents, hasSplitPanel, propTableName]);
+
+  // 디버깅: 감지된 테이블명 로그
+  useEffect(() => {
+    console.log(
+      "[ExcelUploadConfigSection] 분할 패널:",
+      hasSplitPanel,
+      "단일 테이블:",
+      singleTableName,
+      "(props:",
+      propTableName,
+      ")",
+    );
+  }, [hasSplitPanel, singleTableName, propTableName]);
+
+  // 설정 업데이트 함수 (채번은 테이블 타입 관리에서 자동 감지되므로 제어 실행만 관리)
+  const updateExcelUploadConfig = (updates: Partial<typeof excelUploadConfig>) => {
+    const newConfig = { ...excelUploadConfig, ...updates };
+    setExcelUploadConfig(newConfig);
+
+    if (updates.afterUploadFlows !== undefined) {
+      onUpdateProperty("componentConfig.action.excelAfterUploadFlows", updates.afterUploadFlows);
+    }
+  };
+
+  // config 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    setExcelUploadConfig({
+      afterUploadFlows: config.action?.excelAfterUploadFlows || [],
+    });
+  }, [config.action?.excelAfterUploadFlows]);
+
+  return (
+    <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+      <h4 className="text-foreground text-sm font-medium">엑셀 업로드 설정</h4>
+
+      <div>
+        <Label htmlFor="excel-upload-mode">업로드 모드</Label>
+        <Select
+          value={config.action?.excelUploadMode || "insert"}
+          onValueChange={(value) => onUpdateProperty("componentConfig.action.excelUploadMode", value)}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="insert">신규 삽입 (INSERT)</SelectItem>
+            <SelectItem value="update">기존 수정 (UPDATE)</SelectItem>
+            <SelectItem value="upsert">삽입/수정 (UPSERT)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {(config.action?.excelUploadMode === "update" || config.action?.excelUploadMode === "upsert") && (
+        <div>
+          <Label htmlFor="excel-key-column">
+            키 컬럼명 <span className="text-destructive">*</span>
+          </Label>
+          <Input
+            id="excel-key-column"
+            placeholder="예: id, code"
+            value={config.action?.excelKeyColumn || ""}
+            onChange={(e) => onUpdateProperty("componentConfig.action.excelKeyColumn", e.target.value)}
+            className="h-8 text-xs"
+          />
+          <p className="text-muted-foreground mt-1 text-xs">UPDATE/UPSERT 시 기준이 되는 컬럼명</p>
+        </div>
+      )}
+
+      {/* 채번 규칙 안내 (테이블 타입 관리에서 자동 감지) */}
+      <ExcelNumberingRuleInfo />
+
+      {/* 업로드 후 제어 실행 (항상 표시) */}
+      <ExcelAfterUploadControlConfig config={excelUploadConfig} updateConfig={updateExcelUploadConfig} />
+
+      {/* 마스터-디테일 설정 (분할 패널 자동 감지) */}
+      <MasterDetailExcelUploadConfig
+        config={config}
+        onUpdateProperty={onUpdateProperty}
+        allComponents={allComponents}
+      />
+    </div>
+  );
+};
diff --git a/frontend/components/screen/config-panels/button-config/AdvancedTab.tsx b/frontend/components/screen/config-panels/button-config/AdvancedTab.tsx
new file mode 100644
index 00000000..141ca8d6
--- /dev/null
+++ b/frontend/components/screen/config-panels/button-config/AdvancedTab.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { ImprovedButtonControlConfigPanel } from "../ImprovedButtonControlConfigPanel";
+import { FlowVisibilityConfigPanel } from "../FlowVisibilityConfigPanel";
+import type { ButtonTabProps } from "./types";
+
+/**
+ * AdvancedTab - 행 선택 활성화, 제어 기능, 플로우 표시 제어
+ */
+export const AdvancedTab: React.FC<ButtonTabProps> = ({
+  component,
+  onUpdateProperty,
+  allComponents,
+}) => {
+  // 플로우 위젯이 화면에 있는지 확인
+  const hasFlowWidget = useMemo(() => {
+    return allComponents.some((comp: { componentType?: string; widgetType?: string }) => {
+      const compType = comp.componentType || comp.widgetType || "";
+      return compType === "flow-widget" || compType?.toLowerCase().includes("flow");
+    });
+  }, [allComponents]);
+
+  const actionType = component.componentConfig?.action?.type;
+
+  return (
+    <div className="space-y-4">
+      {/* 행 선택 시에만 활성화 설정 */}
+      <div className="space-y-4 rounded-lg border bg-muted/50 p-4">
+        <h4 className="text-sm font-medium text-foreground">행 선택 활성화 조건</h4>
+        <p className="text-xs text-muted-foreground">
+          테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
+        </p>
+
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <Label>행 선택 시에만 활성화</Label>
+            <p className="text-xs text-muted-foreground">
+              체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.
+            </p>
+          </div>
+          <Switch
+            checked={component.componentConfig?.action?.requireRowSelection || false}
+            onCheckedChange={(checked) => {
+              onUpdateProperty("componentConfig.action.requireRowSelection", checked);
+            }}
+          />
+        </div>
+
+        {component.componentConfig?.action?.requireRowSelection && (
+          <div className="space-y-3 border-l-2 border-primary/20 pl-4">
+            <div>
+              <Label htmlFor="row-selection-source">선택 데이터 소스</Label>
+              <Select
+                value={component.componentConfig?.action?.rowSelectionSource || "auto"}
+                onValueChange={(value) => {
+                  onUpdateProperty("componentConfig.action.rowSelectionSource", value);
+                }}
+              >
+                <SelectTrigger id="row-selection-source" className="h-8 text-xs">
+                  <SelectValue placeholder="데이터 소스 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">자동 감지 (권장)</SelectItem>
+                  <SelectItem value="tableList">테이블 리스트 선택</SelectItem>
+                  <SelectItem value="splitPanelLeft">분할 패널 좌측 선택</SelectItem>
+                  <SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="mt-1 text-xs text-muted-foreground">
+                자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
+              </p>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label>다중 선택 허용</Label>
+                <p className="text-xs text-muted-foreground">
+                  여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
+                </p>
+              </div>
+              <Switch
+                checked={component.componentConfig?.action?.allowMultiRowSelection ?? true}
+                onCheckedChange={(checked) => {
+                  onUpdateProperty("componentConfig.action.allowMultiRowSelection", checked);
+                }}
+              />
+            </div>
+
+            {!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
+              <div className="rounded-md bg-muted p-2">
+                <p className="text-xs text-muted-foreground">
+                  정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 제어 기능 섹션 - 엑셀 업로드 계열이 아닐 때만 표시 */}
+      {actionType !== "excel_upload" && actionType !== "multi_table_excel_upload" && (
+        <div className="border-t border-border pt-6">
+          <ImprovedButtonControlConfigPanel
+            component={component}
+            onUpdateProperty={onUpdateProperty}
+          />
+        </div>
+      )}
+
+      {/* 플로우 단계별 표시 제어 (플로우 위젯이 있을 때만) */}
+      {hasFlowWidget && (
+        <div className="border-t border-border pt-6">
+          <FlowVisibilityConfigPanel
+            component={component}
+            allComponents={allComponents}
+            onUpdateProperty={onUpdateProperty}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/components/screen/config-panels/button-config/BasicTab.tsx b/frontend/components/screen/config-panels/button-config/BasicTab.tsx
new file mode 100644
index 00000000..6bf05f70
--- /dev/null
+++ b/frontend/components/screen/config-panels/button-config/BasicTab.tsx
@@ -0,0 +1,1024 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Check, Plus, X, Info, RotateCcw } from "lucide-react";
+import { icons as allLucideIcons } from "lucide-react";
+import { sanitizeSvg } from "@/lib/button-icon-map";
+import { cn } from "@/lib/utils";
+import { ComponentData } from "@/types/screen";
+import { ColorPickerWithTransparent } from "../../common/ColorPickerWithTransparent";
+import {
+  actionIconMap,
+  noIconActions,
+  NO_ICON_MESSAGE,
+  iconSizePresets,
+  getLucideIcon,
+  addToIconMap,
+  getDefaultIconForAction,
+} from "@/lib/button-icon-map";
+import type { ButtonTabProps } from "./types";
+
+export const BasicTab: React.FC<ButtonTabProps> = ({
+  component,
+  onUpdateProperty,
+}) => {
+  const config = component.componentConfig || {};
+
+  // 표시 모드, 버튼 텍스트, 액션 타입
+  const [displayMode, setDisplayMode] = useState<"text" | "icon" | "icon-text">(
+    config.displayMode || "text"
+  );
+  const [localText, setLocalText] = useState(
+    config.text !== undefined ? config.text : "버튼"
+  );
+  const [localActionType, setLocalActionType] = useState(
+    String(config.action?.type || "save")
+  );
+
+  // 아이콘 설정 상태
+  const [selectedIcon, setSelectedIcon] = useState<string>(config.icon?.name || "");
+  const [selectedIconType, setSelectedIconType] = useState<"lucide" | "svg">(
+    config.icon?.type || "lucide"
+  );
+  const [iconSize, setIconSize] = useState<string>(config.icon?.size || "보통");
+  const [iconColor, setIconColor] = useState<string>(config.icon?.color || "");
+  const [iconGap, setIconGap] = useState<number>(config.iconGap ?? 6);
+  const [iconTextPosition, setIconTextPosition] = useState<
+    "right" | "left" | "bottom" | "top"
+  >(config.iconTextPosition || "right");
+
+  // 커스텀 아이콘 UI 상태
+  const [lucideSearchOpen, setLucideSearchOpen] = useState(false);
+  const [lucideSearchTerm, setLucideSearchTerm] = useState("");
+  const [svgPasteOpen, setSvgPasteOpen] = useState(false);
+  const [svgInput, setSvgInput] = useState("");
+  const [svgName, setSvgName] = useState("");
+  const [svgError, setSvgError] = useState("");
+
+  // 컴포넌트 prop 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    const latestConfig = component.componentConfig || {};
+    const latestAction = latestConfig.action || {};
+
+    setLocalText(latestConfig.text !== undefined ? latestConfig.text : "버튼");
+    setLocalActionType(String(latestAction.type || "save"));
+    setDisplayMode((latestConfig.displayMode as "text" | "icon" | "icon-text") || "text");
+    setSelectedIcon(latestConfig.icon?.name || "");
+    setSelectedIconType((latestConfig.icon?.type as "lucide" | "svg") || "lucide");
+    setIconSize(latestConfig.icon?.size || "보통");
+    setIconColor(latestConfig.icon?.color || "");
+    setIconGap(latestConfig.iconGap ?? 6);
+    setIconTextPosition(
+      (latestConfig.iconTextPosition as "right" | "left" | "bottom" | "top") || "right"
+    );
+  }, [component.id, component.componentConfig?.action?.type]);
+
+  // 현재 액션의 추천 아이콘 목록
+  const currentActionIcons = actionIconMap[localActionType] || [];
+  const isNoIconAction = noIconActions.has(localActionType);
+  const customIcons: string[] = config.customIcons || [];
+  const customSvgIcons: Array<{ name: string; svg: string }> =
+    config.customSvgIcons || [];
+  const showIconSettings = displayMode === "icon" || displayMode === "icon-text";
+
+  // 아이콘 선택 핸들러
+  const handleSelectIcon = (iconName: string, iconType: "lucide" | "svg" = "lucide") => {
+    setSelectedIcon(iconName);
+    setSelectedIconType(iconType);
+    onUpdateProperty("componentConfig.icon", {
+      name: iconName,
+      type: iconType,
+      size: iconSize,
+      ...(iconColor ? { color: iconColor } : {}),
+    });
+  };
+
+  // 선택 중인 아이콘이 삭제되었을 때 디폴트 아이콘으로 복귀
+  const revertToDefaultIcon = () => {
+    const def = getDefaultIconForAction(localActionType);
+    setSelectedIcon(def.name);
+    setSelectedIconType(def.type);
+    handleSelectIcon(def.name, def.type);
+  };
+
+  // 표시 모드 변경 핸들러
+  const handleDisplayModeChange = (mode: "text" | "icon" | "icon-text") => {
+    setDisplayMode(mode);
+    onUpdateProperty("componentConfig.displayMode", mode);
+
+    if ((mode === "icon" || mode === "icon-text") && !selectedIcon) {
+      revertToDefaultIcon();
+    }
+  };
+
+  // 아이콘 크기 프리셋 변경
+  const handleIconSizePreset = (preset: string) => {
+    setIconSize(preset);
+    if (selectedIcon) {
+      onUpdateProperty("componentConfig.icon.size", preset);
+    }
+  };
+
+  // 아이콘 색상 변경
+  const handleIconColorChange = (color: string | undefined) => {
+    const val = color || "";
+    setIconColor(val);
+    if (selectedIcon) {
+      if (val) {
+        onUpdateProperty("componentConfig.icon.color", val);
+      } else {
+        onUpdateProperty("componentConfig.icon.color", undefined);
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 표시 모드 선택 */}
+      <div>
+        <Label className="mb-1.5 block text-xs sm:text-sm">표시 모드</Label>
+        <div className="flex rounded-md border">
+          {(
+            [
+              { value: "text", label: "텍스트" },
+              { value: "icon", label: "아이콘" },
+              { value: "icon-text", label: "아이콘+텍스트" },
+            ] as const
+          ).map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => handleDisplayModeChange(opt.value)}
+              className={cn(
+                "flex-1 px-2 py-1.5 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
+                displayMode === opt.value
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-muted text-muted-foreground"
+              )}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 아이콘 모드 레이아웃 안내 */}
+      {displayMode === "icon" && (
+        <div className="flex items-start gap-2 rounded-md bg-muted p-2.5 text-xs text-muted-foreground">
+          <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>
+            아이콘만 표시할 때는 버튼 영역의 가로 폭을 줄여 정사각형에 가깝게
+            만들면 더 깔끔합니다.
+          </span>
+        </div>
+      )}
+
+      {/* 버튼 텍스트 (텍스트 / 아이콘+텍스트 모드에서 표시) */}
+      {(displayMode === "text" || displayMode === "icon-text") && (
+        <div>
+          <Label htmlFor="button-text">버튼 텍스트</Label>
+          <Input
+            id="button-text"
+            value={localText}
+            onChange={(e) => {
+              const newValue = e.target.value;
+              setLocalText(newValue);
+              onUpdateProperty("componentConfig.text", newValue);
+            }}
+            placeholder="버튼 텍스트를 입력하세요"
+          />
+        </div>
+      )}
+
+      {/* 버튼 액션 */}
+      <div>
+        <Label htmlFor="button-action" className="mb-1.5 block">
+          버튼 액션
+        </Label>
+        <Select
+          key={`action-${component.id}`}
+          value={localActionType}
+          onValueChange={(value) => {
+            setLocalActionType(value);
+            onUpdateProperty("componentConfig.action.type", value);
+
+            // 액션 변경 시: 선택된 아이콘이 새 액션의 추천 목록에 없으면 초기화
+            const newActionIcons = actionIconMap[value] || [];
+            if (
+              selectedIcon &&
+              selectedIconType === "lucide" &&
+              !newActionIcons.includes(selectedIcon) &&
+              !customIcons.includes(selectedIcon)
+            ) {
+              setSelectedIcon("");
+              onUpdateProperty("componentConfig.icon", undefined);
+            }
+
+            setTimeout(() => {
+              const newColor = value === "delete" ? "#ef4444" : "#212121";
+              onUpdateProperty("style.labelColor", newColor);
+            }, 100);
+          }}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="버튼 액션 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            {/* 핵심 액션 */}
+            <SelectItem value="save">저장</SelectItem>
+            <SelectItem value="delete">삭제</SelectItem>
+            <SelectItem value="edit">편집</SelectItem>
+            <SelectItem value="navigate">페이지 이동</SelectItem>
+            <SelectItem value="modal">모달 열기</SelectItem>
+            <SelectItem value="transferData">데이터 전달</SelectItem>
+
+            {/* 엑셀 관련 */}
+            <SelectItem value="excel_download">엑셀 다운로드</SelectItem>
+            <SelectItem value="excel_upload">엑셀 업로드</SelectItem>
+            <SelectItem value="multi_table_excel_upload">
+              다중 테이블 엑셀 업로드
+            </SelectItem>
+
+            {/* 고급 기능 */}
+            <SelectItem value="quickInsert">즉시 저장</SelectItem>
+            <SelectItem value="control">제어 흐름</SelectItem>
+            <SelectItem value="approval">결재 요청</SelectItem>
+
+            {/* 특수 기능 (필요 시 사용) */}
+            <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
+            <SelectItem value="operation_control">운행알림 및 종료</SelectItem>
+
+            {/* 이벤트 버스 */}
+            <SelectItem value="event">이벤트 발송</SelectItem>
+
+            {/* 복사 */}
+            <SelectItem value="copy">복사 (품목코드 초기화)</SelectItem>
+
+            {/* 숨김 처리 - 기존 시스템 호환성 유지, UI에서만 숨김 */}
+            {/* <SelectItem value="view_table_history">테이블 이력 보기</SelectItem> */}
+            {/* <SelectItem value="openRelatedModal">연관 데이터 버튼 모달 열기</SelectItem> */}
+            {/* <SelectItem value="openModalWithData">(deprecated) 데이터 전달 + 모달 열기</SelectItem> */}
+            {/* <SelectItem value="code_merge">코드 병합</SelectItem> */}
+            {/* <SelectItem value="empty_vehicle">공차등록</SelectItem> */}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 아이콘 설정 영역 */}
+      {showIconSettings && (
+        <div className="space-y-4">
+          {/* 추천 아이콘 / 안내 문구 */}
+          {isNoIconAction ? (
+            <div>
+              <div className="text-muted-foreground rounded-md border border-dashed p-3 text-center text-xs">
+                {NO_ICON_MESSAGE}
+              </div>
+
+              {/* 커스텀 아이콘이 있으면 표시 */}
+              {(customIcons.length > 0 || customSvgIcons.length > 0) && (
+                <>
+                  <div className="my-2 flex items-center gap-2">
+                    <div className="bg-border h-px flex-1" />
+                    <span className="text-muted-foreground text-[10px]">
+                      커스텀 아이콘
+                    </span>
+                    <div className="bg-border h-px flex-1" />
+                  </div>
+                  <div className="grid grid-cols-4 gap-1.5">
+                    {customIcons.map((iconName) => {
+                      const Icon = getLucideIcon(iconName);
+                      if (!Icon) return null;
+                      return (
+                        <div key={`custom-${iconName}`} className="relative">
+                          <button
+                            type="button"
+                            onClick={() => handleSelectIcon(iconName, "lucide")}
+                            className={cn(
+                              "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                              selectedIcon === iconName &&
+                                selectedIconType === "lucide"
+                                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                                : "border-transparent"
+                            )}
+                          >
+                            <Icon className="h-6 w-6" />
+                            <span className="text-muted-foreground truncate text-[10px]">
+                              {iconName}
+                            </span>
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const next = customIcons.filter(
+                                (n) => n !== iconName
+                              );
+                              onUpdateProperty(
+                                "componentConfig.customIcons",
+                                next
+                              );
+                              if (selectedIcon === iconName)
+                                revertToDefaultIcon();
+                            }}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </div>
+                      );
+                    })}
+                    {customSvgIcons.map((svgIcon) => (
+                      <div
+                        key={`svg-${svgIcon.name}`}
+                        className="relative"
+                      >
+                        <button
+                          type="button"
+                          onClick={() =>
+                            handleSelectIcon(svgIcon.name, "svg")
+                          }
+                          className={cn(
+                            "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                            selectedIcon === svgIcon.name &&
+                              selectedIconType === "svg"
+                              ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                              : "border-transparent"
+                          )}
+                        >
+                          <span
+                            className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                            dangerouslySetInnerHTML={{
+                              __html: sanitizeSvg(svgIcon.svg),
+                            }}
+                          />
+                          <span className="text-muted-foreground truncate text-[10px]">
+                            {svgIcon.name}
+                          </span>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const next = customSvgIcons.filter(
+                              (s) => s.name !== svgIcon.name
+                            );
+                            onUpdateProperty(
+                              "componentConfig.customSvgIcons",
+                              next
+                            );
+                            if (selectedIcon === svgIcon.name)
+                              revertToDefaultIcon();
+                          }}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {/* 커스텀 아이콘 추가 버튼 */}
+              <div className="mt-2 flex gap-2">
+                <Popover
+                  open={lucideSearchOpen}
+                  onOpenChange={setLucideSearchOpen}
+                >
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 flex-1 text-xs"
+                    >
+                      <Plus className="mr-1 h-3 w-3" />
+                      lucide 검색
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-64 p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="아이콘 이름 검색..."
+                        value={lucideSearchTerm}
+                        onValueChange={setLucideSearchTerm}
+                        className="text-xs"
+                      />
+                      <CommandList className="max-h-48">
+                        <CommandEmpty className="py-3 text-xs">
+                          아이콘을 찾을 수 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {Object.keys(allLucideIcons)
+                            .filter((name) =>
+                              name
+                                .toLowerCase()
+                                .includes(lucideSearchTerm.toLowerCase())
+                            )
+                            .slice(0, 30)
+                            .map((iconName) => {
+                              const Icon =
+                                allLucideIcons[
+                                  iconName as keyof typeof allLucideIcons
+                                ];
+                              return (
+                                <CommandItem
+                                  key={iconName}
+                                  value={iconName}
+                                  onSelect={() => {
+                                    const next = [...customIcons];
+                                    if (!next.includes(iconName)) {
+                                      next.push(iconName);
+                                      onUpdateProperty(
+                                        "componentConfig.customIcons",
+                                        next
+                                      );
+                                      if (Icon)
+                                        addToIconMap(iconName, Icon);
+                                    }
+                                    setLucideSearchOpen(false);
+                                    setLucideSearchTerm("");
+                                  }}
+                                  className="flex items-center gap-2 text-xs"
+                                >
+                                  {Icon ? (
+                                    <Icon className="h-4 w-4" />
+                                  ) : (
+                                    <span className="h-4 w-4" />
+                                  )}
+                                  {iconName}
+                                  {customIcons.includes(iconName) && (
+                                    <Check className="text-primary ml-auto h-3 w-3" />
+                                  )}
+                                </CommandItem>
+                              );
+                            })}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 flex-1 text-xs"
+                    >
+                      <Plus className="mr-1 h-3 w-3" />
+                      SVG 붙여넣기
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-72 space-y-2 p-3" align="start">
+                    <Label className="text-xs">아이콘 이름</Label>
+                    <Input
+                      value={svgName}
+                      onChange={(e) => setSvgName(e.target.value)}
+                      placeholder="예: 회사로고"
+                      className="h-7 text-xs"
+                    />
+                    <Label className="text-xs">SVG 코드</Label>
+                    <textarea
+                      value={svgInput}
+                      onChange={(e) => {
+                        setSvgInput(e.target.value);
+                        setSvgError("");
+                      }}
+                      onPaste={(e) => {
+                        e.stopPropagation();
+                        const text = e.clipboardData.getData("text/plain");
+                        if (text) {
+                          e.preventDefault();
+                          setSvgInput(text);
+                          setSvgError("");
+                        }
+                      }}
+                      onKeyDown={(e) => e.stopPropagation()}
+                      placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
+                      className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
+                    />
+                    {svgInput && (
+                      <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
+                        <span
+                          className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                          dangerouslySetInnerHTML={{
+                            __html: sanitizeSvg(svgInput),
+                          }}
+                        />
+                      </div>
+                    )}
+                    {svgError && (
+                      <p className="text-destructive text-xs">{svgError}</p>
+                    )}
+                    <Button
+                      size="sm"
+                      className="h-7 w-full text-xs"
+                      onClick={() => {
+                        if (!svgName.trim()) {
+                          setSvgError("아이콘 이름을 입력하세요.");
+                          return;
+                        }
+                        if (!svgInput.trim().includes("<svg")) {
+                          setSvgError("유효한 SVG 코드가 아닙니다.");
+                          return;
+                        }
+                        const sanitized = sanitizeSvg(svgInput);
+                        let finalName = svgName.trim();
+                        const existingNames = new Set(
+                          customSvgIcons.map((s) => s.name)
+                        );
+                        if (existingNames.has(finalName)) {
+                          let counter = 2;
+                          while (
+                            existingNames.has(`${svgName.trim()}(${counter})`)
+                          )
+                            counter++;
+                          finalName = `${svgName.trim()}(${counter})`;
+                        }
+                        const next = [
+                          ...customSvgIcons,
+                          { name: finalName, svg: sanitized },
+                        ];
+                        onUpdateProperty(
+                          "componentConfig.customSvgIcons",
+                          next
+                        );
+                        setSvgInput("");
+                        setSvgName("");
+                        setSvgError("");
+                        setSvgPasteOpen(false);
+                      }}
+                    >
+                      추가
+                    </Button>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          ) : (
+            <div>
+              <Label className="mb-1.5 block text-xs sm:text-sm">
+                아이콘 선택
+              </Label>
+              <div className="grid grid-cols-4 gap-1.5">
+                {currentActionIcons.map((iconName) => {
+                  const Icon = getLucideIcon(iconName);
+                  if (!Icon) return null;
+                  return (
+                    <button
+                      key={iconName}
+                      type="button"
+                      onClick={() => handleSelectIcon(iconName, "lucide")}
+                      className={cn(
+                        "hover:bg-muted flex flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                        selectedIcon === iconName &&
+                          selectedIconType === "lucide"
+                          ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                          : "border-transparent"
+                      )}
+                    >
+                      <Icon className="h-6 w-6" />
+                      <span className="text-muted-foreground truncate text-[10px]">
+                        {iconName}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+
+              {/* 커스텀 아이콘 영역 */}
+              {(customIcons.length > 0 || customSvgIcons.length > 0) && (
+                <>
+                  <div className="my-2 flex items-center gap-2">
+                    <div className="bg-border h-px flex-1" />
+                    <span className="text-muted-foreground text-[10px]">
+                      커스텀 아이콘
+                    </span>
+                    <div className="bg-border h-px flex-1" />
+                  </div>
+                  <div className="grid grid-cols-4 gap-1.5">
+                    {customIcons.map((iconName) => {
+                      const Icon = getLucideIcon(iconName);
+                      if (!Icon) return null;
+                      return (
+                        <div key={`custom-${iconName}`} className="relative">
+                          <button
+                            type="button"
+                            onClick={() => handleSelectIcon(iconName, "lucide")}
+                            className={cn(
+                              "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                              selectedIcon === iconName &&
+                                selectedIconType === "lucide"
+                                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                                : "border-transparent"
+                            )}
+                          >
+                            <Icon className="h-6 w-6" />
+                            <span className="text-muted-foreground truncate text-[10px]">
+                              {iconName}
+                            </span>
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              const next = customIcons.filter(
+                                (n) => n !== iconName
+                              );
+                              onUpdateProperty(
+                                "componentConfig.customIcons",
+                                next
+                              );
+                              if (selectedIcon === iconName)
+                                revertToDefaultIcon();
+                            }}
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                          >
+                            <X className="h-3 w-3" />
+                          </button>
+                        </div>
+                      );
+                    })}
+                    {customSvgIcons.map((svgIcon) => (
+                      <div
+                        key={`svg-${svgIcon.name}`}
+                        className="relative"
+                      >
+                        <button
+                          type="button"
+                          onClick={() =>
+                            handleSelectIcon(svgIcon.name, "svg")
+                          }
+                          className={cn(
+                            "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                            selectedIcon === svgIcon.name &&
+                              selectedIconType === "svg"
+                              ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                              : "border-transparent"
+                          )}
+                        >
+                          <span
+                            className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                            dangerouslySetInnerHTML={{
+                              __html: sanitizeSvg(svgIcon.svg),
+                            }}
+                          />
+                          <span className="text-muted-foreground truncate text-[10px]">
+                            {svgIcon.name}
+                          </span>
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const next = customSvgIcons.filter(
+                              (s) => s.name !== svgIcon.name
+                            );
+                            onUpdateProperty(
+                              "componentConfig.customSvgIcons",
+                              next
+                            );
+                            if (selectedIcon === svgIcon.name)
+                              revertToDefaultIcon();
+                          }}
+                          className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+
+              {/* 커스텀 아이콘 추가 버튼 */}
+              <div className="mt-2 flex gap-2">
+                <Popover
+                  open={lucideSearchOpen}
+                  onOpenChange={setLucideSearchOpen}
+                >
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 flex-1 text-xs"
+                    >
+                      <Plus className="mr-1 h-3 w-3" />
+                      lucide 검색
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-64 p-0" align="start">
+                    <Command>
+                      <CommandInput
+                        placeholder="아이콘 이름 검색..."
+                        value={lucideSearchTerm}
+                        onValueChange={setLucideSearchTerm}
+                        className="text-xs"
+                      />
+                      <CommandList className="max-h-48">
+                        <CommandEmpty className="py-3 text-xs">
+                          아이콘을 찾을 수 없습니다.
+                        </CommandEmpty>
+                        <CommandGroup>
+                          {Object.keys(allLucideIcons)
+                            .filter((name) =>
+                              name
+                                .toLowerCase()
+                                .includes(lucideSearchTerm.toLowerCase())
+                            )
+                            .slice(0, 30)
+                            .map((iconName) => {
+                              const Icon =
+                                allLucideIcons[
+                                  iconName as keyof typeof allLucideIcons
+                                ];
+                              return (
+                                <CommandItem
+                                  key={iconName}
+                                  value={iconName}
+                                  onSelect={() => {
+                                    const next = [...customIcons];
+                                    if (!next.includes(iconName)) {
+                                      next.push(iconName);
+                                      onUpdateProperty(
+                                        "componentConfig.customIcons",
+                                        next
+                                      );
+                                      if (Icon)
+                                        addToIconMap(iconName, Icon);
+                                    }
+                                    setLucideSearchOpen(false);
+                                    setLucideSearchTerm("");
+                                  }}
+                                  className="flex items-center gap-2 text-xs"
+                                >
+                                  {Icon ? (
+                                    <Icon className="h-4 w-4" />
+                                  ) : (
+                                    <span className="h-4 w-4" />
+                                  )}
+                                  {iconName}
+                                  {customIcons.includes(iconName) && (
+                                    <Check className="text-primary ml-auto h-3 w-3" />
+                                  )}
+                                </CommandItem>
+                              );
+                            })}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 flex-1 text-xs"
+                    >
+                      <Plus className="mr-1 h-3 w-3" />
+                      SVG 붙여넣기
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-72 space-y-2 p-3" align="start">
+                    <Label className="text-xs">아이콘 이름</Label>
+                    <Input
+                      value={svgName}
+                      onChange={(e) => setSvgName(e.target.value)}
+                      placeholder="예: 회사로고"
+                      className="h-7 text-xs"
+                    />
+                    <Label className="text-xs">SVG 코드</Label>
+                    <textarea
+                      value={svgInput}
+                      onChange={(e) => {
+                        setSvgInput(e.target.value);
+                        setSvgError("");
+                      }}
+                      onPaste={(e) => {
+                        e.stopPropagation();
+                        const text = e.clipboardData.getData("text/plain");
+                        if (text) {
+                          e.preventDefault();
+                          setSvgInput(text);
+                          setSvgError("");
+                        }
+                      }}
+                      onKeyDown={(e) => e.stopPropagation()}
+                      placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
+                      className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
+                    />
+                    {svgInput && (
+                      <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
+                        <span
+                          className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                          dangerouslySetInnerHTML={{
+                            __html: sanitizeSvg(svgInput),
+                          }}
+                        />
+                      </div>
+                    )}
+                    {svgError && (
+                      <p className="text-destructive text-xs">{svgError}</p>
+                    )}
+                    <Button
+                      size="sm"
+                      className="h-7 w-full text-xs"
+                      onClick={() => {
+                        if (!svgName.trim()) {
+                          setSvgError("아이콘 이름을 입력하세요.");
+                          return;
+                        }
+                        if (!svgInput.trim().includes("<svg")) {
+                          setSvgError("유효한 SVG 코드가 아닙니다.");
+                          return;
+                        }
+                        const sanitized = sanitizeSvg(svgInput);
+                        let finalName = svgName.trim();
+                        const existingNames = new Set(
+                          customSvgIcons.map((s) => s.name)
+                        );
+                        if (existingNames.has(finalName)) {
+                          let counter = 2;
+                          while (
+                            existingNames.has(`${svgName.trim()}(${counter})`)
+                          )
+                            counter++;
+                          finalName = `${svgName.trim()}(${counter})`;
+                        }
+                        const next = [
+                          ...customSvgIcons,
+                          { name: finalName, svg: sanitized },
+                        ];
+                        onUpdateProperty(
+                          "componentConfig.customSvgIcons",
+                          next
+                        );
+                        setSvgInput("");
+                        setSvgName("");
+                        setSvgError("");
+                        setSvgPasteOpen(false);
+                      }}
+                    >
+                      추가
+                    </Button>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          )}
+
+          {/* 아이콘 크기 비율 */}
+          <div>
+            <Label className="mb-1.5 block text-xs sm:text-sm">
+              아이콘 크기 비율
+            </Label>
+            <div className="flex rounded-md border">
+              {Object.keys(iconSizePresets).map((preset) => (
+                <button
+                  key={preset}
+                  type="button"
+                  onClick={() => handleIconSizePreset(preset)}
+                  className={cn(
+                    "flex-1 px-1 py-1 text-xs font-medium whitespace-nowrap transition-colors first:rounded-l-md last:rounded-r-md",
+                    iconSize === preset
+                      ? "bg-primary text-primary-foreground"
+                      : "hover:bg-muted text-muted-foreground"
+                  )}
+                >
+                  {preset}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* 텍스트 위치 (icon-text 모드 전용) */}
+          {displayMode === "icon-text" && (
+            <div>
+              <Label className="mb-1.5 block text-xs sm:text-sm">
+                텍스트 위치
+              </Label>
+              <div className="flex rounded-md border">
+                {(
+                  [
+                    { value: "left", label: "왼쪽" },
+                    { value: "right", label: "오른쪽" },
+                    { value: "top", label: "위쪽" },
+                    { value: "bottom", label: "아래쪽" },
+                  ] as const
+                ).map((pos) => (
+                  <button
+                    key={pos.value}
+                    type="button"
+                    onClick={() => {
+                      setIconTextPosition(pos.value);
+                      onUpdateProperty(
+                        "componentConfig.iconTextPosition",
+                        pos.value
+                      );
+                    }}
+                    className={cn(
+                      "flex-1 px-2 py-1 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
+                      iconTextPosition === pos.value
+                        ? "bg-primary text-primary-foreground"
+                        : "hover:bg-muted text-muted-foreground"
+                    )}
+                  >
+                    {pos.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 아이콘-텍스트 간격 (icon-text 모드 전용) */}
+          {displayMode === "icon-text" && (
+            <div>
+              <Label className="mb-1.5 block text-xs sm:text-sm">
+                아이콘-텍스트 간격
+              </Label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="range"
+                  min={0}
+                  max={32}
+                  step={1}
+                  value={Math.min(iconGap, 32)}
+                  onChange={(e) => {
+                    const val = Number(e.target.value);
+                    setIconGap(val);
+                    onUpdateProperty("componentConfig.iconGap", val);
+                  }}
+                  className="accent-primary h-1.5 flex-1 cursor-pointer"
+                />
+                <div className="flex items-center gap-1">
+                  <Input
+                    type="number"
+                    min={0}
+                    value={iconGap}
+                    onChange={(e) => {
+                      const val = Math.max(
+                        0,
+                        Number(e.target.value) || 0
+                      );
+                      setIconGap(val);
+                      onUpdateProperty("componentConfig.iconGap", val);
+                    }}
+                    className="h-7 w-14 text-center text-xs"
+                  />
+                  <span className="text-muted-foreground text-xs">px</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 아이콘 색상 */}
+          <div>
+            <Label className="mb-1.5 block text-xs sm:text-sm">
+              아이콘 색상
+            </Label>
+            <div className="flex items-center gap-2">
+              <ColorPickerWithTransparent
+                value={iconColor || undefined}
+                onChange={handleIconColorChange}
+                placeholder="텍스트 색상 상속"
+                className="flex-1"
+              />
+              {iconColor && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 shrink-0 text-xs"
+                  onClick={() => handleIconColorChange(undefined)}
+                >
+                  <RotateCcw className="mr-1 h-3 w-3" />
+                  텍스트 색상과 동일
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/components/screen/config-panels/button-config/DataflowTab.tsx b/frontend/components/screen/config-panels/button-config/DataflowTab.tsx
new file mode 100644
index 00000000..f0d64c24
--- /dev/null
+++ b/frontend/components/screen/config-panels/button-config/DataflowTab.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import React from "react";
+import { ButtonTabProps } from "./types";
+import { ButtonDataflowConfigPanel } from "../ButtonDataflowConfigPanel";
+
+/** 데이터플로우 탭: 버튼 제어관리 설정 패널 래퍼 */
+export const DataflowTab: React.FC<ButtonTabProps> = ({
+  component,
+  onUpdateProperty,
+}) => {
+  return (
+    <div className="space-y-4">
+      <ButtonDataflowConfigPanel
+        component={component}
+        onUpdateProperty={onUpdateProperty}
+      />
+    </div>
+  );
+};
diff --git a/frontend/components/screen/config-panels/button-config/types.ts b/frontend/components/screen/config-panels/button-config/types.ts
new file mode 100644
index 00000000..61fa251d
--- /dev/null
+++ b/frontend/components/screen/config-panels/button-config/types.ts
@@ -0,0 +1,31 @@
+import { ComponentData } from "@/types/screen";
+
+export interface TitleBlock {
+  id: string;
+  type: "text" | "field";
+  value: string;
+  tableName?: string;
+  label?: string;
+}
+
+export interface ButtonConfigPanelProps {
+  component: ComponentData;
+  onUpdateProperty: (path: string, value: any) => void;
+  allComponents?: ComponentData[];
+  currentTableName?: string;
+  currentScreenCompanyCode?: string;
+}
+
+export interface ScreenOption {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+export interface ButtonTabProps {
+  component: ComponentData;
+  onUpdateProperty: (path: string, value: any) => void;
+  allComponents: ComponentData[];
+  currentTableName?: string;
+  currentScreenCompanyCode?: string;
+}
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index b3377139..cf148e6e 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -8,7 +8,6 @@ import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Textarea } from "@/components/ui/textarea";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { ChevronDown, Settings, Info, Database, Trash2, Copy, Palette } from "lucide-react";
 import {
@@ -44,20 +43,11 @@ import {
   DetailTypeOption,
 } from "@/types/input-type-mapping";
 
-// 새로운 컴포넌트 설정 패널들
-import { ButtonConfigPanel } from "../config-panels/ButtonConfigPanel";
-import { CardConfigPanel } from "../config-panels/CardConfigPanel";
-import { DashboardConfigPanel } from "../config-panels/DashboardConfigPanel";
 import { ColorPickerWithTransparent } from "../common/ColorPickerWithTransparent";
-import { StatsCardConfigPanel } from "../config-panels/StatsCardConfigPanel";
 
 // ComponentRegistry import (동적 ConfigPanel 가져오기용)
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
-import { ProgressBarConfigPanel } from "../config-panels/ProgressBarConfigPanel";
-import { ChartConfigPanel } from "../config-panels/ChartConfigPanel";
-import { AlertConfigPanel } from "../config-panels/AlertConfigPanel";
-import { BadgeConfigPanel } from "../config-panels/BadgeConfigPanel";
-import { DynamicComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
+import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
 import StyleEditor from "../StyleEditor";
 import { Slider } from "@/components/ui/slider";
 import { Zap } from "lucide-react";
@@ -186,17 +176,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
       selectedComponent.componentConfig?.id ||
       selectedComponent.type;
 
-    const handleUpdateProperty = (path: string, value: any) => {
-      onUpdateProperty(selectedComponent.id, path, value);
-    };
-
-    const handleConfigChange = (newConfig: any) => {
-      // 기존 config와 병합하여 다른 속성 유지
-      const currentConfig = selectedComponent.componentConfig?.config || {};
-      const mergedConfig = { ...currentConfig, ...newConfig };
-      onUpdateProperty(selectedComponent.id, "componentConfig.config", mergedConfig);
-    };
-
     // 🆕 ComponentRegistry에서 ConfigPanel 가져오기 시도
     const componentId =
       selectedComponent.componentType || // ⭐ section-card 등
@@ -207,8 +186,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
     // 🆕 V2 컴포넌트 직접 감지 및 설정 패널 렌더링
     if (componentId?.startsWith("v2-")) {
       const v2ConfigPanels: Record<string, React.FC<{ config: any; onChange: (config: any) => void }>> = {
-        "v2-input": require("@/components/v2/config-panels/V2InputConfigPanel").V2InputConfigPanel,
-        "v2-select": require("@/components/v2/config-panels/V2SelectConfigPanel").V2SelectConfigPanel,
+        "v2-input": require("@/components/v2/config-panels/V2FieldConfigPanel").V2FieldConfigPanel,
+        "v2-select": require("@/components/v2/config-panels/V2FieldConfigPanel").V2FieldConfigPanel,
         "v2-date": require("@/components/v2/config-panels/V2DateConfigPanel").V2DateConfigPanel,
         "v2-list": require("@/components/v2/config-panels/V2ListConfigPanel").V2ListConfigPanel,
         "v2-layout": require("@/components/v2/config-panels/V2LayoutConfigPanel").V2LayoutConfigPanel,
@@ -216,7 +195,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
         "v2-media": require("@/components/v2/config-panels/V2MediaConfigPanel").V2MediaConfigPanel,
         "v2-biz": require("@/components/v2/config-panels/V2BizConfigPanel").V2BizConfigPanel,
         "v2-hierarchy": require("@/components/v2/config-panels/V2HierarchyConfigPanel").V2HierarchyConfigPanel,
-        "v2-bom-item-editor": require("@/components/v2/config-panels/V2BomItemEditorConfigPanel").V2BomItemEditorConfigPanel,
+        "v2-bom-item-editor": require("@/components/v2/config-panels/V2BomItemEditorConfigPanel")
+          .V2BomItemEditorConfigPanel,
         "v2-bom-tree": require("@/components/v2/config-panels/V2BomTreeConfigPanel").V2BomTreeConfigPanel,
       };
 
@@ -247,6 +227,9 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           extraProps.currentTableName = currentTableName;
           extraProps.screenTableName = selectedComponent.tableName || currentTable?.tableName || currentTableName;
         }
+        if (componentId === "v2-input") {
+          extraProps.allComponents = allComponents;
+        }
 
         return (
           <div key={selectedComponent.id} className="space-y-4">
@@ -263,14 +246,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
         const ConfigPanelComponent = definition.configPanel;
         const currentConfig = selectedComponent.componentConfig || {};
 
-        console.log("✅ ConfigPanel 표시:", {
-          componentId,
-          definitionName: definition.name,
-          hasConfigPanel: !!definition.configPanel,
-          currentConfig,
-          defaultSort: currentConfig?.defaultSort, // 🔍 defaultSort 확인
-        });
-
         // 🔧 ConfigPanelWrapper를 인라인 함수 대신 직접 JSX 반환 (리마운트 방지)
         const config = currentConfig || definition.defaultProps?.componentConfig || {};
 
@@ -280,12 +255,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
             ...currentConfig, // 기존 설정 유지
             ...newConfig, // 새 설정 병합
           };
-          console.log("🔧 [ConfigPanel] handleConfigChange:", {
-            componentId: selectedComponent.id,
-            currentConfig,
-            newConfig,
-            mergedConfig,
-          });
           onUpdateProperty(selectedComponent.id, "componentConfig", mergedConfig);
         };
 
@@ -301,15 +270,20 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
               <ConfigPanelComponent
                 config={config}
                 onChange={handlePanelConfigChange}
-                onConfigChange={handlePanelConfigChange} // 🔧 autocomplete-search-input 등 일부 컴포넌트용
-                tables={tables} // 테이블 정보 전달
-                allTables={allTables} // 🆕 전체 테이블 목록 전달 (selected-items-detail-input 등에서 사용)
-                screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName} // 🔧 화면 테이블명 전달
-                tableColumns={currentTable?.columns || []} // 🔧 테이블 컬럼 정보 전달
-                allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
-                currentComponent={selectedComponent} // 🆕 현재 컴포넌트 정보
-                menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달 (채번 규칙 등)
-                // 🆕 집계 위젯 등에서 사용하는 컴포넌트 목록
+                onConfigChange={handlePanelConfigChange}
+                tables={tables}
+                allTables={allTables}
+                screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
+                tableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
+                columnName={
+                  (selectedComponent as any).columnName || currentConfig?.columnName || currentConfig?.fieldName
+                }
+                inputType={(selectedComponent as any).inputType || currentConfig?.inputType}
+                componentType={componentType}
+                tableColumns={currentTable?.columns || []}
+                allComponents={allComponents}
+                currentComponent={selectedComponent}
+                menuObjid={menuObjid}
                 screenComponents={allComponents.map((comp: any) => ({
                   id: comp.id,
                   componentType: comp.componentType || comp.type,
@@ -322,335 +296,43 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           </div>
         );
       }
-      // ConfigPanel이 없으면 아래 switch case로 넘어감
+      // ConfigPanel이 없으면 DynamicComponentConfigPanel fallback으로 처리
     }
 
-    // 기존 하드코딩된 설정 패널들 (레거시)
-    switch (componentType) {
-      case "button":
-      case "button-primary":
-      case "button-secondary":
-      case "v2-button-primary":
-        // 🔧 component.id만 key로 사용 (unmount 방지)
-        return (
-          <ButtonConfigPanel
-            key={selectedComponent.id}
-            component={selectedComponent}
-            onUpdateProperty={handleUpdateProperty}
-            allComponents={allComponents}
-            currentTableName={currentTableName}
-            currentScreenCompanyCode={currentScreenCompanyCode}
-          />
-        );
+    // DynamicComponentConfigPanel을 통한 동적 로드 (CONFIG_PANEL_MAP 기반)
+    const fallbackId = componentId || componentType;
+    if (fallbackId && hasComponentConfigPanel(fallbackId)) {
+      const handleDynamicConfigChange = (newConfig: any) => {
+        const currentConfig = selectedComponent.componentConfig || {};
+        const mergedConfig = { ...currentConfig, ...newConfig };
+        onUpdateProperty(selectedComponent.id, "componentConfig", mergedConfig);
+      };
 
-      case "card":
-        return <CardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "dashboard":
-        return <DashboardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "stats":
-      case "stats-card":
-        return <StatsCardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "progress":
-      case "progress-bar":
-        return <ProgressBarConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "chart":
-      case "chart-basic":
-        return <ChartConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "alert":
-      case "alert-info":
-        return <AlertConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "badge":
-      case "badge-status":
-        return <BadgeConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;
-
-      case "section-card":
-        return (
-          <div className="space-y-4 p-4">
-            <div className="space-y-2">
-              <h3 className="text-sm font-semibold">Section Card 설정</h3>
-              <p className="text-muted-foreground text-xs">제목과 테두리가 있는 명확한 그룹화 컨테이너</p>
-            </div>
-
-            {/* 헤더 표시 */}
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="showHeader"
-                checked={selectedComponent.componentConfig?.showHeader !== false}
-                onCheckedChange={(checked) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.showHeader", checked);
-                }}
-              />
-              <Label htmlFor="showHeader" className="cursor-pointer text-xs">
-                헤더 표시
-              </Label>
-            </div>
-
-            {/* 제목 */}
-            {selectedComponent.componentConfig?.showHeader !== false && (
-              <div className="space-y-2">
-                <Label className="text-xs">제목</Label>
-                <Input
-                  value={selectedComponent.componentConfig?.title || ""}
-                  onChange={(e) => {
-                    handleUpdateProperty(selectedComponent.id, "componentConfig.title", e.target.value);
-                  }}
-                  placeholder="섹션 제목 입력"
-                  className="h-9 text-xs"
-                />
-              </div>
-            )}
-
-            {/* 설명 */}
-            {selectedComponent.componentConfig?.showHeader !== false && (
-              <div className="space-y-2">
-                <Label className="text-xs">설명 (선택)</Label>
-                <Textarea
-                  value={selectedComponent.componentConfig?.description || ""}
-                  onChange={(e) => {
-                    handleUpdateProperty(selectedComponent.id, "componentConfig.description", e.target.value);
-                  }}
-                  placeholder="섹션 설명 입력"
-                  className="resize-none text-xs"
-                  rows={2}
-                />
-              </div>
-            )}
-
-            {/* 패딩 */}
-            <div className="space-y-2">
-              <Label className="text-xs">내부 여백</Label>
-              <Select
-                value={selectedComponent.componentConfig?.padding || "md"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.padding", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">없음</SelectItem>
-                  <SelectItem value="sm">작게 (12px)</SelectItem>
-                  <SelectItem value="md">중간 (24px)</SelectItem>
-                  <SelectItem value="lg">크게 (32px)</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 배경색 */}
-            <div className="space-y-2">
-              <Label className="text-xs">배경색</Label>
-              <Select
-                value={selectedComponent.componentConfig?.backgroundColor || "default"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.backgroundColor", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="default">기본 (카드)</SelectItem>
-                  <SelectItem value="muted">회색</SelectItem>
-                  <SelectItem value="transparent">투명</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 테두리 스타일 */}
-            <div className="space-y-2">
-              <Label className="text-xs">테두리 스타일</Label>
-              <Select
-                value={selectedComponent.componentConfig?.borderStyle || "solid"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.borderStyle", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="solid">실선</SelectItem>
-                  <SelectItem value="dashed">점선</SelectItem>
-                  <SelectItem value="none">없음</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 접기/펼치기 기능 */}
-            <div className="space-y-2 border-t pt-2">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="collapsible"
-                  checked={selectedComponent.componentConfig?.collapsible || false}
-                  onCheckedChange={(checked) => {
-                    handleUpdateProperty(selectedComponent.id, "componentConfig.collapsible", checked);
-                  }}
-                />
-                <Label htmlFor="collapsible" className="cursor-pointer text-xs">
-                  접기/펼치기 가능
-                </Label>
-              </div>
-
-              {selectedComponent.componentConfig?.collapsible && (
-                <div className="ml-6 flex items-center space-x-2">
-                  <Checkbox
-                    id="defaultOpen"
-                    checked={selectedComponent.componentConfig?.defaultOpen !== false}
-                    onCheckedChange={(checked) => {
-                      handleUpdateProperty(selectedComponent.id, "componentConfig.defaultOpen", checked);
-                    }}
-                  />
-                  <Label htmlFor="defaultOpen" className="cursor-pointer text-xs">
-                    기본으로 펼치기
-                  </Label>
-                </div>
-              )}
-            </div>
-          </div>
-        );
-
-      case "section-paper":
-        return (
-          <div className="space-y-4 p-4">
-            <div className="space-y-2">
-              <h3 className="text-sm font-semibold">Section Paper 설정</h3>
-              <p className="text-muted-foreground text-xs">배경색 기반의 미니멀한 그룹화 컨테이너</p>
-            </div>
-
-            {/* 배경색 */}
-            <div className="space-y-2">
-              <Label className="text-xs">배경색</Label>
-              <Select
-                value={selectedComponent.componentConfig?.backgroundColor || "default"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.backgroundColor", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="default">기본 (연한 회색)</SelectItem>
-                  <SelectItem value="muted">회색</SelectItem>
-                  <SelectItem value="accent">강조 (연한 파랑)</SelectItem>
-                  <SelectItem value="primary">브랜드 컬러</SelectItem>
-                  <SelectItem value="custom">커스텀</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 커스텀 색상 */}
-            {selectedComponent.componentConfig?.backgroundColor === "custom" && (
-              <div className="space-y-2">
-                <Label className="text-xs">커스텀 색상</Label>
-                <ColorPickerWithTransparent
-                  value={selectedComponent.componentConfig?.customColor}
-                  onChange={(value) => {
-                    handleUpdateProperty(selectedComponent.id, "componentConfig.customColor", value);
-                  }}
-                  defaultColor="#f0f0f0"
-                  placeholder="#f0f0f0"
-                />
-              </div>
-            )}
-
-            {/* 패딩 */}
-            <div className="space-y-2">
-              <Label className="text-xs">내부 여백</Label>
-              <Select
-                value={selectedComponent.componentConfig?.padding || "md"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.padding", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">없음</SelectItem>
-                  <SelectItem value="sm">작게 (12px)</SelectItem>
-                  <SelectItem value="md">중간 (16px)</SelectItem>
-                  <SelectItem value="lg">크게 (24px)</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 둥근 모서리 */}
-            <div className="space-y-2">
-              <Label className="text-xs">둥근 모서리</Label>
-              <Select
-                value={selectedComponent.componentConfig?.roundedCorners || "md"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.roundedCorners", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">없음</SelectItem>
-                  <SelectItem value="sm">작게 (2px)</SelectItem>
-                  <SelectItem value="md">중간 (6px)</SelectItem>
-                  <SelectItem value="lg">크게 (8px)</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 그림자 */}
-            <div className="space-y-2">
-              <Label className="text-xs">그림자</Label>
-              <Select
-                value={selectedComponent.componentConfig?.shadow || "none"}
-                onValueChange={(value) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.shadow", value);
-                }}
-              >
-                <SelectTrigger className="h-9 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="none">없음</SelectItem>
-                  <SelectItem value="sm">작게</SelectItem>
-                  <SelectItem value="md">중간</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            {/* 테두리 표시 */}
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="showBorder"
-                checked={selectedComponent.componentConfig?.showBorder || false}
-                onCheckedChange={(checked) => {
-                  handleUpdateProperty(selectedComponent.id, "componentConfig.showBorder", checked);
-                }}
-              />
-              <Label htmlFor="showBorder" className="cursor-pointer text-xs">
-                미묘한 테두리 표시
-              </Label>
-            </div>
-          </div>
-        );
-
-      default:
-        // ConfigPanel이 없는 경우 경고 표시
-        return (
-          <div className="flex h-full flex-col items-center justify-center p-6 text-center">
-            <Settings className="text-muted-foreground mb-4 h-12 w-12" />
-            <h3 className="mb-2 text-base font-medium">⚠️ 설정 패널 없음</h3>
-            <p className="text-muted-foreground text-sm">
-              컴포넌트 "{componentId || componentType}"에 대한 설정 패널이 없습니다.
-            </p>
-          </div>
-        );
+      return (
+        <DynamicComponentConfigPanel
+          componentId={fallbackId}
+          componentType={componentType}
+          config={selectedComponent.componentConfig || {}}
+          onChange={handleDynamicConfigChange}
+          screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
+          tableColumns={currentTable?.columns || []}
+          tables={tables}
+          menuObjid={menuObjid}
+          allComponents={allComponents}
+          currentComponent={selectedComponent}
+        />
+      );
     }
+
+    return (
+      <div className="flex h-full flex-col items-center justify-center p-6 text-center">
+        <Settings className="text-muted-foreground mb-4 h-12 w-12" />
+        <h3 className="mb-2 text-base font-medium">설정 패널 없음</h3>
+        <p className="text-muted-foreground text-sm">
+          컴포넌트 &quot;{fallbackId || componentType}&quot;에 대한 설정 패널이 없습니다.
+        </p>
+      </div>
+    );
   };
 
   // 기본 정보 탭
@@ -708,147 +390,221 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
     const isInputField = inputFieldTypes.includes(componentType);
 
     return (
-      <div className="space-y-2">
-        {/* 너비 + 높이 (같은 행) */}
-        <div className="grid grid-cols-2 gap-2">
-          <div className="space-y-1">
-            <Label className="text-xs">너비 (px)</Label>
-            <Input
-              type="number"
-              min={10}
-              max={3840}
-              step="1"
-              value={localWidth}
-              onChange={(e) => {
-                setLocalWidth(e.target.value);
-              }}
-              onBlur={(e) => {
-                const value = parseInt(e.target.value) || 0;
-                if (value >= 10) {
-                  const snappedValue = Math.round(value / 10) * 10;
-                  handleUpdate("size.width", snappedValue);
-                  setLocalWidth(String(snappedValue));
-                }
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  const value = parseInt(e.currentTarget.value) || 0;
+      <div className="space-y-1">
+        {/* DIMENSIONS 섹션 */}
+        <div className="border-border/50 mb-3 border-b pb-3">
+          <h4 className="text-muted-foreground py-2 text-[10px] font-semibold tracking-wider uppercase">DIMENSIONS</h4>
+          <div className="flex gap-2">
+            <div className="flex-1">
+              <Label className="text-muted-foreground text-[10px]">너비</Label>
+              <Input
+                type="number"
+                min={10}
+                max={3840}
+                step="1"
+                value={localWidth}
+                onChange={(e) => {
+                  setLocalWidth(e.target.value);
+                }}
+                onBlur={(e) => {
+                  const value = parseInt(e.target.value) || 0;
                   if (value >= 10) {
                     const snappedValue = Math.round(value / 10) * 10;
                     handleUpdate("size.width", snappedValue);
                     setLocalWidth(String(snappedValue));
                   }
-                  e.currentTarget.blur();
-                }
-              }}
-              placeholder="100"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-xs">높이</Label>
-            <Input
-              type="number"
-              value={localHeight}
-              onChange={(e) => {
-                setLocalHeight(e.target.value);
-              }}
-              onBlur={(e) => {
-                const value = parseInt(e.target.value) || 0;
-                if (value >= 10) {
-                  const snappedValue = Math.round(value / 10) * 10;
-                  handleUpdate("size.height", snappedValue);
-                  setLocalHeight(String(snappedValue));
-                }
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  const value = parseInt(e.currentTarget.value) || 0;
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    const value = parseInt(e.currentTarget.value) || 0;
+                    if (value >= 10) {
+                      const snappedValue = Math.round(value / 10) * 10;
+                      handleUpdate("size.width", snappedValue);
+                      setLocalWidth(String(snappedValue));
+                    }
+                    e.currentTarget.blur();
+                  }
+                }}
+                placeholder="100"
+                className="h-7 w-full text-xs"
+              />
+            </div>
+            <div className="flex-1">
+              <Label className="text-muted-foreground text-[10px]">높이</Label>
+              <Input
+                type="number"
+                value={localHeight}
+                onChange={(e) => {
+                  setLocalHeight(e.target.value);
+                }}
+                onBlur={(e) => {
+                  const value = parseInt(e.target.value) || 0;
                   if (value >= 10) {
                     const snappedValue = Math.round(value / 10) * 10;
                     handleUpdate("size.height", snappedValue);
                     setLocalHeight(String(snappedValue));
                   }
-                  e.currentTarget.blur();
-                }
-              }}
-              step={1}
-              placeholder="10"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    const value = parseInt(e.currentTarget.value) || 0;
+                    if (value >= 10) {
+                      const snappedValue = Math.round(value / 10) * 10;
+                      handleUpdate("size.height", snappedValue);
+                      setLocalHeight(String(snappedValue));
+                    }
+                    e.currentTarget.blur();
+                  }
+                }}
+                step={1}
+                placeholder="10"
+                className="h-7 w-full text-xs"
+              />
+            </div>
+            <div className="flex-1">
+              <Label className="text-muted-foreground text-[10px]">Z-Index</Label>
+              <Input
+                type="number"
+                step="1"
+                value={currentPosition.z || 1}
+                onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
+                className="h-7 w-full text-xs"
+              />
+            </div>
           </div>
         </div>
 
         {/* Title (group/area) */}
         {(selectedComponent.type === "group" || selectedComponent.type === "area") && (
-          <div className="space-y-1">
-            <Label className="text-xs">제목</Label>
-            <Input
-              value={group.title || area.title || ""}
-              onChange={(e) => handleUpdate("title", e.target.value)}
-              placeholder="제목"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-          </div>
-        )}
-
-        {/* Description (area만) */}
-        {selectedComponent.type === "area" && (
-          <div className="space-y-1">
-            <Label className="text-xs">설명</Label>
-            <Input
-              value={area.description || ""}
-              onChange={(e) => handleUpdate("description", e.target.value)}
-              placeholder="설명"
-              className="h-6 w-full px-2 py-0 text-xs"
-            />
-          </div>
-        )}
-
-        {/* Z-Index */}
-        <div className="space-y-1">
-          <Label className="text-xs">Z-Index</Label>
-          <Input
-            type="number"
-            step="1"
-            value={currentPosition.z || 1}
-            onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
-            className="h-6 w-full px-2 py-0 text-xs"
-          />
-        </div>
-
-        {/* 라벨 스타일 - 입력 필드에서만 표시 */}
-        {isInputField && (
-          <Collapsible>
-            <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-slate-50 p-2 text-xs font-medium hover:bg-slate-100">
-              라벨 스타일
-              <ChevronDown className="h-3.5 w-3.5" />
-            </CollapsibleTrigger>
-            <CollapsibleContent className="mt-2 space-y-2">
-              <div className="space-y-1">
-                <Label className="text-xs">라벨 텍스트</Label>
+          <div className="border-border/50 mb-3 border-b pb-3">
+            <h4 className="text-muted-foreground py-2 text-[10px] font-semibold tracking-wider uppercase">CONTENT</h4>
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-muted-foreground text-xs">제목</span>
+              <div className="w-[160px]">
                 <Input
-                  value={
-                    selectedComponent.style?.labelText !== undefined
-                      ? selectedComponent.style.labelText
-                      : selectedComponent.label || selectedComponent.componentConfig?.label || ""
-                  }
-                  onChange={(e) => {
-                    handleUpdate("style.labelText", e.target.value);
-                    handleUpdate("label", e.target.value); // label도 함께 업데이트
-                  }}
-                  placeholder="라벨을 입력하세요 (비우면 라벨 없음)"
-                  className="h-6 w-full px-2 py-0 text-xs"
+                  value={group.title || area.title || ""}
+                  onChange={(e) => handleUpdate("title", e.target.value)}
+                  placeholder="제목"
+                  className="h-7 text-xs"
                 />
               </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs">위치</Label>
+            </div>
+            {selectedComponent.type === "area" && (
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-muted-foreground text-xs">설명</span>
+                <div className="w-[160px]">
+                  <Input
+                    value={area.description || ""}
+                    onChange={(e) => handleUpdate("description", e.target.value)}
+                    placeholder="설명"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* OPTIONS 섹션 */}
+        <div className="border-border/50 mb-3 border-b pb-3">
+          <h4 className="text-muted-foreground py-2 text-[10px] font-semibold tracking-wider uppercase">OPTIONS</h4>
+          {(isInputField || widget.required !== undefined) &&
+            (() => {
+              const colName = widget.columnName || selectedComponent?.columnName;
+              const colMeta = colName
+                ? currentTable?.columns?.find(
+                    (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase(),
+                  )
+                : null;
+              const isNotNull =
+                colMeta &&
+                ((colMeta as any).isNullable === "NO" ||
+                  (colMeta as any).isNullable === "N" ||
+                  (colMeta as any).is_nullable === "NO" ||
+                  (colMeta as any).is_nullable === "N");
+              return (
+                <div className="flex items-center justify-between py-1.5">
+                  <span className="text-muted-foreground text-xs">
+                    필수
+                    {isNotNull && <span className="text-muted-foreground/60 ml-1">(NOT NULL)</span>}
+                  </span>
+                  <Checkbox
+                    checked={
+                      isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true
+                    }
+                    onCheckedChange={(checked) => {
+                      if (isNotNull) return;
+                      handleUpdate("required", checked);
+                      handleUpdate("componentConfig.required", checked);
+                    }}
+                    disabled={!!isNotNull}
+                    className="h-4 w-4"
+                  />
+                </div>
+              );
+            })()}
+          {(isInputField || widget.readonly !== undefined) && (
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-muted-foreground text-xs">읽기전용</span>
+              <Checkbox
+                checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
+                onCheckedChange={(checked) => {
+                  handleUpdate("readonly", checked);
+                  handleUpdate("componentConfig.readonly", checked);
+                }}
+                className="h-4 w-4"
+              />
+            </div>
+          )}
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-muted-foreground text-xs">숨김</span>
+            <Checkbox
+              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
+              onCheckedChange={(checked) => {
+                handleUpdate("hidden", checked);
+                handleUpdate("componentConfig.hidden", checked);
+              }}
+              className="h-4 w-4"
+            />
+          </div>
+        </div>
+
+        {/* LABEL 섹션 - 입력 필드에서만 표시 */}
+        {isInputField && (
+          <Collapsible>
+            <CollapsibleTrigger className="flex w-full items-center justify-between py-0.5 text-left">
+              <span className="text-muted-foreground text-[10px] font-semibold tracking-wider uppercase">LABEL</span>
+              <ChevronDown className="text-muted-foreground/50 h-3 w-3 shrink-0" />
+            </CollapsibleTrigger>
+            <CollapsibleContent className="mt-1.5 space-y-1">
+              {/* 라벨 텍스트 */}
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-muted-foreground text-xs">텍스트</span>
+                <div className="w-[160px]">
+                  <Input
+                    value={
+                      selectedComponent.style?.labelText !== undefined
+                        ? selectedComponent.style.labelText
+                        : selectedComponent.label || selectedComponent.componentConfig?.label || ""
+                    }
+                    onChange={(e) => {
+                      handleUpdate("style.labelText", e.target.value);
+                      handleUpdate("label", e.target.value);
+                    }}
+                    placeholder="라벨"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+              {/* 위치 + 간격 */}
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <Label className="text-muted-foreground text-[10px]">위치</Label>
                   <Select
                     value={selectedComponent.style?.labelPosition || "top"}
                     onValueChange={(value) => handleUpdate("style.labelPosition", value)}
                   >
-                    <SelectTrigger className="h-6 text-xs">
+                    <SelectTrigger className="h-7 text-xs">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -859,13 +615,14 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="space-y-1">
-                  <Label className="text-xs">간격</Label>
+                <div className="flex-1">
+                  <Label className="text-muted-foreground text-[10px]">간격</Label>
                   <Input
                     value={
-                      (selectedComponent.style?.labelPosition === "left" || selectedComponent.style?.labelPosition === "right")
-                        ? (selectedComponent.style?.labelGap || "8px")
-                        : (selectedComponent.style?.labelMarginBottom || "4px")
+                      selectedComponent.style?.labelPosition === "left" ||
+                      selectedComponent.style?.labelPosition === "right"
+                        ? selectedComponent.style?.labelGap || "8px"
+                        : selectedComponent.style?.labelMarginBottom || "4px"
                     }
                     onChange={(e) => {
                       const pos = selectedComponent.style?.labelPosition;
@@ -875,21 +632,22 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                         handleUpdate("style.labelMarginBottom", e.target.value);
                       }
                     }}
-                    className="h-6 w-full px-2 py-0 text-xs"
+                    className="h-7 text-xs"
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs">크기</Label>
+              {/* 크기 + 색상 */}
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <Label className="text-muted-foreground text-[10px]">크기</Label>
                   <Input
                     value={selectedComponent.style?.labelFontSize || "12px"}
                     onChange={(e) => handleUpdate("style.labelFontSize", e.target.value)}
-                    className="h-6 w-full px-2 py-0 text-xs"
+                    className="h-7 text-xs"
                   />
                 </div>
-                <div className="space-y-1">
-                  <Label className="text-xs">색상</Label>
+                <div className="flex-1">
+                  <Label className="text-muted-foreground text-[10px]">색상</Label>
                   <ColorPickerWithTransparent
                     value={selectedComponent.style?.labelColor}
                     onChange={(value) => handleUpdate("style.labelColor", value)}
@@ -898,14 +656,15 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                   />
                 </div>
               </div>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-1">
-                  <Label className="text-xs">굵기</Label>
+              {/* 굵기 */}
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-muted-foreground text-xs">굵기</span>
+                <div className="w-[160px]">
                   <Select
                     value={selectedComponent.style?.labelFontWeight || "500"}
                     onValueChange={(value) => handleUpdate("style.labelFontWeight", value)}
                   >
-                    <SelectTrigger className="h-6 text-xs">
+                    <SelectTrigger className="h-7 text-xs">
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
@@ -916,84 +675,29 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="flex items-center space-x-2 pt-5">
-                  <Checkbox
-                    checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
-                    onCheckedChange={(checked) => {
-                      const boolValue = checked === true;
-                      // 🔧 "필수"처럼 직접 경로로 업데이트! (style 객체 전체 덮어쓰기 방지)
-                      handleUpdate("style.labelDisplay", boolValue);
-                      handleUpdate("labelDisplay", boolValue);
-                      // labelText도 설정 (처음 켤 때 라벨 텍스트가 없을 수 있음)
-                      if (boolValue && !selectedComponent.style?.labelText) {
-                        const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
-                        if (labelValue) {
-                          handleUpdate("style.labelText", labelValue);
-                        }
+              </div>
+              {/* 표시 */}
+              <div className="flex items-center justify-between py-1.5">
+                <span className="text-muted-foreground text-xs">표시</span>
+                <Checkbox
+                  checked={selectedComponent.style?.labelDisplay === true || selectedComponent.labelDisplay === true}
+                  onCheckedChange={(checked) => {
+                    const boolValue = checked === true;
+                    handleUpdate("style.labelDisplay", boolValue);
+                    handleUpdate("labelDisplay", boolValue);
+                    if (boolValue && !selectedComponent.style?.labelText) {
+                      const labelValue = selectedComponent.label || selectedComponent.componentConfig?.label || "";
+                      if (labelValue) {
+                        handleUpdate("style.labelText", labelValue);
                       }
-                    }}
-                    className="h-4 w-4"
-                  />
-                  <Label className="text-xs">표시</Label>
-                </div>
+                    }
+                  }}
+                  className="h-4 w-4"
+                />
               </div>
             </CollapsibleContent>
           </Collapsible>
         )}
-
-        {/* 옵션 - 입력 필드에서는 항상 표시, 기타 컴포넌트는 속성이 정의된 경우만 표시 */}
-        <div className="grid grid-cols-2 gap-2">
-          {(isInputField || widget.required !== undefined) && (() => {
-            const colName = widget.columnName || selectedComponent?.columnName;
-            const colMeta = colName ? currentTable?.columns?.find(
-              (c: any) => (c.columnName || c.column_name || "").toLowerCase() === colName.toLowerCase()
-            ) : null;
-            const isNotNull = colMeta && ((colMeta as any).isNullable === "NO" || (colMeta as any).isNullable === "N" || (colMeta as any).is_nullable === "NO" || (colMeta as any).is_nullable === "N");
-            return (
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  checked={isNotNull || widget.required === true || selectedComponent.componentConfig?.required === true}
-                  onCheckedChange={(checked) => {
-                    if (isNotNull) return;
-                    handleUpdate("required", checked);
-                    handleUpdate("componentConfig.required", checked);
-                  }}
-                  disabled={!!isNotNull}
-                  className="h-4 w-4"
-                />
-                <Label className="text-xs">
-                  필수
-                  {isNotNull && <span className="text-muted-foreground ml-1">(NOT NULL)</span>}
-                </Label>
-              </div>
-            );
-          })()}
-          {(isInputField || widget.readonly !== undefined) && (
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
-                onCheckedChange={(checked) => {
-                  handleUpdate("readonly", checked);
-                  handleUpdate("componentConfig.readonly", checked);
-                }}
-                className="h-4 w-4"
-              />
-              <Label className="text-xs">읽기전용</Label>
-            </div>
-          )}
-          {/* 숨김 옵션 - 모든 컴포넌트에서 표시 */}
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              checked={selectedComponent.hidden === true || selectedComponent.componentConfig?.hidden === true}
-              onCheckedChange={(checked) => {
-                handleUpdate("hidden", checked);
-                handleUpdate("componentConfig.hidden", checked);
-              }}
-              className="h-4 w-4"
-            />
-            <Label className="text-xs">숨김</Label>
-          </div>
-        </div>
       </div>
     );
   };
@@ -1139,15 +843,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
             allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
             currentComponent={selectedComponent} // 🆕 현재 컴포넌트 정보
             onChange={(newConfig) => {
-              console.log("🔧 [V2PropertiesPanel] DynamicConfigPanel onChange:", {
-                componentId: selectedComponent.id,
-                newConfigKeys: Object.keys(newConfig),
-                defaultSort: newConfig.defaultSort,
-                newConfig,
-              });
-              // 개별 속성별로 업데이트하여 다른 속성과의 충돌 방지
               Object.entries(newConfig).forEach(([key, value]) => {
-                console.log(`   -> handleUpdate: componentConfig.${key} =`, value);
                 handleUpdate(`componentConfig.${key}`, value);
               });
             }}
@@ -1288,9 +984,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
 
     // 6. Widget 컴포넌트
     if (selectedComponent.type === "widget") {
-      console.log("✅ [renderDetailTab] Widget 타입");
       const widget = selectedComponent as WidgetComponent;
-      console.log("🔍 [renderDetailTab] widget.widgetType:", widget.widgetType);
 
       // 새로운 컴포넌트 시스템 (widgetType이 button, card 등) - 먼저 체크
       if (
@@ -1299,7 +993,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           widget.widgetType,
         )
       ) {
-        console.log("✅ [renderDetailTab] DynamicComponent 반환 (widgetType)");
         return (
           <DynamicComponentConfigPanel
             componentId={widget.widgetType}
@@ -1311,8 +1004,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
             allComponents={allComponents} // 🆕 연쇄 드롭다운 부모 감지용
             currentComponent={selectedComponent} // 🆕 현재 컴포넌트 정보
             onChange={(newConfig) => {
-              console.log("🔄 DynamicComponentConfigPanel onChange (widget):", newConfig);
-              // 전체 componentConfig를 업데이트
               handleUpdate("componentConfig", newConfig);
             }}
           />
@@ -1320,10 +1011,8 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
       }
 
       // 일반 위젯 (webType 기반)
-      console.log("✅ [renderDetailTab] 일반 위젯 렌더링 시작");
       return (
         <div className="space-y-4">
-          {console.log("🔍 [V2PropertiesPanel] widget.webType:", widget.webType, "widget:", widget)}
           {/* WebType 선택 (있는 경우만) */}
           {widget.webType && (
             <div>
@@ -1345,7 +1034,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
 
           {/* 🆕 테이블 데이터 자동 입력 (모든 widget 컴포넌트) */}
           <Separator />
-          <div className="space-y-3 border-4 border-destructive bg-amber-100 p-4">
+          <div className="border-destructive space-y-3 border-4 bg-amber-100 p-4">
             <div className="flex items-center gap-2">
               <Database className="text-primary h-4 w-4" />
               <h4 className="text-xs font-semibold">테이블 데이터 자동 입력</h4>
@@ -1514,7 +1203,7 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
                   <Zap className="text-primary h-3 w-3" />
                   <h4 className="text-xs font-semibold">조건부 표시</h4>
                 </div>
-                <div className="rounded-md border border-border p-2">
+                <div className="border-border rounded-md border p-2">
                   <ConditionalConfigPanel
                     config={
                       (selectedComponent as any).conditional || {
diff --git a/frontend/components/screen/table-options/FilterPanel.tsx b/frontend/components/screen/table-options/FilterPanel.tsx
index 1b6104b6..02be2e9f 100644
--- a/frontend/components/screen/table-options/FilterPanel.tsx
+++ b/frontend/components/screen/table-options/FilterPanel.tsx
@@ -194,7 +194,7 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
         operator: "contains", // 기본 연산자
         value: "",
         filterType: cf.filterType,
-        width: cf.width || 200, // 너비 포함 (기본 200px)
+        width: cf.width && cf.width >= 10 && cf.width <= 100 ? cf.width : 25,
       }));
 
     // localStorage에 저장 (화면별로 독립적)
@@ -334,20 +334,20 @@ export const FilterPanel: React.FC<Props> = ({ isOpen, onClose, onFiltersApplied
                   {/* 너비 입력 */}
                   <Input
                     type="number"
-                    value={filter.width || 200}
+                    value={filter.width && filter.width >= 10 && filter.width <= 100 ? filter.width : 25}
                     onChange={(e) => {
-                      const newWidth = parseInt(e.target.value) || 200;
+                      const newWidth = Math.min(100, Math.max(10, parseInt(e.target.value) || 25));
                       setColumnFilters((prev) =>
                         prev.map((f) => (f.columnName === filter.columnName ? { ...f, width: newWidth } : f)),
                       );
                     }}
                     disabled={!filter.enabled}
-                    placeholder="너비"
+                    placeholder="25"
                     className="h-8 w-[80px] text-xs sm:h-9 sm:text-sm"
-                    min={50}
-                    max={500}
+                    min={10}
+                    max={100}
                   />
-                  <span className="text-muted-foreground text-xs">px</span>
+                  <span className="text-muted-foreground text-xs">%</span>
                 </div>
               ))}
             </div>
diff --git a/frontend/components/screen/table-options/TableSettingsModal.tsx b/frontend/components/screen/table-options/TableSettingsModal.tsx
index 3d37c153..215ff2ef 100644
--- a/frontend/components/screen/table-options/TableSettingsModal.tsx
+++ b/frontend/components/screen/table-options/TableSettingsModal.tsx
@@ -136,7 +136,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
           inputType,
           enabled: false,
           filterType,
-          width: 200,
+          width: 25,
         };
       });
 
@@ -271,7 +271,7 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
         operator: "contains",
         value: "",
         filterType: f.filterType,
-        width: f.width || 200,
+        width: f.width && f.width >= 10 && f.width <= 100 ? f.width : 25,
       }));
     onFiltersApplied?.(activeFilters);
 
@@ -498,15 +498,15 @@ export const TableSettingsModal: React.FC<Props> = ({ isOpen, onClose, onFilters
                       </Select>
                       <Input
                         type="number"
-                        min={100}
-                        max={400}
-                        value={filter.width || 200}
+                        min={10}
+                        max={100}
+                        value={filter.width && filter.width >= 10 && filter.width <= 100 ? filter.width : 25}
                         onChange={(e) =>
-                          handleFilterWidthChange(filter.columnName, parseInt(e.target.value) || 200)
+                          handleFilterWidthChange(filter.columnName, Math.min(100, Math.max(10, parseInt(e.target.value) || 25)))
                         }
                         className="h-7 w-16 text-center text-xs"
                       />
-                      <span className="text-muted-foreground text-xs">px</span>
+                      <span className="text-muted-foreground text-xs">%</span>
                     </div>
                   ))}
                 </div>
diff --git a/frontend/components/screen/widgets/TabsWidget.tsx b/frontend/components/screen/widgets/TabsWidget.tsx
index 83c55777..688a6ca7 100644
--- a/frontend/components/screen/widgets/TabsWidget.tsx
+++ b/frontend/components/screen/widgets/TabsWidget.tsx
@@ -430,28 +430,28 @@ export function TabsWidget({
 
     return (
       <ResponsiveGridRenderer
-        components={componentDataList}
-        canvasWidth={canvasWidth}
-        canvasHeight={canvasHeight}
-        renderComponent={(comp) => (
-          <DynamicComponentRenderer
-            {...restProps}
-            component={comp}
-            formData={formData}
-            onFormDataChange={onFormDataChange}
-            menuObjid={menuObjid}
-            isDesignMode={false}
-            isInteractive={true}
-            selectedRowsData={localSelectedRowsData}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            parentTabId={tab.id}
-            parentTabsComponentId={component.id}
-            {...(screenInfoMap[tab.id]
-              ? { tableName: screenInfoMap[tab.id].tableName, screenId: screenInfoMap[tab.id].id }
-              : {})}
-          />
-        )}
-      />
+          components={componentDataList}
+          canvasWidth={canvasWidth}
+          canvasHeight={canvasHeight}
+          renderComponent={(comp) => (
+            <DynamicComponentRenderer
+              {...restProps}
+              component={comp}
+              formData={formData}
+              onFormDataChange={onFormDataChange}
+              menuObjid={menuObjid}
+              isDesignMode={false}
+              isInteractive={true}
+              selectedRowsData={localSelectedRowsData}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              parentTabId={tab.id}
+              parentTabsComponentId={component.id}
+              {...(screenInfoMap[tab.id]
+                ? { tableName: screenInfoMap[tab.id].tableName, screenId: screenInfoMap[tab.id].id }
+                : {})}
+            />
+          )}
+        />
     );
   };
 
diff --git a/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx b/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx
new file mode 100644
index 00000000..6e30e17b
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx
@@ -0,0 +1,1199 @@
+"use client";
+
+/**
+ * V2AggregationWidget 설정 패널
+ * 토스식 단계별 UX: 데이터 소스(카드) -> 테이블/컴포넌트 선택 -> 집계 항목 -> 필터(접힘) -> 레이아웃(접힘) -> 스타일(접힘)
+ * 기존 AggregationWidgetConfigPanel의 모든 기능을 자체 UI로 완전 구현
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import {
+  Database,
+  Link2,
+  MousePointer,
+  Table2,
+  Check,
+  ChevronsUpDown,
+  Plus,
+  Trash2,
+  Calculator,
+  Filter,
+  LayoutGrid,
+  Paintbrush,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { tableTypeApi } from "@/lib/api/screen";
+import { getCategoryValues } from "@/lib/api/tableCategoryValue";
+import type {
+  AggregationWidgetConfig,
+  AggregationItem,
+  AggregationType,
+  DataSourceType,
+  FilterCondition,
+  FilterOperator,
+  FilterValueSourceType,
+} from "@/lib/registry/components/v2-aggregation-widget/types";
+
+// ─── 상수 ───
+
+const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  eq: "같음 (=)",
+  neq: "같지 않음 (!=)",
+  gt: "보다 큼 (>)",
+  gte: "크거나 같음 (>=)",
+  lt: "보다 작음 (<)",
+  lte: "작거나 같음 (<=)",
+  like: "포함",
+  in: "목록에 포함",
+  isNull: "NULL",
+  isNotNull: "NOT NULL",
+};
+
+const VALUE_SOURCE_LABELS: Record<FilterValueSourceType, string> = {
+  static: "고정 값",
+  formField: "폼 필드",
+  selection: "선택된 행",
+  urlParam: "URL 파라미터",
+};
+
+const SOURCE_CARDS = [
+  { value: "table" as DataSourceType, icon: Database, title: "테이블", description: "DB에서 직접 조회" },
+  { value: "component" as DataSourceType, icon: Link2, title: "컴포넌트", description: "다른 컴포넌트 연결" },
+  { value: "selection" as DataSourceType, icon: MousePointer, title: "선택 데이터", description: "사용자 선택 행" },
+] as const;
+
+const AGGREGATION_TYPE_OPTIONS = [
+  { value: "sum", label: "합계 (SUM)" },
+  { value: "avg", label: "평균 (AVG)" },
+  { value: "count", label: "개수 (COUNT)" },
+  { value: "max", label: "최대 (MAX)" },
+  { value: "min", label: "최소 (MIN)" },
+] as const;
+
+const FORMAT_OPTIONS = [
+  { value: "number", label: "숫자" },
+  { value: "currency", label: "통화" },
+  { value: "percent", label: "퍼센트" },
+] as const;
+
+// ─── 공통 서브 컴포넌트 ───
+
+function SectionHeader({ icon: Icon, title, description }: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && <p className="text-muted-foreground text-[10px]">{description}</p>}
+    </div>
+  );
+}
+
+function SwitchRow({ label, description, checked, onCheckedChange }: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-sm">{label}</p>
+        {description && <p className="text-[11px] text-muted-foreground">{description}</p>}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+function LabeledRow({ label, children }: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <p className="text-xs text-muted-foreground">{label}</p>
+      {children}
+    </div>
+  );
+}
+
+// ─── 카테고리 값 콤보박스 ───
+
+function CategoryValueCombobox({
+  value,
+  options,
+  onChange,
+  placeholder = "값 선택",
+}: {
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs font-normal">
+          <span className="truncate">{selectedOption ? selectedOption.label : placeholder}</span>
+          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="검색..." className="h-8 text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-2 text-center text-xs">결과 없음</CommandEmpty>
+            <CommandGroup>
+              {options.map((opt, index) => (
+                <CommandItem
+                  key={`${opt.value}-${index}`}
+                  value={`${opt.label} ${opt.value}`}
+                  onSelect={() => { onChange(opt.value); setOpen(false); }}
+                  className="cursor-pointer text-xs"
+                >
+                  <Check className={cn("mr-2 h-3 w-3", value === opt.value ? "opacity-100" : "opacity-0")} />
+                  {opt.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── 메인 컴포넌트 ───
+
+interface ColumnInfo {
+  columnName: string;
+  label?: string;
+  dataType?: string;
+  inputType?: string;
+  webType?: string;
+  categoryCode?: string;
+}
+
+interface V2AggregationWidgetConfigPanelProps {
+  config: AggregationWidgetConfig;
+  onChange: (config: Partial<AggregationWidgetConfig>) => void;
+  screenTableName?: string;
+  screenComponents?: Array<{
+    id: string;
+    componentType: string;
+    label?: string;
+    tableName?: string;
+    columnName?: string;
+  }>;
+}
+
+export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigPanelProps> = ({
+  config,
+  onChange,
+  screenTableName,
+  screenComponents = [],
+}) => {
+  // componentConfigChanged 이벤트 발행 래퍼
+  const handleChange = useCallback((newConfig: Partial<AggregationWidgetConfig>) => {
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, ...newConfig } },
+        })
+      );
+    }
+  }, [onChange, config]);
+
+  // ─── 상태 ───
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+  const [categoryOptionsCache, setCategoryOptionsCache] = useState<Record<string, Array<{ value: string; label: string }>>>({});
+  const [sourceComponentColumnsCache, setSourceComponentColumnsCache] = useState<Record<string, Array<{ columnName: string; label?: string }>>>({});
+
+  // Collapsible 상태
+  const [filterOpen, setFilterOpen] = useState(false);
+  const [layoutOpen, setLayoutOpen] = useState(false);
+  const [styleOpen, setStyleOpen] = useState(false);
+  const [itemsOpen, setItemsOpen] = useState(true);
+  const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
+
+  const dataSourceType = config.dataSourceType || "table";
+
+  // 실제 사용할 테이블 이름
+  const targetTableName = useMemo(() => {
+    if (config.useCustomTable && config.customTableName) return config.customTableName;
+    return config.tableName || screenTableName;
+  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
+
+  // 연결 가능한 컴포넌트 (리피터, 테이블리스트)
+  const selectableComponents = useMemo(() => {
+    return screenComponents.filter((comp) =>
+      comp.componentType === "table-list" ||
+      comp.componentType === "v2-table-list" ||
+      comp.componentType === "v2-repeater" ||
+      comp.componentType === "repeat-container" ||
+      comp.componentType === "v2-repeat-container"
+    );
+  }, [screenComponents]);
+
+  // 폼 필드 컴포넌트
+  const formFieldComponents = useMemo(() => {
+    const excludeTypes = [
+      "aggregation", "widget", "button", "label", "display", "table-list",
+      "repeat", "container", "layout", "section", "card", "tabs", "modal",
+      "flow", "rack", "map", "chart", "image", "file", "media",
+    ];
+    return screenComponents
+      .filter((comp) => {
+        const type = comp.componentType?.toLowerCase() || "";
+        if (excludeTypes.some((ex) => type.includes(ex))) return false;
+        const isInput = type.includes("input") || type.includes("select") || type.includes("date") ||
+          type.includes("checkbox") || type.includes("radio") || type.includes("textarea") ||
+          type.includes("number") || type === "v2-input" || type === "v2-select" ||
+          type === "v2-date" || type === "v2-hierarchy";
+        return isInput || !!comp.columnName;
+      })
+      .map((comp) => ({
+        id: comp.id,
+        label: comp.label || comp.columnName || comp.id,
+        columnName: comp.columnName || comp.id,
+        componentType: comp.componentType,
+      }));
+  }, [screenComponents]);
+
+  // 숫자형 컬럼만
+  const numericColumns = useMemo(() => {
+    return columns.filter((col) => {
+      const inputType = (col.inputType || col.webType || "").toLowerCase();
+      return inputType === "number" || inputType === "decimal" || inputType === "integer" ||
+        inputType === "float" || inputType === "currency" || inputType === "percent";
+    });
+  }, [columns]);
+
+  // ─── 테이블 목록 로드 ───
+  useEffect(() => {
+    const fetchTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableTypeApi.getTables();
+        setAvailableTables(
+          response.map((table: any) => ({
+            tableName: table.tableName,
+            displayName: table.displayName || table.tableName,
+          }))
+        );
+      } catch (err) {
+        console.error("테이블 목록 가져오기 실패:", err);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    fetchTables();
+  }, []);
+
+  // 화면 테이블명 자동 설정
+  useEffect(() => {
+    if (screenTableName && !config.tableName && !config.customTableName) {
+      handleChange({ tableName: screenTableName });
+    }
+  }, [screenTableName, config.tableName, config.customTableName, handleChange]);
+
+  // ─── 컬럼 로드 ───
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!targetTableName) { setColumns([]); return; }
+      setLoadingColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(targetTableName);
+        if (result.success && result.data?.columns) {
+          const mapped = result.data.columns.map((col: any) => ({
+            columnName: col.columnName || col.column_name,
+            label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
+            dataType: col.dataType || col.data_type,
+            inputType: col.inputType || col.input_type,
+            webType: col.webType || col.web_type,
+            categoryCode: col.categoryCode || col.category_code,
+          }));
+          setColumns(mapped);
+          const categoryCols = mapped.filter(
+            (c: ColumnInfo) => c.inputType === "category" || c.webType === "category"
+          );
+          if (categoryCols.length > 0) loadCategoryOptions(categoryCols);
+        } else {
+          setColumns([]);
+        }
+      } catch (err) {
+        console.error("컬럼 로드 실패:", err);
+        setColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetTableName]);
+
+  // 소스 컴포넌트 컬럼 로드
+  const loadSourceComponentColumns = useCallback(async (componentId: string) => {
+    if (sourceComponentColumnsCache[componentId]) return;
+    const sourceComp = screenComponents.find((c) => c.id === componentId);
+    if (!sourceComp?.tableName) return;
+    try {
+      const response = await tableManagementApi.getColumnList(sourceComp.tableName);
+      const rawCols = response.data?.columns || (Array.isArray(response.data) ? response.data : []);
+      const cols = rawCols.map((col: any) => ({
+        columnName: col.column_name || col.columnName,
+        label: col.column_label || col.columnLabel || col.display_name || col.column_name || col.columnName,
+      }));
+      setSourceComponentColumnsCache((prev) => ({ ...prev, [componentId]: cols }));
+    } catch (err) {
+      console.error("소스 컴포넌트 컬럼 로드 실패:", err);
+    }
+  }, [sourceComponentColumnsCache, screenComponents]);
+
+  // 기존 필터의 소스 컴포넌트 컬럼 미리 로드
+  useEffect(() => {
+    (config.filters || []).forEach((filter) => {
+      if (filter.valueSourceType === "selection" && filter.sourceComponentId) {
+        loadSourceComponentColumns(filter.sourceComponentId);
+      }
+    });
+  }, [config.filters, loadSourceComponentColumns]);
+
+  // 카테고리 옵션 로드
+  const loadCategoryOptions = useCallback(async (categoryCols: Array<{ columnName: string; categoryCode?: string }>) => {
+    if (!targetTableName) return;
+    const newCache: Record<string, Array<{ value: string; label: string }>> = { ...categoryOptionsCache };
+    for (const col of categoryCols) {
+      const cacheKey = `${targetTableName}_${col.columnName}`;
+      if (newCache[cacheKey]) continue;
+      try {
+        const result = await getCategoryValues(targetTableName, col.columnName, false);
+        if (result.success && "data" in result && Array.isArray(result.data)) {
+          const seenCodes = new Set<string>();
+          const uniqueOptions: Array<{ value: string; label: string }> = [];
+          for (const item of result.data) {
+            const itemAny = item as any;
+            const code = item.valueCode || itemAny.code || itemAny.value || itemAny.id;
+            if (!seenCodes.has(code)) {
+              seenCodes.add(code);
+              uniqueOptions.push({
+                value: code,
+                label: item.valueLabel || itemAny.valueName || itemAny.name || itemAny.label || itemAny.displayName || code,
+              });
+            }
+          }
+          newCache[cacheKey] = uniqueOptions;
+        } else {
+          newCache[cacheKey] = [];
+        }
+      } catch {
+        newCache[cacheKey] = [];
+      }
+    }
+    setCategoryOptionsCache(newCache);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetTableName]);
+
+  const getCategoryOptionsForColumn = useCallback((columnName: string) => {
+    if (!targetTableName) return [];
+    return categoryOptionsCache[`${targetTableName}_${columnName}`] || [];
+  }, [targetTableName, categoryOptionsCache]);
+
+  const isCategoryColumn = useCallback((columnName: string) => {
+    const col = columns.find((c) => c.columnName === columnName);
+    return col?.inputType === "category" || col?.webType === "category";
+  }, [columns]);
+
+  // ─── 집계 항목 CRUD ───
+  const addItem = useCallback(() => {
+    const newItem: AggregationItem = {
+      id: `agg-${Date.now()}`,
+      columnName: "",
+      columnLabel: "",
+      type: "sum",
+      format: "number",
+      decimalPlaces: 0,
+    };
+    handleChange({ items: [...(config.items || []), newItem] });
+  }, [config.items, handleChange]);
+
+  const removeItem = useCallback((id: string) => {
+    handleChange({ items: (config.items || []).filter((item) => item.id !== id) });
+  }, [config.items, handleChange]);
+
+  const updateItem = useCallback((id: string, updates: Partial<AggregationItem>) => {
+    handleChange({
+      items: (config.items || []).map((item) => (item.id === id ? { ...item, ...updates } : item)),
+    });
+  }, [config.items, handleChange]);
+
+  // ─── 필터 CRUD ───
+  const addFilter = useCallback(() => {
+    const newFilter: FilterCondition = {
+      id: `filter-${Date.now()}`,
+      columnName: "",
+      operator: "eq",
+      valueSourceType: "static",
+      staticValue: "",
+      enabled: true,
+    };
+    handleChange({ filters: [...(config.filters || []), newFilter] });
+  }, [config.filters, handleChange]);
+
+  const removeFilter = useCallback((id: string) => {
+    handleChange({ filters: (config.filters || []).filter((f) => f.id !== id) });
+  }, [config.filters, handleChange]);
+
+  const updateFilter = useCallback((id: string, updates: Partial<FilterCondition>) => {
+    handleChange({
+      filters: (config.filters || []).map((f) => (f.id === id ? { ...f, ...updates } : f)),
+    });
+  }, [config.filters, handleChange]);
+
+  // ─── 테이블 변경 핸들러 ───
+  const handleTableSelect = useCallback((tableName: string, isCustom: boolean) => {
+    handleChange({
+      useCustomTable: isCustom,
+      customTableName: isCustom ? tableName : undefined,
+      tableName,
+      items: [],
+      filters: [],
+    });
+    setTableComboboxOpen(false);
+  }, [handleChange]);
+
+  const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
+
+  // ─── 렌더링 ───
+  return (
+    <div className="space-y-4">
+      {/* ═══════════════════════════════════════ */}
+      {/* 1단계: 데이터 소스 (카드 선택)           */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Database} title="데이터 소스" description="집계할 데이터를 가져올 방식을 선택하세요" />
+        <Separator />
+
+        <div className="grid grid-cols-3 gap-2">
+          {SOURCE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = dataSourceType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => {
+                  const updates: Partial<AggregationWidgetConfig> = { dataSourceType: card.value };
+                  if (card.value === "component" || card.value === "selection") {
+                    updates.tableName = screenTableName || config.tableName;
+                    updates.useCustomTable = false;
+                  }
+                  handleChange(updates);
+                }}
+                className={cn(
+                  "flex min-h-[70px] flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="mb-1 h-4 w-4 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* ─── table 모드: 테이블 선택 ─── */}
+        {dataSourceType === "table" && (
+          <div className="space-y-2">
+            {/* 현재 선택된 테이블 */}
+            <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <Database className="h-4 w-4 text-primary" />
+              <div className="flex-1">
+                <div className="text-xs font-medium">
+                  {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
+                </div>
+                <div className="text-[10px] text-muted-foreground">
+                  {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
+                </div>
+              </div>
+            </div>
+
+            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={tableComboboxOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={loadingTables}
+                >
+                  {loadingTables ? "로딩 중..." : "테이블 변경..."}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+                    {screenTableName && (
+                      <CommandGroup heading="기본 (화면 테이블)">
+                        <CommandItem
+                          value={screenTableName}
+                          onSelect={() => handleTableSelect(screenTableName, false)}
+                          className="cursor-pointer text-xs"
+                        >
+                          <Check className={cn("mr-2 h-3 w-3", !config.useCustomTable ? "opacity-100" : "opacity-0")} />
+                          <Database className="mr-2 h-3 w-3 text-primary" />
+                          {screenTableName}
+                        </CommandItem>
+                      </CommandGroup>
+                    )}
+                    <CommandGroup heading="전체 테이블">
+                      {availableTables
+                        .filter((t) => t.tableName !== screenTableName)
+                        .map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.tableName} ${table.displayName || ""}`}
+                            onSelect={() => handleTableSelect(table.tableName, true)}
+                            className="cursor-pointer text-xs"
+                          >
+                            <Check className={cn("mr-2 h-3 w-3", config.customTableName === table.tableName ? "opacity-100" : "opacity-0")} />
+                            <Table2 className="mr-2 h-3 w-3 text-muted-foreground" />
+                            {table.displayName || table.tableName}
+                          </CommandItem>
+                        ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+
+        {/* ─── component 모드: 컴포넌트 연결 ─── */}
+        {dataSourceType === "component" && (
+          <div className="space-y-2">
+            <span className="text-xs font-medium">연결할 컴포넌트</span>
+            <Select
+              value={config.dataSourceComponentId || ""}
+              onValueChange={(value) => handleChange({ dataSourceComponentId: value })}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="컴포넌트 선택..." />
+              </SelectTrigger>
+              <SelectContent>
+                {selectableComponents.length === 0 ? (
+                  <div className="p-2 text-center text-xs text-muted-foreground">
+                    연결 가능한 컴포넌트가 없습니다
+                    <br /><span className="text-[10px]">(리피터 또는 테이블리스트 필요)</span>
+                  </div>
+                ) : (
+                  selectableComponents.map((comp) => (
+                    <SelectItem key={comp.id} value={comp.id}>
+                      {comp.label || comp.id} ({comp.componentType})
+                    </SelectItem>
+                  ))
+                )}
+              </SelectContent>
+            </Select>
+            <p className="text-[10px] text-muted-foreground">리피터 또는 테이블리스트의 데이터를 집계합니다</p>
+          </div>
+        )}
+
+        {/* ─── selection 모드: 안내 ─── */}
+        {dataSourceType === "selection" && (
+          <div className="space-y-2">
+            <div className="rounded-md border bg-primary/5 p-3 text-xs">
+              <p className="mb-1 font-medium text-primary">선택된 행 집계</p>
+              <p className="text-[10px] text-muted-foreground">
+                화면에서 사용자가 선택(체크)한 행들만 집계합니다.
+              </p>
+            </div>
+            <div className="flex items-center gap-2 rounded-md border bg-muted/30 p-2">
+              <Database className="h-4 w-4 text-primary" />
+              <span className="text-xs font-medium">
+                {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 2단계: 집계 항목                         */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={itemsOpen} onOpenChange={setItemsOpen}>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-2">
+              <Calculator className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">집계 항목</span>
+              <Badge variant="secondary" className="text-[10px] h-5">{(config.items || []).length}개</Badge>
+            </div>
+            <div className="flex items-center gap-1">
+              <Button type="button" variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); addItem(); }} className="h-6 shrink-0 px-2 text-xs">
+                <Plus className="mr-1 h-3 w-3" />추가
+              </Button>
+              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", itemsOpen && "rotate-180")} />
+            </div>
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
+            {(config.items || []).length === 0 ? (
+              <div className="rounded-lg border-2 border-dashed py-6 text-center">
+                <Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+                <p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p>
+                <p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
+              </div>
+            ) : (
+              <div className="space-y-1.5">
+                {(config.items || []).map((item, index) => (
+                  <div key={item.id} className="rounded-md border">
+                    <button
+                      type="button"
+                      onClick={() => setExpandedItemId(expandedItemId === item.id ? null : item.id)}
+                      className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
+                    >
+                      <ChevronRight className={cn("h-3 w-3 text-muted-foreground transition-transform shrink-0", expandedItemId === item.id && "rotate-90")} />
+                      <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{index + 1}</span>
+                      <span className="text-xs font-medium truncate flex-1 min-w-0">{item.columnLabel || item.columnName || "미설정"}</span>
+                      <Badge variant="outline" className="text-[9px] h-4 shrink-0">{AGGREGATION_TYPE_OPTIONS.find((o) => o.value === item.type)?.label || item.type}</Badge>
+                      <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); removeItem(item.id); }} className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0">
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </button>
+                    {expandedItemId === item.id && (
+                      <div className="grid grid-cols-2 gap-2 border-t px-2.5 py-2">
+                        {/* 컬럼 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">컬럼</span>
+                          <Select
+                            value={item.columnName}
+                            onValueChange={(value) => {
+                              const col = columns.find((c) => c.columnName === value);
+                              updateItem(item.id, { columnName: value, columnLabel: col?.label || value });
+                            }}
+                            disabled={loadingColumns || columns.length === 0}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue placeholder={loadingColumns ? "로딩 중..." : columns.length === 0 ? "테이블을 선택하세요" : "컬럼 선택"} />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {(item.type === "count" ? columns : numericColumns).length === 0 ? (
+                                <div className="p-2 text-center text-xs text-muted-foreground">
+                                  {item.type === "count" ? "컬럼이 없습니다" : "숫자형 컬럼이 없습니다"}
+                                </div>
+                              ) : (
+                                (item.type === "count" ? columns : numericColumns).map((col) => (
+                                  <SelectItem key={col.columnName} value={col.columnName}>
+                                    {col.label || col.columnName}
+                                  </SelectItem>
+                                ))
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 집계 타입 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">집계 타입</span>
+                          <Select
+                            value={item.type}
+                            onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {AGGREGATION_TYPE_OPTIONS.map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 표시 라벨 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">표시 라벨</span>
+                          <Input
+                            value={item.columnLabel || ""}
+                            onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
+                            placeholder="표시될 라벨"
+                            className="h-7 text-xs"
+                          />
+                        </div>
+
+                        {/* 표시 형식 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">표시 형식</span>
+                          <Select
+                            value={item.format || "number"}
+                            onValueChange={(value) => updateItem(item.id, { format: value as "number" | "currency" | "percent" })}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {FORMAT_OPTIONS.map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 접두사 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">접두사</span>
+                          <Input
+                            value={item.prefix || ""}
+                            onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
+                            placeholder="예: ₩"
+                            className="h-7 text-xs"
+                          />
+                        </div>
+
+                        {/* 접미사 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">접미사</span>
+                          <Input
+                            value={item.suffix || ""}
+                            onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
+                            placeholder="예: 원, 개"
+                            className="h-7 text-xs"
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 3단계: 필터 조건 (접힘)                  */}
+      {/* ═══════════════════════════════════════ */}
+      {(dataSourceType === "table" || dataSourceType === "selection") && (
+        <Collapsible open={filterOpen} onOpenChange={setFilterOpen}>
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-2">
+                <Filter className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">필터 조건</span>
+                {(config.filters || []).length > 0 && (
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    {(config.filters || []).length}
+                  </Badge>
+                )}
+              </div>
+              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+              <div className="flex items-center justify-between">
+                <p className="text-[10px] text-muted-foreground">집계 대상을 필터링합니다</p>
+                <Button type="button" variant="outline" size="sm" onClick={addFilter} className="h-6 px-2 text-xs">
+                  <Plus className="mr-1 h-3 w-3" />
+                  추가
+                </Button>
+              </div>
+
+              {/* 필터 결합 방식 */}
+              {(config.filters || []).length > 1 && (
+                <LabeledRow label="조건 결합">
+                  <Select
+                    value={config.filterLogic || "AND"}
+                    onValueChange={(value) => handleChange({ filterLogic: value as "AND" | "OR" })}
+                  >
+                    <SelectTrigger className="h-7 w-[140px] text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="AND">AND (모두 만족)</SelectItem>
+                      <SelectItem value="OR">OR (하나만 만족)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </LabeledRow>
+              )}
+
+              {(config.filters || []).length === 0 ? (
+                <div className="rounded-lg border-2 border-dashed py-4 text-center">
+                  <Filter className="mx-auto mb-1 h-6 w-6 text-muted-foreground opacity-30" />
+                  <p className="text-xs text-muted-foreground">필터 없음 - 전체 데이터를 집계합니다</p>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {(config.filters || []).map((filter, index) => (
+                    <div
+                      key={filter.id}
+                      className={cn("space-y-2 rounded-md border p-3", !filter.enabled && "opacity-50")}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <Checkbox
+                            checked={filter.enabled}
+                            onCheckedChange={(checked) => updateFilter(filter.id, { enabled: checked as boolean })}
+                            className="h-3.5 w-3.5"
+                          />
+                          <span className="text-xs font-medium">필터 {index + 1}</span>
+                        </div>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => removeFilter(filter.id)}
+                          className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      <div className="grid grid-cols-2 gap-2">
+                        {/* 컬럼 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">컬럼</span>
+                          <Select
+                            value={filter.columnName}
+                            onValueChange={(value) => {
+                              updateFilter(filter.id, { columnName: value, staticValue: "" });
+                              const col = columns.find((c) => c.columnName === value);
+                              if (col && (col.inputType === "category" || col.webType === "category")) {
+                                loadCategoryOptions([col]);
+                              }
+                            }}
+                            disabled={loadingColumns}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue placeholder="컬럼 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {columns.map((col) => (
+                                <SelectItem key={col.columnName} value={col.columnName}>
+                                  {col.label || col.columnName}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 연산자 */}
+                        <div className="space-y-1">
+                          <span className="text-[10px] text-muted-foreground">연산자</span>
+                          <Select
+                            value={filter.operator}
+                            onValueChange={(value) => updateFilter(filter.id, { operator: value as FilterOperator })}
+                          >
+                            <SelectTrigger className="h-7 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {Object.entries(OPERATOR_LABELS).map(([key, label]) => (
+                                <SelectItem key={key} value={key}>{label}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 값 소스 타입 + 값 입력 */}
+                        {needsValue(filter.operator) && (
+                          <>
+                            <div className="space-y-1">
+                              <span className="text-[10px] text-muted-foreground">값 소스</span>
+                              <Select
+                                value={filter.valueSourceType}
+                                onValueChange={(value) => updateFilter(filter.id, { valueSourceType: value as FilterValueSourceType })}
+                              >
+                                <SelectTrigger className="h-7 text-xs">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {Object.entries(VALUE_SOURCE_LABELS).map(([key, label]) => (
+                                    <SelectItem key={key} value={key}>{label}</SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+
+                            <div className="space-y-1">
+                              <span className="text-[10px] text-muted-foreground">
+                                {filter.valueSourceType === "static" && "값"}
+                                {filter.valueSourceType === "formField" && "폼 필드명"}
+                                {filter.valueSourceType === "selection" && "소스 컬럼"}
+                                {filter.valueSourceType === "urlParam" && "파라미터명"}
+                              </span>
+
+                              {filter.valueSourceType === "static" && (
+                                isCategoryColumn(filter.columnName) ? (
+                                  <CategoryValueCombobox
+                                    value={String(filter.staticValue || "")}
+                                    options={getCategoryOptionsForColumn(filter.columnName)}
+                                    onChange={(value) => updateFilter(filter.id, { staticValue: value })}
+                                    placeholder="값 선택"
+                                  />
+                                ) : (
+                                  <Input
+                                    value={String(filter.staticValue || "")}
+                                    onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
+                                    placeholder="값 입력"
+                                    className="h-7 text-xs"
+                                  />
+                                )
+                              )}
+
+                              {filter.valueSourceType === "formField" && (
+                                formFieldComponents.length > 0 ? (
+                                  <Select
+                                    value={filter.formFieldName || ""}
+                                    onValueChange={(value) => updateFilter(filter.id, { formFieldName: value })}
+                                  >
+                                    <SelectTrigger className="h-7 text-xs">
+                                      <SelectValue placeholder="폼 필드 선택" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {formFieldComponents.map((field) => (
+                                        <SelectItem key={field.id} value={field.columnName}>
+                                          {field.label}
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                ) : (
+                                  <div className="flex h-7 items-center rounded-md border bg-muted/50 px-2 text-xs text-muted-foreground">
+                                    배치된 입력 필드가 없습니다
+                                  </div>
+                                )
+                              )}
+
+                              {filter.valueSourceType === "urlParam" && (
+                                <Input
+                                  value={filter.urlParamName || ""}
+                                  onChange={(e) => updateFilter(filter.id, { urlParamName: e.target.value })}
+                                  placeholder="파라미터명"
+                                  className="h-7 text-xs"
+                                />
+                              )}
+                            </div>
+
+                            {/* selection 모드: 소스 컴포넌트 + 소스 컬럼 (2행 사용) */}
+                            {filter.valueSourceType === "selection" && (
+                              <>
+                                <div className="space-y-1">
+                                  <span className="text-[10px] text-muted-foreground">소스 컴포넌트</span>
+                                  <Select
+                                    value={filter.sourceComponentId || ""}
+                                    onValueChange={(value) => {
+                                      updateFilter(filter.id, { sourceComponentId: value, sourceColumnName: "" });
+                                      if (value) loadSourceComponentColumns(value);
+                                    }}
+                                  >
+                                    <SelectTrigger className="h-7 text-xs">
+                                      <SelectValue placeholder="컴포넌트 선택" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {selectableComponents.map((comp) => (
+                                        <SelectItem key={comp.id} value={comp.id}>
+                                          {comp.label || comp.id} ({comp.tableName || "테이블 미설정"})
+                                        </SelectItem>
+                                      ))}
+                                    </SelectContent>
+                                  </Select>
+                                </div>
+                                {filter.sourceComponentId && (
+                                  <div className="space-y-1">
+                                    <span className="text-[10px] text-muted-foreground">소스 컬럼</span>
+                                    <Select
+                                      value={filter.sourceColumnName || ""}
+                                      onValueChange={(value) => updateFilter(filter.id, { sourceColumnName: value })}
+                                    >
+                                      <SelectTrigger className="h-7 text-xs">
+                                        <SelectValue placeholder="컬럼 선택" />
+                                      </SelectTrigger>
+                                      <SelectContent>
+                                        {(sourceComponentColumnsCache[filter.sourceComponentId] || []).map((col) => (
+                                          <SelectItem key={col.columnName} value={col.columnName}>
+                                            {col.label || col.columnName}
+                                          </SelectItem>
+                                        ))}
+                                      </SelectContent>
+                                    </Select>
+                                  </div>
+                                )}
+                              </>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 4단계: 레이아웃 설정 (접힘)               */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <LayoutGrid className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">레이아웃</span>
+              <Badge variant="secondary" className="text-[10px] h-5">{config.layout === "vertical" ? "세로" : "가로"}</Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+            <LabeledRow label="배치 방향">
+              <Select
+                value={config.layout || "horizontal"}
+                onValueChange={(value) => handleChange({ layout: value as "horizontal" | "vertical" })}
+              >
+                <SelectTrigger className="h-7 w-[120px] text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="horizontal">가로 배치</SelectItem>
+                  <SelectItem value="vertical">세로 배치</SelectItem>
+                </SelectContent>
+              </Select>
+            </LabeledRow>
+
+            <LabeledRow label="항목 간격">
+              <Input
+                value={config.gap || "16px"}
+                onChange={(e) => handleChange({ gap: e.target.value })}
+                placeholder="16px"
+                className="h-7 w-[100px] text-xs"
+              />
+            </LabeledRow>
+
+            <SwitchRow
+              label="라벨 표시"
+              description="각 항목의 라벨을 표시합니다"
+              checked={config.showLabels ?? true}
+              onCheckedChange={(checked) => handleChange({ showLabels: checked })}
+            />
+
+            <SwitchRow
+              label="아이콘 표시"
+              description="집계 타입 아이콘을 표시합니다"
+              checked={config.showIcons ?? true}
+              onCheckedChange={(checked) => handleChange({ showIcons: checked })}
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 5단계: 스타일 설정 (접힘)                 */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Paintbrush className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">스타일</span>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", styleOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">배경색</span>
+                <Input
+                  type="color"
+                  value={config.backgroundColor || "#f8fafc"}
+                  onChange={(e) => handleChange({ backgroundColor: e.target.value })}
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">모서리 둥글기</span>
+                <Input
+                  value={config.borderRadius || "6px"}
+                  onChange={(e) => handleChange({ borderRadius: e.target.value })}
+                  placeholder="6px"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">라벨 색상</span>
+                <Input
+                  type="color"
+                  value={config.labelColor || "#64748b"}
+                  onChange={(e) => handleChange({ labelColor: e.target.value })}
+                  className="h-8"
+                />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">값 색상</span>
+                <Input
+                  type="color"
+                  value={config.valueColor || "#0f172a"}
+                  onChange={(e) => handleChange({ valueColor: e.target.value })}
+                  className="h-8"
+                />
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2AggregationWidgetConfigPanel.displayName = "V2AggregationWidgetConfigPanel";
+
+export default V2AggregationWidgetConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx b/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx
new file mode 100644
index 00000000..dbc22a6d
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx
@@ -0,0 +1,397 @@
+"use client";
+
+/**
+ * V2 결재 단계 설정 패널
+ * 토스식 단계별 UX: 데이터 소스(Combobox) -> 표시 모드 -> 표시 옵션(Collapsible)
+ */
+
+import React, { useState, useEffect } from "react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Check, ChevronsUpDown, Database, ChevronDown, Settings } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import type { ApprovalStepConfig } from "@/lib/registry/components/v2-approval-step/types";
+
+interface V2ApprovalStepConfigPanelProps {
+  config: ApprovalStepConfig;
+  onChange: (config: Partial<ApprovalStepConfig>) => void;
+  screenTableName?: string;
+}
+
+export const V2ApprovalStepConfigPanel: React.FC<V2ApprovalStepConfigPanelProps> = ({
+  config,
+  onChange,
+  screenTableName,
+}) => {
+  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableOpen, setTableOpen] = useState(false);
+
+  const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; label: string }>>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [columnOpen, setColumnOpen] = useState(false);
+
+  const [displayOpen, setDisplayOpen] = useState(false);
+
+  const targetTableName = config.targetTable || screenTableName;
+
+  const handleChange = (key: keyof ApprovalStepConfig, value: any) => {
+    onChange({ [key]: value });
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, [key]: value } },
+        })
+      );
+    }
+  };
+
+  useEffect(() => {
+    const fetchTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableTypeApi.getTables();
+        setAvailableTables(
+          response.map((table: any) => ({
+            tableName: table.tableName,
+            displayName: table.displayName || table.tableName,
+          }))
+        );
+      } catch {
+        /* ignore */
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    fetchTables();
+  }, []);
+
+  useEffect(() => {
+    if (!targetTableName) {
+      setAvailableColumns([]);
+      return;
+    }
+    const fetchColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(targetTableName);
+        if (result.success && result.data) {
+          const columns = Array.isArray(result.data) ? result.data : result.data.columns;
+          if (columns && Array.isArray(columns)) {
+            setAvailableColumns(
+              columns.map((col: any) => ({
+                columnName: col.columnName || col.column_name || col.name,
+                label:
+                  col.displayName ||
+                  col.columnLabel ||
+                  col.column_label ||
+                  col.columnName ||
+                  col.column_name ||
+                  col.name,
+              }))
+            );
+          }
+        }
+      } catch {
+        setAvailableColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    fetchColumns();
+  }, [targetTableName]);
+
+  const handleTableChange = (newTableName: string) => {
+    if (newTableName === targetTableName) return;
+    const patch = { targetTable: newTableName, targetRecordIdField: "" };
+    onChange(patch);
+    setTableOpen(false);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, ...patch } },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 데이터 소스 ─── */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Database className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">데이터 소스</p>
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          결재 상태를 조회할 대상 테이블을 설정해요
+        </p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        {/* 대상 테이블 */}
+        <div className="space-y-1">
+          <span className="text-xs text-muted-foreground">대상 테이블</span>
+          <Popover open={tableOpen} onOpenChange={setTableOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={tableOpen}
+                className="h-7 w-full justify-between text-xs"
+                disabled={loadingTables}
+              >
+                {loadingTables
+                  ? "로딩 중..."
+                  : targetTableName
+                    ? availableTables.find((t) => t.tableName === targetTableName)?.displayName ||
+                      targetTableName
+                    : "테이블 선택"}
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              style={{ width: "var(--radix-popover-trigger-width)" }}
+              align="start"
+            >
+              <Command>
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="py-4 text-center text-xs">
+                    테이블을 찾을 수 없습니다.
+                  </CommandEmpty>
+                  <CommandGroup className="max-h-[200px] overflow-auto">
+                    {availableTables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={`${table.tableName} ${table.displayName}`}
+                        onSelect={() => handleTableChange(table.tableName)}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            targetTableName === table.tableName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <div className="flex flex-col">
+                          <span className="font-medium">{table.displayName}</span>
+                          {table.displayName !== table.tableName && (
+                            <span className="text-[10px] text-muted-foreground">
+                              {table.tableName}
+                            </span>
+                          )}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+
+          {screenTableName && targetTableName !== screenTableName && (
+            <div className="mt-1 flex items-center justify-between rounded-md bg-amber-50 px-2 py-1">
+              <span className="text-[10px] text-amber-700">
+                화면 기본 테이블({screenTableName})과 다른 테이블 사용 중
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
+                onClick={() => handleTableChange(screenTableName)}
+              >
+                기본으로
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {/* 레코드 ID 필드 */}
+        <div className="space-y-1">
+          <span className="text-xs text-muted-foreground">레코드 ID 필드</span>
+          {targetTableName ? (
+            <Popover open={columnOpen} onOpenChange={setColumnOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={columnOpen}
+                  className="h-7 w-full justify-between text-xs"
+                  disabled={loadingColumns}
+                >
+                  {loadingColumns
+                    ? "컬럼 로딩 중..."
+                    : config.targetRecordIdField
+                      ? availableColumns.find((c) => c.columnName === config.targetRecordIdField)
+                          ?.label || config.targetRecordIdField
+                      : "PK 컬럼 선택"}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="p-0"
+                style={{ width: "var(--radix-popover-trigger-width)" }}
+                align="start"
+              >
+                <Command>
+                  <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="py-4 text-center text-xs">
+                      컬럼을 찾을 수 없습니다.
+                    </CommandEmpty>
+                    <CommandGroup className="max-h-[200px] overflow-auto">
+                      {availableColumns.map((col) => (
+                        <CommandItem
+                          key={col.columnName}
+                          value={`${col.columnName} ${col.label}`}
+                          onSelect={() => {
+                            handleChange("targetRecordIdField", col.columnName);
+                            setColumnOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              config.targetRecordIdField === col.columnName
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span className="font-medium">{col.label}</span>
+                            {col.label !== col.columnName && (
+                              <span className="text-[10px] text-muted-foreground">
+                                {col.columnName}
+                              </span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <p className="text-[10px] text-muted-foreground">대상 테이블을 먼저 선택하세요</p>
+          )}
+          <p className="text-[10px] text-muted-foreground mt-0.5">
+            결재 대상 레코드를 식별할 PK 컬럼
+          </p>
+        </div>
+      </div>
+
+      {/* ─── 2단계: 표시 모드 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">표시 모드</p>
+        <p className="text-[11px] text-muted-foreground">결재 단계의 방향을 설정해요</p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4">
+        <Select
+          value={config.displayMode || "horizontal"}
+          onValueChange={(v) => handleChange("displayMode", v)}
+        >
+          <SelectTrigger className="h-7 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="horizontal">가로형 스테퍼</SelectItem>
+            <SelectItem value="vertical">세로형 타임라인</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* ─── 3단계: 표시 옵션 (Collapsible) ─── */}
+      <Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">표시 옵션</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                displayOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">부서/직급 표시</p>
+                <p className="text-[11px] text-muted-foreground">
+                  결재자의 부서와 직급을 보여줘요
+                </p>
+              </div>
+              <Switch
+                checked={config.showDept !== false}
+                onCheckedChange={(checked) => handleChange("showDept", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">결재 코멘트</p>
+                <p className="text-[11px] text-muted-foreground">
+                  결재자가 남긴 의견을 표시해요
+                </p>
+              </div>
+              <Switch
+                checked={config.showComment !== false}
+                onCheckedChange={(checked) => handleChange("showComment", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">처리 시각</p>
+                <p className="text-[11px] text-muted-foreground">
+                  각 단계의 처리 일시를 보여줘요
+                </p>
+              </div>
+              <Switch
+                checked={config.showTimestamp !== false}
+                onCheckedChange={(checked) => handleChange("showTimestamp", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">콤팩트 모드</p>
+                <p className="text-[11px] text-muted-foreground">
+                  좁은 공간에 맞게 작게 표시해요
+                </p>
+              </div>
+              <Switch
+                checked={config.compact || false}
+                onCheckedChange={(checked) => handleChange("compact", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2ApprovalStepConfigPanel.displayName = "V2ApprovalStepConfigPanel";
+
+export default V2ApprovalStepConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2BizConfigPanel.tsx b/frontend/components/v2/config-panels/V2BizConfigPanel.tsx
index 0a6c133b..60ffeb46 100644
--- a/frontend/components/v2/config-panels/V2BizConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BizConfigPanel.tsx
@@ -2,15 +2,25 @@
 
 /**
  * V2Biz 설정 패널
- * 통합 비즈니스 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 비즈니스 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
 import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import {
+  GitBranch,
+  LayoutGrid,
+  MapPin,
+  Hash,
+  FolderTree,
+  ArrowRightLeft,
+  Link2,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import { tableTypeApi } from "@/lib/api/screen";
 
 interface V2BizConfigPanelProps {
@@ -28,27 +38,32 @@ interface ColumnOption {
   displayName: string;
 }
 
+const BIZ_TYPE_CARDS = [
+  { value: "flow", icon: GitBranch, title: "플로우", description: "워크플로우를 구성해요" },
+  { value: "rack", icon: LayoutGrid, title: "랙 구조", description: "창고 렉 위치를 관리해요" },
+  { value: "map", icon: MapPin, title: "지도", description: "위치 정보를 표시해요" },
+  { value: "numbering", icon: Hash, title: "채번 규칙", description: "자동 번호를 생성해요" },
+  { value: "category", icon: FolderTree, title: "카테고리", description: "분류 체계를 관리해요" },
+  { value: "data-mapping", icon: ArrowRightLeft, title: "데이터 매핑", description: "테이블 간 매핑해요" },
+  { value: "related-data", icon: Link2, title: "관련 데이터", description: "연결된 데이터를 조회해요" },
+] as const;
+
 export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 테이블 목록
   const [tables, setTables] = useState<TableOption[]>([]);
   const [loadingTables, setLoadingTables] = useState(false);
-  
-  // 컬럼 목록 (소스/대상/관련 테이블용)
   const [sourceColumns, setSourceColumns] = useState<ColumnOption[]>([]);
   const [targetColumns, setTargetColumns] = useState<ColumnOption[]>([]);
   const [relatedColumns, setRelatedColumns] = useState<ColumnOption[]>([]);
   const [categoryColumns, setCategoryColumns] = useState<ColumnOption[]>([]);
   const [loadingColumns, setLoadingColumns] = useState(false);
 
-  // 설정 업데이트 핸들러
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
-  // 테이블 목록 로드
   useEffect(() => {
     const loadTables = async () => {
       setLoadingTables(true);
@@ -67,13 +82,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
     loadTables();
   }, []);
 
-  // 소스 테이블 선택 시 컬럼 목록 로드
   useEffect(() => {
     const loadColumns = async () => {
-      if (!config.sourceTable) {
-        setSourceColumns([]);
-        return;
-      }
+      if (!config.sourceTable) { setSourceColumns([]); return; }
       try {
         const data = await tableTypeApi.getColumns(config.sourceTable);
         setSourceColumns(data.map((c: any) => ({
@@ -87,13 +98,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
     loadColumns();
   }, [config.sourceTable]);
 
-  // 대상 테이블 선택 시 컬럼 목록 로드
   useEffect(() => {
     const loadColumns = async () => {
-      if (!config.targetTable) {
-        setTargetColumns([]);
-        return;
-      }
+      if (!config.targetTable) { setTargetColumns([]); return; }
       try {
         const data = await tableTypeApi.getColumns(config.targetTable);
         setTargetColumns(data.map((c: any) => ({
@@ -107,13 +114,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
     loadColumns();
   }, [config.targetTable]);
 
-  // 관련 테이블 선택 시 컬럼 목록 로드
   useEffect(() => {
     const loadColumns = async () => {
-      if (!config.relatedTable) {
-        setRelatedColumns([]);
-        return;
-      }
+      if (!config.relatedTable) { setRelatedColumns([]); return; }
       try {
         const data = await tableTypeApi.getColumns(config.relatedTable);
         setRelatedColumns(data.map((c: any) => ({
@@ -127,13 +130,9 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
     loadColumns();
   }, [config.relatedTable]);
 
-  // 카테고리 테이블 선택 시 컬럼 목록 로드
   useEffect(() => {
     const loadColumns = async () => {
-      if (!config.tableName) {
-        setCategoryColumns([]);
-        return;
-      }
+      if (!config.tableName) { setCategoryColumns([]); return; }
       setLoadingColumns(true);
       try {
         const data = await tableTypeApi.getColumns(config.tableName);
@@ -150,281 +149,348 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
     loadColumns();
   }, [config.tableName]);
 
+  const bizType = config.bizType || config.type || "flow";
+
   return (
     <div className="space-y-4">
-      {/* 비즈니스 타입 */}
+      {/* ─── 1단계: 비즈니스 타입 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">비즈니스 타입</Label>
-        <Select
-          value={config.bizType || config.type || "flow"}
-          onValueChange={(value) => updateConfig("bizType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="flow">플로우</SelectItem>
-            <SelectItem value="rack">랙 구조</SelectItem>
-            <SelectItem value="map">지도</SelectItem>
-            <SelectItem value="numbering">채번 규칙</SelectItem>
-            <SelectItem value="category">카테고리</SelectItem>
-            <SelectItem value="data-mapping">데이터 매핑</SelectItem>
-            <SelectItem value="related-data">관련 데이터</SelectItem>
-          </SelectContent>
-        </Select>
+        <p className="text-sm font-medium">어떤 비즈니스 기능을 사용하나요?</p>
+        <div className="grid grid-cols-2 gap-2">
+          {BIZ_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = bizType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("bizType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      <Separator />
+      {/* ─── 2단계: 타입별 설정 ─── */}
 
       {/* 플로우 설정 */}
-      {config.bizType === "flow" && (
-        <div className="space-y-3">
-          <Label className="text-xs font-medium">플로우 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">플로우 ID</Label>
+      {bizType === "flow" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <GitBranch className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">플로우 설정</span>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">플로우 ID</span>
             <Input
               type="number"
               value={config.flowId || ""}
               onChange={(e) => updateConfig("flowId", e.target.value ? Number(e.target.value) : undefined)}
               placeholder="플로우 ID"
-              className="h-8 text-xs"
+              className="h-7 w-[160px] text-xs"
             />
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="editable"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">편집 가능</p>
+              <p className="text-[11px] text-muted-foreground">플로우를 직접 수정할 수 있어요</p>
+            </div>
+            <Switch
               checked={config.editable || false}
               onCheckedChange={(checked) => updateConfig("editable", checked)}
             />
-            <label htmlFor="editable" className="text-xs">편집 가능</label>
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="showMinimap"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">미니맵 표시</p>
+              <p className="text-[11px] text-muted-foreground">전체 구조를 한눈에 볼 수 있어요</p>
+            </div>
+            <Switch
               checked={config.showMinimap || false}
               onCheckedChange={(checked) => updateConfig("showMinimap", checked)}
             />
-            <label htmlFor="showMinimap" className="text-xs">미니맵 표시</label>
           </div>
         </div>
       )}
 
       {/* 랙 구조 설정 */}
-      {config.bizType === "rack" && (
-        <div className="space-y-3">
-          <Label className="text-xs font-medium">랙 설정</Label>
-          
-          <div className="grid grid-cols-2 gap-2">
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">행 수</Label>
-              <Input
-                type="number"
-                value={config.rows || ""}
-                onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="5"
-                min="1"
-                className="h-8 text-xs"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">열 수</Label>
-              <Input
-                type="number"
-                value={config.columns || ""}
-                onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="10"
-                min="1"
-                className="h-8 text-xs"
-              />
+      {bizType === "rack" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <LayoutGrid className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">랙 구조 설정</span>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-xs text-muted-foreground">렉 크기</p>
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <Label className="text-[10px] text-muted-foreground">행 수</Label>
+                <Input
+                  type="number"
+                  value={config.rows || ""}
+                  onChange={(e) => updateConfig("rows", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder="5"
+                  min="1"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="flex-1">
+                <Label className="text-[10px] text-muted-foreground">열 수</Label>
+                <Input
+                  type="number"
+                  value={config.columns || ""}
+                  onChange={(e) => updateConfig("columns", e.target.value ? Number(e.target.value) : undefined)}
+                  placeholder="10"
+                  min="1"
+                  className="h-7 text-xs"
+                />
+              </div>
             </div>
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="showLabels"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">라벨 표시</p>
+              <p className="text-[11px] text-muted-foreground">각 셀에 위치 라벨이 표시돼요</p>
+            </div>
+            <Switch
               checked={config.showLabels !== false}
               onCheckedChange={(checked) => updateConfig("showLabels", checked)}
             />
-            <label htmlFor="showLabels" className="text-xs">라벨 표시</label>
           </div>
         </div>
       )}
 
       {/* 채번 규칙 설정 */}
-      {config.bizType === "numbering" && (
-        <div className="space-y-3">
-          <Label className="text-xs font-medium">채번 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">채번 규칙 ID</Label>
+      {bizType === "numbering" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Hash className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">채번 규칙 설정</span>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">채번 규칙 ID</span>
             <Input
               type="number"
               value={config.ruleId || ""}
               onChange={(e) => updateConfig("ruleId", e.target.value ? Number(e.target.value) : undefined)}
               placeholder="규칙 ID"
-              className="h-8 text-xs"
+              className="h-7 w-[160px] text-xs"
             />
           </div>
 
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">접두사</Label>
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">접두사</span>
             <Input
               value={config.prefix || ""}
               onChange={(e) => updateConfig("prefix", e.target.value)}
               placeholder="예: INV-"
-              className="h-8 text-xs"
+              className="h-7 w-[160px] text-xs"
             />
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="autoGenerate"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">자동 생성</p>
+              <p className="text-[11px] text-muted-foreground">저장할 때 번호가 자동으로 생성돼요</p>
+            </div>
+            <Switch
               checked={config.autoGenerate !== false}
               onCheckedChange={(checked) => updateConfig("autoGenerate", checked)}
             />
-            <label htmlFor="autoGenerate" className="text-xs">자동 생성</label>
           </div>
         </div>
       )}
 
       {/* 카테고리 설정 */}
-      {config.bizType === "category" && (
-        <div className="space-y-3">
-          <Label className="text-xs font-medium">카테고리 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">카테고리 테이블</Label>
-            <Select
-              value={config.tableName || ""}
-              onValueChange={(value) => {
-                updateConfig("tableName", value);
-                updateConfig("columnName", "");
-              }}
-              disabled={loadingTables}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
-              </SelectTrigger>
-              <SelectContent>
-                {tables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {table.displayName}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+      {bizType === "category" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <FolderTree className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">카테고리 설정</span>
           </div>
 
-          {config.tableName && (
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">컬럼</Label>
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">카테고리 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
               <Select
-                value={config.columnName || ""}
-                onValueChange={(value) => updateConfig("columnName", value)}
-                disabled={loadingColumns}
+                value={config.tableName || ""}
+                onValueChange={(value) => {
+                  updateConfig("tableName", value);
+                  updateConfig("columnName", "");
+                }}
               >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder={loadingColumns ? "로딩 중..." : "컬럼 선택"} />
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="테이블 선택" />
                 </SelectTrigger>
                 <SelectContent>
-                  {categoryColumns.map((col) => (
-                    <SelectItem key={col.columnName} value={col.columnName}>
-                      {col.displayName}
+                  {tables.map((table) => (
+                    <SelectItem key={table.tableName} value={table.tableName}>
+                      {table.displayName}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
+            )}
+          </div>
+
+          {config.tableName && (
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">컬럼</p>
+              {loadingColumns ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  컬럼 로딩 중...
+                </div>
+              ) : (
+                <Select
+                  value={config.columnName || ""}
+                  onValueChange={(value) => updateConfig("columnName", value)}
+                >
+                  <SelectTrigger className="h-8 text-sm">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {categoryColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.displayName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
             </div>
           )}
         </div>
       )}
 
       {/* 데이터 매핑 설정 */}
-      {config.bizType === "data-mapping" && (
-        <div className="space-y-3">
-          <Label className="text-xs font-medium">매핑 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">소스 테이블</Label>
-            <Select
-              value={config.sourceTable || ""}
-              onValueChange={(value) => updateConfig("sourceTable", value)}
-              disabled={loadingTables}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
-              </SelectTrigger>
-              <SelectContent>
-                {tables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {table.displayName}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+      {bizType === "data-mapping" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <ArrowRightLeft className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">데이터 매핑 설정</span>
           </div>
 
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">대상 테이블</Label>
-            <Select
-              value={config.targetTable || ""}
-              onValueChange={(value) => updateConfig("targetTable", value)}
-              disabled={loadingTables}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
-              </SelectTrigger>
-              <SelectContent>
-                {tables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {table.displayName}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">소스 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
+              <Select
+                value={config.sourceTable || ""}
+                onValueChange={(value) => updateConfig("sourceTable", value)}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="소스 테이블 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((table) => (
+                    <SelectItem key={table.tableName} value={table.tableName}>
+                      {table.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">대상 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
+              <Select
+                value={config.targetTable || ""}
+                onValueChange={(value) => updateConfig("targetTable", value)}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="대상 테이블 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((table) => (
+                    <SelectItem key={table.tableName} value={table.tableName}>
+                      {table.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
           </div>
         </div>
       )}
 
       {/* 관련 데이터 설정 */}
-      {config.bizType === "related-data" && (
-        <div className="space-y-3">
-          <Label className="text-xs font-medium">관련 데이터 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">관련 테이블</Label>
-            <Select
-              value={config.relatedTable || ""}
-              onValueChange={(value) => {
-                updateConfig("relatedTable", value);
-                updateConfig("linkColumn", "");
-              }}
-              disabled={loadingTables}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
-              </SelectTrigger>
-              <SelectContent>
-                {tables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {table.displayName}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+      {bizType === "related-data" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Link2 className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">관련 데이터 설정</span>
+          </div>
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">관련 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
+              <Select
+                value={config.relatedTable || ""}
+                onValueChange={(value) => {
+                  updateConfig("relatedTable", value);
+                  updateConfig("linkColumn", "");
+                }}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="관련 테이블 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((table) => (
+                    <SelectItem key={table.tableName} value={table.tableName}>
+                      {table.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
           </div>
 
           {config.relatedTable && (
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">연결 컬럼</Label>
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">연결 컬럼</p>
               <Select
                 value={config.linkColumn || ""}
                 onValueChange={(value) => updateConfig("linkColumn", value)}
               >
-                <SelectTrigger className="h-8 text-xs">
+                <SelectTrigger className="h-8 text-sm">
                   <SelectValue placeholder="컬럼 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -438,13 +504,13 @@ export const V2BizConfigPanel: React.FC<V2BizConfigPanelProps> = ({
             </div>
           )}
 
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">버튼 텍스트</Label>
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">버튼 텍스트</span>
             <Input
               value={config.buttonText || ""}
               onChange={(e) => updateConfig("buttonText", e.target.value)}
               placeholder="관련 데이터 보기"
-              className="h-8 text-xs"
+              className="h-7 w-[160px] text-xs"
             />
           </div>
         </div>
diff --git a/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx b/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
index eea9e3ce..04865427 100644
--- a/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
@@ -3,13 +3,12 @@
 /**
  * BOM 하위품목 편집기 설정 패널
  *
- * V2RepeaterConfigPanel 구조를 기반으로 구현:
- * - 기본 탭: 저장 테이블 + 엔티티 선택 + 트리 설정 + 기능 옵션
+ * 토스식 단계별 UX:
+ * - 기본 탭: 저장 테이블 → 트리 구조 → 엔티티 선택 → 기능 옵션(고급)
  * - 컬럼 탭: 소스 표시 컬럼 + 저장 입력 컬럼 + 선택된 컬럼 상세
  */
 
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -17,7 +16,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -35,6 +34,7 @@ import {
   Check,
   ChevronsUpDown,
   GitBranch,
+  Settings,
 } from "lucide-react";
 import {
   Command,
@@ -49,6 +49,12 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
 import { tableTypeApi } from "@/lib/api/screen";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { cn } from "@/lib/utils";
@@ -102,27 +108,18 @@ interface BomColumnConfig {
 }
 
 interface BomItemEditorConfig {
-  // 저장 테이블 설정 (리피터 패턴)
   useCustomTable?: boolean;
   mainTableName?: string;
   foreignKeyColumn?: string;
   foreignKeySourceColumn?: string;
-
-  // 트리 구조 설정
   parentKeyColumn?: string;
-
-  // 엔티티 (품목 참조) 설정
   dataSource?: {
     sourceTable?: string;
     foreignKey?: string;
     referenceKey?: string;
     displayColumn?: string;
   };
-
-  // 컬럼 설정
   columns: BomColumnConfig[];
-
-  // 기능 옵션
   features?: {
     showAddButton?: boolean;
     showDeleteButton?: boolean;
@@ -150,19 +147,22 @@ export function V2BomItemEditorConfigPanel({
   const currentTableName = screenTableName || propCurrentTableName;
 
   const config: BomItemEditorConfig = useMemo(
-    () => ({
-      columns: [],
-      ...propConfig,
-      dataSource: { ...propConfig?.dataSource },
-      features: {
-        showAddButton: true,
-        showDeleteButton: true,
-        inlineEdit: false,
-        showRowNumber: false,
-        maxDepth: 3,
-        ...propConfig?.features,
-      },
-    }),
+    () => {
+      const { columns: propColumns, ...rest } = propConfig || {} as BomItemEditorConfig;
+      return {
+        ...rest,
+        columns: propColumns || [],
+        dataSource: { ...propConfig?.dataSource },
+        features: {
+          showAddButton: true,
+          showDeleteButton: true,
+          inlineEdit: false,
+          showRowNumber: false,
+          maxDepth: 3,
+          ...propConfig?.features,
+        },
+      };
+    },
     [propConfig],
   );
 
@@ -178,6 +178,9 @@ export function V2BomItemEditorConfigPanel({
   const [loadingRelations, setLoadingRelations] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
   const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
+  const [featureOptionsOpen, setFeatureOptionsOpen] = useState(false);
+  const [columnSelectOpen, setColumnSelectOpen] = useState(false);
+  const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
 
   // ─── 업데이트 헬퍼 (리피터 패턴) ───
   const updateConfig = useCallback(
@@ -472,7 +475,6 @@ export function V2BomItemEditorConfigPanel({
     });
   };
 
-  // FK 컬럼 제외한 입력 가능 컬럼
   const inputableColumns = useMemo(() => {
     const fkColumn = config.dataSource?.foreignKey;
     return currentTableColumns.filter(
@@ -495,9 +497,12 @@ export function V2BomItemEditorConfigPanel({
 
         {/* ─── 기본 설정 탭 ─── */}
         <TabsContent value="basic" className="mt-4 space-y-4">
-          {/* 저장 대상 테이블 (리피터 동일) */}
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">저장 테이블</Label>
+          {/* 저장 대상 테이블 */}
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Database className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">BOM 데이터를 어디에 저장하나요?</span>
+            </div>
 
             <div
               className={cn(
@@ -539,7 +544,7 @@ export function V2BomItemEditorConfigPanel({
               </div>
             </div>
 
-            {/* 테이블 Combobox (리피터 동일) */}
+            {/* 테이블 Combobox */}
             <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
               <PopoverTrigger asChild>
                 <Button
@@ -651,19 +656,18 @@ export function V2BomItemEditorConfigPanel({
               </PopoverContent>
             </Popover>
 
-            {/* FK 직접 입력 (연관 없는 테이블 선택 시) */}
+            {/* FK 직접 입력 */}
             {config.useCustomTable &&
               config.mainTableName &&
               currentTableName &&
               !relatedTables.some((r) => r.tableName === config.mainTableName) && (
                 <div className="space-y-2 rounded border border-amber-200 bg-amber-50 p-2">
                   <p className="text-[10px] text-amber-700">
-                    화면 테이블({currentTableName})과의 엔티티 관계가 없습니다. FK 컬럼을 직접
-                    입력하세요.
+                    화면 테이블({currentTableName})과의 엔티티 관계가 없어요. FK 컬럼을 직접 입력해주세요.
                   </p>
                   <div className="grid grid-cols-2 gap-2">
                     <div className="space-y-1">
-                      <Label className="text-[10px]">FK 컬럼 (저장 테이블)</Label>
+                      <p className="text-xs text-muted-foreground">FK 컬럼 (저장 테이블)</p>
                       <Input
                         value={config.foreignKeyColumn || ""}
                         onChange={(e) => updateConfig({ foreignKeyColumn: e.target.value })}
@@ -672,7 +676,7 @@ export function V2BomItemEditorConfigPanel({
                       />
                     </div>
                     <div className="space-y-1">
-                      <Label className="text-[10px]">PK 컬럼 (화면 테이블)</Label>
+                      <p className="text-xs text-muted-foreground">PK 컬럼 (화면 테이블)</p>
                       <Input
                         value={config.foreignKeySourceColumn || "id"}
                         onChange={(e) => updateConfig({ foreignKeySourceColumn: e.target.value })}
@@ -683,72 +687,85 @@ export function V2BomItemEditorConfigPanel({
                   </div>
                 </div>
               )}
+
+            {/* 화면 메인 테이블 참고 정보 */}
+            {currentTableName && (
+              <div className="rounded-md border bg-background p-3">
+                <p className="text-xs text-muted-foreground">화면 메인 테이블</p>
+                <p className="mt-0.5 text-sm font-medium">{currentTableName}</p>
+                <p className="text-[10px] text-muted-foreground mt-0.5">
+                  컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
+                </p>
+              </div>
+            )}
           </div>
 
-          <Separator />
-
           {/* 트리 구조 설정 (BOM 전용) */}
-          <div className="space-y-2">
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
             <div className="flex items-center gap-2">
-              <GitBranch className="h-4 w-4" />
-              <Label className="text-xs font-medium">트리 구조 설정</Label>
+              <GitBranch className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">트리 구조는 어떻게 만드나요?</span>
             </div>
-            <p className="text-muted-foreground text-[10px]">
-              계층 구조를 위한 자기 참조 FK 컬럼을 선택하세요
+            <p className="text-[11px] text-muted-foreground">
+              계층 구조를 위한 자기 참조 FK 컬럼을 선택하면 부모-자식 관계가 만들어져요
             </p>
 
             {currentTableColumns.length > 0 ? (
-              <Select
-                value={config.parentKeyColumn || ""}
-                onValueChange={(value) => updateConfig({ parentKeyColumn: value })}
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="부모 키 컬럼 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {currentTableColumns.map((col) => (
-                    <SelectItem key={col.columnName} value={col.columnName}>
-                      <div className="flex items-center gap-2">
-                        <span>{col.displayName}</span>
-                        {col.displayName !== col.columnName && (
-                          <span className="text-muted-foreground text-[10px]">
-                            ({col.columnName})
-                          </span>
-                        )}
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <div>
+                <p className="mb-1.5 text-xs text-muted-foreground">부모 키 컬럼</p>
+                <Select
+                  value={config.parentKeyColumn || ""}
+                  onValueChange={(value) => updateConfig({ parentKeyColumn: value })}
+                >
+                  <SelectTrigger className="h-8 text-sm">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {currentTableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        <div className="flex items-center gap-2">
+                          <span>{col.displayName}</span>
+                          {col.displayName !== col.columnName && (
+                            <span className="text-muted-foreground text-[10px]">
+                              ({col.columnName})
+                            </span>
+                          )}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
             ) : (
-              <div className="rounded border border-border bg-muted p-2">
-                <p className="text-[10px] text-muted-foreground">
-                  {loadingColumns ? "로딩 중..." : "저장 테이블을 먼저 선택하세요"}
+              <div className="rounded-md border-2 border-dashed p-4 text-center">
+                <GitBranch className="mx-auto mb-2 h-8 w-8 opacity-30 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  {loadingColumns ? "컬럼 정보를 불러오고 있어요..." : "저장 테이블을 먼저 선택해주세요"}
                 </p>
               </div>
             )}
 
-            {/* 최대 깊이 */}
-            <div className="space-y-1">
-              <Label className="text-[10px]">최대 트리 깊이</Label>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">최대 트리 깊이</span>
               <Input
                 type="number"
                 min={1}
                 max={10}
                 value={config.features?.maxDepth ?? 3}
                 onChange={(e) => updateFeatures("maxDepth", parseInt(e.target.value) || 3)}
-                className="h-7 w-20 text-xs"
+                className="h-7 w-[80px] text-xs"
               />
             </div>
           </div>
 
-          <Separator />
-
-          {/* 엔티티 선택 (리피터 모달 모드와 동일) */}
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">엔티티 선택 (품목 참조)</Label>
-            <p className="text-muted-foreground text-[10px]">
-              품목 검색 시 참조할 엔티티를 선택하세요 (FK만 저장됨)
+          {/* 엔티티 선택 (품목 참조) */}
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Link2 className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">어떤 품목을 참조하나요?</span>
+            </div>
+            <p className="text-[11px] text-muted-foreground">
+              품목 검색 시 참조할 엔티티를 선택하면 FK만 저장돼요
             </p>
 
             {entityColumns.length > 0 ? (
@@ -757,7 +774,7 @@ export function V2BomItemEditorConfigPanel({
                 onValueChange={handleEntityColumnSelect}
                 disabled={!targetTableForColumns}
               >
-                <SelectTrigger className="h-8 text-xs">
+                <SelectTrigger className="h-8 text-sm">
                   <SelectValue placeholder="엔티티 컬럼 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -774,308 +791,366 @@ export function V2BomItemEditorConfigPanel({
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-border bg-muted p-2">
-                <p className="text-[10px] text-muted-foreground">
+              <div className="rounded-md border-2 border-dashed p-4 text-center">
+                <p className="text-sm text-muted-foreground">
                   {loadingColumns
-                    ? "로딩 중..."
+                    ? "컬럼 정보를 불러오고 있어요..."
                     : !targetTableForColumns
-                      ? "저장 테이블을 먼저 선택하세요"
-                      : "엔티티 타입 컬럼이 없습니다"}
+                      ? "저장 테이블을 먼저 선택해주세요"
+                      : "엔티티 타입 컬럼이 없어요"}
                 </p>
               </div>
             )}
 
             {config.dataSource?.sourceTable && (
-              <div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
-                <p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
-                <div className="text-[10px] text-emerald-600">
-                  <p>검색 테이블: {config.dataSource.sourceTable}</p>
-                  <p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
-                </div>
+              <div className="rounded-md border bg-background p-3 space-y-1">
+                <p className="text-xs text-muted-foreground">선택된 엔티티</p>
+                <p className="text-sm font-medium">{config.dataSource.sourceTable}</p>
+                <p className="text-[11px] text-muted-foreground">
+                  {config.dataSource.foreignKey} 컬럼에 FK로 저장돼요
+                </p>
               </div>
             )}
           </div>
 
-          <Separator />
-
-          {/* 기능 옵션 */}
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">기능 옵션</Label>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="bom-showAddButton"
-                  checked={config.features?.showAddButton ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showAddButton", !!checked)}
+          {/* 기능 옵션 - Collapsible + Badge */}
+          <Collapsible open={featureOptionsOpen} onOpenChange={setFeatureOptionsOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+              >
+                <div className="flex items-center gap-2">
+                  <Settings className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">기능 옵션</span>
+                  <Badge
+                    variant="secondary"
+                    className="text-[10px] h-5"
+                  >
+                    {[
+                      config.features?.showAddButton ?? true,
+                      config.features?.showDeleteButton ?? true,
+                      config.features?.inlineEdit ?? false,
+                      config.features?.showRowNumber ?? false,
+                    ].filter(Boolean).length}
+                    개
+                  </Badge>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    featureOptionsOpen && "rotate-180",
+                  )}
                 />
-                <label htmlFor="bom-showAddButton" className="text-xs">
-                  추가 버튼
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="bom-showDeleteButton"
-                  checked={config.features?.showDeleteButton ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showDeleteButton", !!checked)}
-                />
-                <label htmlFor="bom-showDeleteButton" className="text-xs">
-                  삭제 버튼
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="bom-inlineEdit"
-                  checked={config.features?.inlineEdit ?? false}
-                  onCheckedChange={(checked) => updateFeatures("inlineEdit", !!checked)}
-                />
-                <label htmlFor="bom-inlineEdit" className="text-xs">
-                  인라인 편집
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="bom-showRowNumber"
-                  checked={config.features?.showRowNumber ?? false}
-                  onCheckedChange={(checked) => updateFeatures("showRowNumber", !!checked)}
-                />
-                <label htmlFor="bom-showRowNumber" className="text-xs">
-                  행 번호
-                </label>
-              </div>
-            </div>
-          </div>
-
-          {/* 메인 화면 테이블 참고 */}
-          {currentTableName && (
-            <>
-              <Separator />
-              <div className="space-y-2">
-                <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-                <div className="rounded border border-border bg-muted p-2">
-                  <p className="text-xs font-medium text-foreground">{currentTableName}</p>
-                  <p className="text-[10px] text-muted-foreground">
-                    컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
-                  </p>
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">추가 버튼</p>
+                    <p className="text-[11px] text-muted-foreground">하위 품목을 추가할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showAddButton ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showAddButton", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">삭제 버튼</p>
+                    <p className="text-[11px] text-muted-foreground">선택한 품목을 삭제할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showDeleteButton ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showDeleteButton", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">인라인 편집</p>
+                    <p className="text-[11px] text-muted-foreground">셀을 클릭하면 바로 수정할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.inlineEdit ?? false}
+                    onCheckedChange={(checked) => updateFeatures("inlineEdit", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">행 번호</p>
+                    <p className="text-[11px] text-muted-foreground">각 행에 순번을 표시해요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showRowNumber ?? false}
+                    onCheckedChange={(checked) => updateFeatures("showRowNumber", checked)}
+                  />
                 </div>
               </div>
-            </>
-          )}
+            </CollapsibleContent>
+          </Collapsible>
         </TabsContent>
 
-        {/* ─── 컬럼 설정 탭 (리피터 동일 패턴) ─── */}
+        {/* ─── 컬럼 설정 탭 ─── */}
         <TabsContent value="columns" className="mt-4 space-y-4">
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">컬럼 선택</Label>
-            <p className="text-muted-foreground text-[10px]">
-              표시할 소스 컬럼과 입력 컬럼을 선택하세요
-            </p>
-
-            {/* 소스 테이블 컬럼 (표시용) */}
-            {config.dataSource?.sourceTable && (
-              <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
-                  <Link2 className="h-3 w-3" />
-                  소스 테이블 ({config.dataSource.sourceTable}) - 표시용
+          {/* 컬럼 선택 - Collapsible + Badge */}
+          <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+              >
+                <div className="flex items-center gap-2">
+                  <Database className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">컬럼 선택</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    {config.columns.length}개 선택됨
+                  </Badge>
                 </div>
-                {loadingSourceColumns ? (
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    columnSelectOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
+                <p className="text-[11px] text-muted-foreground">
+                  소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요
+                </p>
+
+                {/* 소스 테이블 컬럼 (표시용) */}
+                {config.dataSource?.sourceTable && (
+                  <>
+                    <div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-primary">
+                      <Link2 className="h-3 w-3" />
+                      소스 테이블 ({config.dataSource.sourceTable}) - 표시용
+                    </div>
+                    {loadingSourceColumns ? (
+                      <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
+                    ) : sourceTableColumns.length === 0 ? (
+                      <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
+                    ) : (
+                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
+                        {sourceTableColumns.map((column) => (
+                          <div
+                            key={`source-${column.columnName}`}
+                            className={cn(
+                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                              isSourceColumnSelected(column.columnName) && "bg-primary/10",
+                            )}
+                            onClick={() => toggleSourceDisplayColumn(column)}
+                          >
+                            <Checkbox
+                              checked={isSourceColumnSelected(column.columnName)}
+                              onCheckedChange={() => toggleSourceDisplayColumn(column)}
+                              className="pointer-events-none h-3.5 w-3.5"
+                            />
+                            <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                            <span className="truncate text-xs">{column.displayName}</span>
+                            <span className="ml-auto text-[10px] text-primary/80">표시</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+
+                {/* 저장 테이블 컬럼 (입력용) */}
+                <div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
+                  <Database className="h-3 w-3" />
+                  저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
+                </div>
+                {loadingColumns ? (
                   <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-                ) : sourceTableColumns.length === 0 ? (
-                  <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
+                ) : inputableColumns.length === 0 ? (
+                  <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
-                    {sourceTableColumns.map((column) => (
+                  <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
+                    {inputableColumns.map((column) => (
                       <div
-                        key={`source-${column.columnName}`}
+                        key={`input-${column.columnName}`}
                         className={cn(
-                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
-                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
+                          "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                          isColumnAdded(column.columnName) && "bg-primary/10",
                         )}
-                        onClick={() => toggleSourceDisplayColumn(column)}
+                        onClick={() => toggleInputColumn(column)}
                       >
                         <Checkbox
-                          checked={isSourceColumnSelected(column.columnName)}
-                          onCheckedChange={() => toggleSourceDisplayColumn(column)}
+                          checked={isColumnAdded(column.columnName)}
+                          onCheckedChange={() => toggleInputColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="ml-auto text-[10px] text-primary/80">표시</span>
+                        <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
                       </div>
                     ))}
                   </div>
                 )}
-              </>
-            )}
-
-            {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
-              <Database className="h-3 w-3" />
-              저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
-            </div>
-            {loadingColumns ? (
-              <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-            ) : inputableColumns.length === 0 ? (
-              <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
-            ) : (
-              <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
-                {inputableColumns.map((column) => (
-                  <div
-                    key={`input-${column.columnName}`}
-                    className={cn(
-                      "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                      isColumnAdded(column.columnName) && "bg-primary/10",
-                    )}
-                    onClick={() => toggleInputColumn(column)}
-                  >
-                    <Checkbox
-                      checked={isColumnAdded(column.columnName)}
-                      onCheckedChange={() => toggleInputColumn(column)}
-                      className="pointer-events-none h-3.5 w-3.5"
-                    />
-                    <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-                    <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
-                  </div>
-                ))}
               </div>
-            )}
-          </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-          {/* 선택된 컬럼 상세 (리피터 동일 패턴) */}
+          {/* 선택된 컬럼 상세 - Collapsible + Badge */}
           {config.columns.length > 0 && (
-            <>
-              <Separator />
-              <div className="space-y-2">
-                <Label className="text-xs font-medium">
-                  선택된 컬럼 ({config.columns.length}개)
-                  <span className="text-muted-foreground ml-2 font-normal">드래그로 순서 변경</span>
-                </Label>
-                <div className="max-h-48 space-y-1 overflow-y-auto">
-                  {config.columns.map((col, index) => (
-                    <div key={col.key} className="space-y-1">
-                      <div
-                        className={cn(
-                          "flex items-center gap-2 rounded-md border p-2",
-                          col.isSourceDisplay
-                            ? "border-primary/20 bg-primary/10/50"
-                            : "border-border bg-muted/30",
-                          col.hidden && "opacity-50",
-                        )}
-                        draggable
-                        onDragStart={(e) => e.dataTransfer.setData("columnIndex", String(index))}
-                        onDragOver={(e) => e.preventDefault()}
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
-                          if (fromIndex !== index) {
-                            const newColumns = [...config.columns];
-                            const [movedCol] = newColumns.splice(fromIndex, 1);
-                            newColumns.splice(index, 0, movedCol);
-                            updateConfig({ columns: newColumns });
+            <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium">선택된 컬럼</span>
+                    <Badge variant="secondary" className="text-[10px] h-5">
+                      {config.columns.length}개
+                    </Badge>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                      selectedColumnsOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
+                  </div>
+                  <div className="max-h-48 space-y-1 overflow-y-auto">
+                {config.columns.map((col, index) => (
+                  <div key={col.key} className="space-y-1">
+                    <div
+                      className={cn(
+                        "flex items-center gap-2 rounded-md border p-2",
+                        col.isSourceDisplay
+                          ? "border-primary/20 bg-primary/10/50"
+                          : "border-border bg-muted/30",
+                        col.hidden && "opacity-50",
+                      )}
+                      draggable
+                      onDragStart={(e) => e.dataTransfer.setData("columnIndex", String(index))}
+                      onDragOver={(e) => e.preventDefault()}
+                      onDrop={(e) => {
+                        e.preventDefault();
+                        const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
+                        if (fromIndex !== index) {
+                          const newColumns = [...config.columns];
+                          const [movedCol] = newColumns.splice(fromIndex, 1);
+                          newColumns.splice(index, 0, movedCol);
+                          updateConfig({ columns: newColumns });
+                        }
+                      }}
+                    >
+                      <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
+
+                      {!col.isSourceDisplay && (
+                        <button
+                          type="button"
+                          onClick={() =>
+                            setExpandedColumn(expandedColumn === col.key ? null : col.key)
+                          }
+                          className="rounded p-0.5 hover:bg-muted/80"
+                        >
+                          {expandedColumn === col.key ? (
+                            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          )}
+                        </button>
+                      )}
+
+                      {col.isSourceDisplay ? (
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                      ) : (
+                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                      )}
+
+                      <Input
+                        value={col.title}
+                        onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
+                        placeholder="제목"
+                        className="h-6 flex-1 text-xs"
+                      />
+
+                      {!col.isSourceDisplay && (
+                        <button
+                          type="button"
+                          onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
+                          className={cn(
+                            "rounded p-1 hover:bg-muted/80",
+                            col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
+                          )}
+                          title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
+                        >
+                          {col.hidden ? (
+                            <EyeOff className="h-3 w-3" />
+                          ) : (
+                            <Eye className="h-3 w-3" />
+                          )}
+                        </button>
+                      )}
+
+                      {!col.isSourceDisplay && (
+                        <button
+                          type="button"
+                          onClick={() => updateColumnProp(col.key, "editable", !(col.editable ?? true))}
+                          className={cn(
+                            "shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium transition-colors",
+                            (col.editable ?? true)
+                              ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                              : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
+                          )}
+                          title={(col.editable ?? true) ? "편집 가능" : "읽기 전용"}
+                        >
+                          {(col.editable ?? true) ? "편집" : "읽기"}
+                        </button>
+                      )}
+
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          if (col.isSourceDisplay) {
+                            toggleSourceDisplayColumn({
+                              columnName: col.key,
+                              displayName: col.title,
+                            });
+                          } else {
+                            toggleInputColumn({ columnName: col.key, displayName: col.title });
                           }
                         }}
+                        className="text-destructive h-6 w-6 p-0"
                       >
-                        <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
-
-                        {!col.isSourceDisplay && (
-                          <button
-                            type="button"
-                            onClick={() =>
-                              setExpandedColumn(expandedColumn === col.key ? null : col.key)
-                            }
-                            className="rounded p-0.5 hover:bg-muted/80"
-                          >
-                            {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
-                            ) : (
-                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-                            )}
-                          </button>
-                        )}
-
-                        {col.isSourceDisplay ? (
-                          <Link2
-                            className="h-3 w-3 flex-shrink-0 text-primary"
-                            title="소스 표시 (읽기 전용)"
-                          />
-                        ) : (
-                          <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-                        )}
-
-                        <Input
-                          value={col.title}
-                          onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
-                          placeholder="제목"
-                          className="h-6 flex-1 text-xs"
-                        />
-
-                        {!col.isSourceDisplay && (
-                          <button
-                            type="button"
-                            onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
-                            className={cn(
-                              "rounded p-1 hover:bg-muted/80",
-                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
-                            )}
-                            title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
-                          >
-                            {col.hidden ? (
-                              <EyeOff className="h-3 w-3" />
-                            ) : (
-                              <Eye className="h-3 w-3" />
-                            )}
-                          </button>
-                        )}
-
-                        {!col.isSourceDisplay && (
-                          <Checkbox
-                            checked={col.editable ?? true}
-                            onCheckedChange={(checked) =>
-                              updateColumnProp(col.key, "editable", !!checked)
-                            }
-                            title="편집 가능"
-                          />
-                        )}
-
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => {
-                            if (col.isSourceDisplay) {
-                              toggleSourceDisplayColumn({
-                                columnName: col.key,
-                                displayName: col.title,
-                              });
-                            } else {
-                              toggleInputColumn({ columnName: col.key, displayName: col.title });
-                            }
-                          }}
-                          className="text-destructive h-6 w-6 p-0"
-                        >
-                          <Trash2 className="h-3 w-3" />
-                        </Button>
-                      </div>
-
-                      {/* 확장 상세 */}
-                      {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
-                          <div className="space-y-1">
-                            <Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
-                            <Input
-                              value={col.width || "auto"}
-                              onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
-                              placeholder="auto, 100px, 20%"
-                              className="h-6 text-xs"
-                            />
-                          </div>
-                        </div>
-                      )}
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
                     </div>
-                  ))}
+
+                    {/* 확장 상세 */}
+                    {!col.isSourceDisplay && expandedColumn === col.key && (
+                      <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
+                        <div className="space-y-1">
+                          <p className="text-[10px] text-muted-foreground">컬럼 너비</p>
+                          <Input
+                            value={col.width || "auto"}
+                            onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
+                            placeholder="auto, 100px, 20%"
+                            className="h-6 text-xs"
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+                  </div>
                 </div>
-              </div>
-            </>
+              </CollapsibleContent>
+            </Collapsible>
           )}
         </TabsContent>
       </Tabs>
diff --git a/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx b/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
index e492a13b..a5ef20c5 100644
--- a/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
@@ -3,13 +3,12 @@
 /**
  * BOM 트리 뷰 설정 패널
  *
- * V2BomItemEditorConfigPanel 구조 기반:
- * - 기본 탭: 디테일 테이블 + 엔티티 선택 + 트리 설정
+ * 토스식 단계별 UX:
+ * - 기본 탭: 디테일 테이블 → 트리 구조 → 엔티티 → 표시 옵션 → 고급(이력/버전)
  * - 컬럼 탭: 소스 표시 컬럼 + 디테일 컬럼 + 선택된 컬럼 상세
  */
 
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -17,11 +16,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
 import {
   Database,
   Link2,
@@ -35,6 +36,7 @@ import {
   Check,
   ChevronsUpDown,
   GitBranch,
+  Settings,
 } from "lucide-react";
 import {
   Command,
@@ -133,18 +135,21 @@ export function V2BomTreeConfigPanel({
   const currentTableName = screenTableName || propCurrentTableName;
 
   const config: BomTreeConfig = useMemo(
-    () => ({
-      columns: [],
-      ...propConfig,
-      dataSource: { ...propConfig?.dataSource },
-      features: {
-        showExpandAll: true,
-        showHeader: true,
-        showQuantity: true,
-        showLossRate: true,
-        ...propConfig?.features,
-      },
-    }),
+    () => {
+      const { columns: propColumns, ...rest } = propConfig || {} as BomTreeConfig;
+      return {
+        ...rest,
+        columns: propColumns || [],
+        dataSource: { ...propConfig?.dataSource },
+        features: {
+          showExpandAll: true,
+          showHeader: true,
+          showQuantity: true,
+          showLossRate: true,
+          ...propConfig?.features,
+        },
+      };
+    },
     [propConfig],
   );
 
@@ -159,6 +164,10 @@ export function V2BomTreeConfigPanel({
   const [loadingRelations, setLoadingRelations] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
   const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
+  const [displayOptionsOpen, setDisplayOptionsOpen] = useState(false);
+  const [columnSelectOpen, setColumnSelectOpen] = useState(false);
+  const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
   const updateConfig = useCallback(
     (updates: Partial<BomTreeConfig>) => {
@@ -399,7 +408,6 @@ export function V2BomTreeConfigPanel({
     });
   };
 
-  // FK/시스템 컬럼 제외한 표시 가능 컬럼
   const displayableColumns = useMemo(() => {
     const fkColumn = config.dataSource?.foreignKey;
     const systemCols = ["id", "created_at", "updated_at", "created_by", "updated_by", "company_code", "created_date"];
@@ -408,7 +416,6 @@ export function V2BomTreeConfigPanel({
     );
   }, [detailTableColumns, config.dataSource?.foreignKey]);
 
-  // FK 후보 컬럼
   const fkCandidateColumns = useMemo(() => {
     const systemCols = ["created_at", "updated_at", "created_by", "updated_by", "company_code", "created_date"];
     return detailTableColumns.filter((c) => !systemCols.includes(c.columnName));
@@ -429,8 +436,11 @@ export function V2BomTreeConfigPanel({
         {/* ─── 기본 설정 탭 ─── */}
         <TabsContent value="basic" className="mt-4 space-y-4">
           {/* 디테일 테이블 */}
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">디테일 테이블</Label>
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Database className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">BOM 디테일을 어디에서 가져오나요?</span>
+            </div>
 
             <div
               className={cn(
@@ -479,7 +489,7 @@ export function V2BomTreeConfigPanel({
                   <CommandInput placeholder="테이블 검색..." className="text-xs" />
                   <CommandList className="max-h-60">
                     <CommandEmpty className="py-3 text-center text-xs">
-                      테이블을 찾을 수 없습니다.
+                      테이블을 찾을 수 없어요.
                     </CommandEmpty>
 
                     {relatedTables.length > 0 && (
@@ -538,29 +548,38 @@ export function V2BomTreeConfigPanel({
                 </Command>
               </PopoverContent>
             </Popover>
+
+            {/* 화면 메인 테이블 참고 */}
+            {currentTableName && (
+              <div className="rounded-md border bg-background p-3">
+                <p className="text-xs text-muted-foreground">화면 메인 테이블</p>
+                <p className="mt-0.5 text-sm font-medium">{currentTableName}</p>
+                <p className="text-[10px] text-muted-foreground mt-0.5">
+                  컬럼 {detailTableColumns.length}개 / 엔티티 {entityColumns.length}개
+                </p>
+              </div>
+            )}
           </div>
 
-          <Separator />
-
           {/* 트리 구조 설정 */}
-          <div className="space-y-2">
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
             <div className="flex items-center gap-2">
-              <GitBranch className="h-4 w-4" />
-              <Label className="text-xs font-medium">트리 구조 설정</Label>
+              <GitBranch className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">트리 구조는 어떻게 만드나요?</span>
             </div>
-            <p className="text-muted-foreground text-[10px]">
-              메인 FK와 부모-자식 계층 FK를 선택하세요
+            <p className="text-[11px] text-muted-foreground">
+              메인 FK와 부모-자식 계층 FK를 선택하면 트리 구조가 만들어져요
             </p>
 
             {fkCandidateColumns.length > 0 ? (
-              <div className="space-y-2">
-                <div className="space-y-1">
-                  <Label className="text-[10px]">FK 컬럼 (메인 테이블 참조)</Label>
+              <div className="space-y-3">
+                <div>
+                  <p className="mb-1.5 text-xs text-muted-foreground">FK 컬럼 (메인 테이블 참조)</p>
                   <Select
                     value={config.foreignKey || ""}
                     onValueChange={(value) => updateConfig({ foreignKey: value })}
                   >
-                    <SelectTrigger className="h-8 text-xs">
+                    <SelectTrigger className="h-8 text-sm">
                       <SelectValue placeholder="FK 컬럼 선택" />
                     </SelectTrigger>
                     <SelectContent>
@@ -577,13 +596,13 @@ export function V2BomTreeConfigPanel({
                     </SelectContent>
                   </Select>
                 </div>
-                <div className="space-y-1">
-                  <Label className="text-[10px]">부모 키 컬럼 (자기 참조 FK)</Label>
+                <div>
+                  <p className="mb-1.5 text-xs text-muted-foreground">부모 키 컬럼 (자기 참조 FK)</p>
                   <Select
                     value={config.parentKey || ""}
                     onValueChange={(value) => updateConfig({ parentKey: value })}
                   >
-                    <SelectTrigger className="h-8 text-xs">
+                    <SelectTrigger className="h-8 text-sm">
                       <SelectValue placeholder="부모 키 컬럼 선택" />
                     </SelectTrigger>
                     <SelectContent>
@@ -602,21 +621,23 @@ export function V2BomTreeConfigPanel({
                 </div>
               </div>
             ) : (
-              <div className="rounded border border-border bg-muted p-2">
-                <p className="text-[10px] text-muted-foreground">
-                  {loadingColumns ? "로딩 중..." : "디테일 테이블을 먼저 선택하세요"}
+              <div className="rounded-md border-2 border-dashed p-4 text-center">
+                <GitBranch className="mx-auto mb-2 h-8 w-8 opacity-30 text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  {loadingColumns ? "컬럼 정보를 불러오고 있어요..." : "디테일 테이블을 먼저 선택해주세요"}
                 </p>
               </div>
             )}
           </div>
 
-          <Separator />
-
           {/* 엔티티 선택 (품목 참조) */}
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">엔티티 선택 (품목 참조)</Label>
-            <p className="text-muted-foreground text-[10px]">
-              트리 노드에 표시할 품목 정보의 소스 엔티티
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Link2 className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">어떤 품목 정보를 표시하나요?</span>
+            </div>
+            <p className="text-[11px] text-muted-foreground">
+              트리 노드에 표시할 품목 정보의 소스 엔티티를 선택해주세요
             </p>
 
             {entityColumns.length > 0 ? (
@@ -625,7 +646,7 @@ export function V2BomTreeConfigPanel({
                 onValueChange={handleEntityColumnSelect}
                 disabled={!config.detailTable}
               >
-                <SelectTrigger className="h-8 text-xs">
+                <SelectTrigger className="h-8 text-sm">
                   <SelectValue placeholder="엔티티 컬럼 선택" />
                 </SelectTrigger>
                 <SelectContent>
@@ -642,426 +663,507 @@ export function V2BomTreeConfigPanel({
                 </SelectContent>
               </Select>
             ) : (
-              <div className="rounded border border-border bg-muted p-2">
-                <p className="text-[10px] text-muted-foreground">
+              <div className="rounded-md border-2 border-dashed p-4 text-center">
+                <p className="text-sm text-muted-foreground">
                   {loadingColumns
-                    ? "로딩 중..."
+                    ? "컬럼 정보를 불러오고 있어요..."
                     : !config.detailTable
-                      ? "디테일 테이블을 먼저 선택하세요"
-                      : "엔티티 타입 컬럼이 없습니다"}
+                      ? "디테일 테이블을 먼저 선택해주세요"
+                      : "엔티티 타입 컬럼이 없어요"}
                 </p>
               </div>
             )}
 
             {config.dataSource?.sourceTable && (
-              <div className="space-y-1 rounded border border-emerald-200 bg-emerald-50 p-2">
-                <p className="text-xs font-medium text-emerald-700">선택된 엔티티</p>
-                <div className="text-[10px] text-emerald-600">
-                  <p>참조 테이블: {config.dataSource.sourceTable}</p>
-                  <p>FK 컬럼: {config.dataSource.foreignKey}</p>
-                </div>
+              <div className="rounded-md border bg-background p-3 space-y-1">
+                <p className="text-xs text-muted-foreground">선택된 엔티티</p>
+                <p className="text-sm font-medium">{config.dataSource.sourceTable}</p>
+                <p className="text-[11px] text-muted-foreground">
+                  {config.dataSource.foreignKey} 컬럼에서 참조해요
+                </p>
               </div>
             )}
           </div>
 
-          <Separator />
-
-          {/* 이력/버전 테이블 설정 */}
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">이력/버전 관리</Label>
-            <p className="text-muted-foreground text-[10px]">
-              BOM 변경 이력과 버전 관리에 사용할 테이블을 선택하세요
-            </p>
-
-            <div className="space-y-2">
-              <div className="space-y-1">
+          {/* 표시 옵션 - Collapsible + Badge */}
+          <Collapsible open={displayOptionsOpen} onOpenChange={setDisplayOptionsOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+              >
                 <div className="flex items-center gap-2">
-                  <Checkbox
-                    id="tree-showHistory"
-                    checked={config.features?.showHistory ?? true}
-                    onCheckedChange={(checked) => updateFeatures("showHistory", !!checked)}
-                  />
-                  <Label htmlFor="tree-showHistory" className="text-[10px]">이력 관리 사용</Label>
+                  <Eye className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">표시 옵션</span>
+                  <Badge
+                    variant="secondary"
+                    className="text-[10px] h-5"
+                  >
+                    {[
+                      config.features?.showExpandAll ?? true,
+                      config.features?.showHeader ?? true,
+                      config.features?.showQuantity ?? true,
+                      config.features?.showLossRate ?? true,
+                    ].filter(Boolean).length}
+                    /4
+                  </Badge>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    displayOptionsOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">전체 펼치기/접기</p>
+                    <p className="text-[11px] text-muted-foreground">트리를 한번에 펼치거나 접을 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showExpandAll ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showExpandAll", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">헤더 정보</p>
+                    <p className="text-[11px] text-muted-foreground">트리 상단에 요약 정보를 표시해요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showHeader ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showHeader", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">수량 표시</p>
+                    <p className="text-[11px] text-muted-foreground">각 노드에 수량 정보를 보여줘요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showQuantity ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showQuantity", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">로스율 표시</p>
+                    <p className="text-[11px] text-muted-foreground">생산 손실율을 함께 보여줘요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showLossRate ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showLossRate", checked)}
+                  />
                 </div>
-                {(config.features?.showHistory ?? true) && (
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        disabled={loadingTables}
-                        className="h-8 w-full justify-between text-xs"
-                      >
-                        {config.historyTable
-                          ? allTables.find((t) => t.tableName === config.historyTable)?.displayName || config.historyTable
-                          : "이력 테이블 선택..."}
-                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      className="p-0"
-                      style={{ width: "var(--radix-popover-trigger-width)" }}
-                      align="start"
-                    >
-                      <Command>
-                        <CommandInput placeholder="테이블 검색..." className="text-xs" />
-                        <CommandList className="max-h-48">
-                          <CommandEmpty className="py-3 text-center text-xs">
-                            테이블을 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {allTables.map((table) => (
-                              <CommandItem
-                                key={table.tableName}
-                                value={`${table.tableName} ${table.displayName}`}
-                                onSelect={() => updateConfig({ historyTable: table.tableName })}
-                                className="text-xs"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-3 w-3",
-                                    config.historyTable === table.tableName ? "opacity-100" : "opacity-0",
-                                  )}
-                                />
-                                <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
-                                <span>{table.displayName}</span>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                )}
               </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-              <div className="space-y-1">
+          {/* 고급 설정 (이력/버전 관리) - Collapsible + Badge */}
+          <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+              >
                 <div className="flex items-center gap-2">
-                  <Checkbox
-                    id="tree-showVersion"
-                    checked={config.features?.showVersion ?? true}
-                    onCheckedChange={(checked) => updateFeatures("showVersion", !!checked)}
-                  />
-                  <Label htmlFor="tree-showVersion" className="text-[10px]">버전 관리 사용</Label>
+                  <Settings className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">고급 설정</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    2개
+                  </Badge>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    advancedOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-4 space-y-4">
+                {/* 이력 관리 */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between py-1">
+                    <div>
+                      <p className="text-sm">이력 관리</p>
+                      <p className="text-[11px] text-muted-foreground">BOM 변경 이력을 추적해요</p>
+                    </div>
+                    <Switch
+                      checked={config.features?.showHistory ?? true}
+                      onCheckedChange={(checked) => updateFeatures("showHistory", checked)}
+                    />
+                  </div>
+                  {(config.features?.showHistory ?? true) && (
+                    <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                      <p className="mb-1.5 text-xs text-muted-foreground">이력 테이블</p>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            disabled={loadingTables}
+                            className="h-8 w-full justify-between text-xs"
+                          >
+                            {config.historyTable
+                              ? allTables.find((t) => t.tableName === config.historyTable)?.displayName || config.historyTable
+                              : "이력 테이블 선택..."}
+                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="p-0"
+                          style={{ width: "var(--radix-popover-trigger-width)" }}
+                          align="start"
+                        >
+                          <Command>
+                            <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                            <CommandList className="max-h-48">
+                              <CommandEmpty className="py-3 text-center text-xs">
+                                테이블을 찾을 수 없어요.
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {allTables.map((table) => (
+                                  <CommandItem
+                                    key={table.tableName}
+                                    value={`${table.tableName} ${table.displayName}`}
+                                    onSelect={() => updateConfig({ historyTable: table.tableName })}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        config.historyTable === table.tableName ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
+                                    <span>{table.displayName}</span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  )}
                 </div>
-                {(config.features?.showVersion ?? true) && (
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        disabled={loadingTables}
-                        className="h-8 w-full justify-between text-xs"
-                      >
-                        {config.versionTable
-                          ? allTables.find((t) => t.tableName === config.versionTable)?.displayName || config.versionTable
-                          : "버전 테이블 선택..."}
-                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      className="p-0"
-                      style={{ width: "var(--radix-popover-trigger-width)" }}
-                      align="start"
-                    >
-                      <Command>
-                        <CommandInput placeholder="테이블 검색..." className="text-xs" />
-                        <CommandList className="max-h-48">
-                          <CommandEmpty className="py-3 text-center text-xs">
-                            테이블을 찾을 수 없습니다.
-                          </CommandEmpty>
-                          <CommandGroup>
-                            {allTables.map((table) => (
-                              <CommandItem
-                                key={table.tableName}
-                                value={`${table.tableName} ${table.displayName}`}
-                                onSelect={() => updateConfig({ versionTable: table.tableName })}
-                                className="text-xs"
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-3 w-3",
-                                    config.versionTable === table.tableName ? "opacity-100" : "opacity-0",
-                                  )}
-                                />
-                                <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
-                                <span>{table.displayName}</span>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                )}
-              </div>
-            </div>
-          </div>
 
-          <Separator />
-
-          {/* 표시 옵션 */}
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">표시 옵션</Label>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="tree-showExpandAll"
-                  checked={config.features?.showExpandAll ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showExpandAll", !!checked)}
-                />
-                <label htmlFor="tree-showExpandAll" className="text-xs">
-                  전체 펼치기/접기
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="tree-showHeader"
-                  checked={config.features?.showHeader ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showHeader", !!checked)}
-                />
-                <label htmlFor="tree-showHeader" className="text-xs">
-                  헤더 정보
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="tree-showQuantity"
-                  checked={config.features?.showQuantity ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showQuantity", !!checked)}
-                />
-                <label htmlFor="tree-showQuantity" className="text-xs">
-                  수량 표시
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="tree-showLossRate"
-                  checked={config.features?.showLossRate ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showLossRate", !!checked)}
-                />
-                <label htmlFor="tree-showLossRate" className="text-xs">
-                  로스율 표시
-                </label>
-              </div>
-            </div>
-          </div>
-
-          {/* 메인 화면 테이블 참고 */}
-          {currentTableName && (
-            <>
-              <Separator />
-              <div className="space-y-2">
-                <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-                <div className="rounded border border-border bg-muted p-2">
-                  <p className="text-xs font-medium text-foreground">{currentTableName}</p>
-                  <p className="text-[10px] text-muted-foreground">
-                    컬럼 {detailTableColumns.length}개 / 엔티티 {entityColumns.length}개
-                  </p>
+                {/* 버전 관리 */}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between py-1">
+                    <div>
+                      <p className="text-sm">버전 관리</p>
+                      <p className="text-[11px] text-muted-foreground">BOM 버전별로 관리해요</p>
+                    </div>
+                    <Switch
+                      checked={config.features?.showVersion ?? true}
+                      onCheckedChange={(checked) => updateFeatures("showVersion", checked)}
+                    />
+                  </div>
+                  {(config.features?.showVersion ?? true) && (
+                    <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                      <p className="mb-1.5 text-xs text-muted-foreground">버전 테이블</p>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="outline"
+                            role="combobox"
+                            disabled={loadingTables}
+                            className="h-8 w-full justify-between text-xs"
+                          >
+                            {config.versionTable
+                              ? allTables.find((t) => t.tableName === config.versionTable)?.displayName || config.versionTable
+                              : "버전 테이블 선택..."}
+                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="p-0"
+                          style={{ width: "var(--radix-popover-trigger-width)" }}
+                          align="start"
+                        >
+                          <Command>
+                            <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                            <CommandList className="max-h-48">
+                              <CommandEmpty className="py-3 text-center text-xs">
+                                테이블을 찾을 수 없어요.
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {allTables.map((table) => (
+                                  <CommandItem
+                                    key={table.tableName}
+                                    value={`${table.tableName} ${table.displayName}`}
+                                    onSelect={() => updateConfig({ versionTable: table.tableName })}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        config.versionTable === table.tableName ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
+                                    <span>{table.displayName}</span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
+                  )}
                 </div>
               </div>
-            </>
-          )}
+            </CollapsibleContent>
+          </Collapsible>
         </TabsContent>
 
         {/* ─── 컬럼 설정 탭 ─── */}
         <TabsContent value="columns" className="mt-4 space-y-4">
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">컬럼 선택</Label>
-            <p className="text-muted-foreground text-[10px]">
-              트리 노드에 표시할 소스/디테일 컬럼을 선택하세요
-            </p>
-
-            {/* 소스 테이블 컬럼 (표시용) */}
-            {config.dataSource?.sourceTable && (
-              <>
-                <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
-                  <Link2 className="h-3 w-3" />
-                  소스 테이블 ({config.dataSource.sourceTable}) - 표시용
+          {/* 컬럼 선택 - Collapsible + Badge */}
+          <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+              >
+                <div className="flex items-center gap-2">
+                  <Database className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">컬럼 선택</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    {config.columns.length}개 선택됨
+                  </Badge>
                 </div>
-                {loadingSourceColumns ? (
+                <ChevronDown
+                  className={cn(
+                    "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                    columnSelectOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                <p className="text-[11px] text-muted-foreground">
+                  소스 테이블 컬럼은 표시용, 디테일 테이블 컬럼은 직접 컬럼이에요
+                </p>
+
+                {/* 소스 테이블 컬럼 (표시용) */}
+                {config.dataSource?.sourceTable && (
+                  <>
+                    <div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
+                      <Link2 className="h-3 w-3" />
+                      소스 테이블 ({config.dataSource.sourceTable}) - 표시용
+                    </div>
+                    {loadingSourceColumns ? (
+                      <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
+                    ) : sourceTableColumns.length === 0 ? (
+                      <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
+                    ) : (
+                      <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
+                        {sourceTableColumns.map((column) => (
+                          <div
+                            key={`source-${column.columnName}`}
+                            className={cn(
+                              "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
+                              isSourceColumnSelected(column.columnName) && "bg-primary/10",
+                            )}
+                            onClick={() => toggleSourceDisplayColumn(column)}
+                          >
+                            <Checkbox
+                              checked={isSourceColumnSelected(column.columnName)}
+                              onCheckedChange={() => toggleSourceDisplayColumn(column)}
+                              className="pointer-events-none h-3.5 w-3.5"
+                            />
+                            <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                            <span className="truncate text-xs">{column.displayName}</span>
+                            <span className="ml-auto text-[10px] text-primary/80">표시</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+
+                {/* 디테일 테이블 컬럼 */}
+                <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
+                  <Database className="h-3 w-3" />
+                  디테일 테이블 ({config.detailTable || "미선택"}) - 직접 컬럼
+                </div>
+                {loadingColumns ? (
                   <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-                ) : sourceTableColumns.length === 0 ? (
-                  <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
+                ) : displayableColumns.length === 0 ? (
+                  <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
-                    {sourceTableColumns.map((column) => (
+                  <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
+                    {displayableColumns.map((column) => (
                       <div
-                        key={`source-${column.columnName}`}
+                        key={`detail-${column.columnName}`}
                         className={cn(
-                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
-                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
+                          "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                          isColumnAdded(column.columnName) && "bg-primary/10",
                         )}
-                        onClick={() => toggleSourceDisplayColumn(column)}
+                        onClick={() => toggleDetailColumn(column)}
                       >
                         <Checkbox
-                          checked={isSourceColumnSelected(column.columnName)}
-                          onCheckedChange={() => toggleSourceDisplayColumn(column)}
+                          checked={isColumnAdded(column.columnName)}
+                          onCheckedChange={() => toggleDetailColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="ml-auto text-[10px] text-primary/80">표시</span>
+                        <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
                       </div>
                     ))}
                   </div>
                 )}
-              </>
-            )}
-
-            {/* 디테일 테이블 컬럼 */}
-            <div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
-              <Database className="h-3 w-3" />
-              디테일 테이블 ({config.detailTable || "미선택"}) - 직접 컬럼
-            </div>
-            {loadingColumns ? (
-              <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-            ) : displayableColumns.length === 0 ? (
-              <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
-            ) : (
-              <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
-                {displayableColumns.map((column) => (
-                  <div
-                    key={`detail-${column.columnName}`}
-                    className={cn(
-                      "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                      isColumnAdded(column.columnName) && "bg-primary/10",
-                    )}
-                    onClick={() => toggleDetailColumn(column)}
-                  >
-                    <Checkbox
-                      checked={isColumnAdded(column.columnName)}
-                      onCheckedChange={() => toggleDetailColumn(column)}
-                      className="pointer-events-none h-3.5 w-3.5"
-                    />
-                    <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-                    <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
-                  </div>
-                ))}
               </div>
-            )}
-          </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-          {/* 선택된 컬럼 상세 */}
+          {/* 선택된 컬럼 상세 - Collapsible + Badge */}
           {config.columns.length > 0 && (
-            <>
-              <Separator />
-              <div className="space-y-2">
-                <Label className="text-xs font-medium">
-                  선택된 컬럼 ({config.columns.length}개)
-                  <span className="text-muted-foreground ml-2 font-normal">드래그로 순서 변경</span>
-                </Label>
-                <div className="max-h-48 space-y-1 overflow-y-auto">
-                  {config.columns.map((col, index) => (
-                    <div key={col.key} className="space-y-1">
-                      <div
-                        className={cn(
-                          "flex items-center gap-2 rounded-md border p-2",
-                          col.isSourceDisplay
-                            ? "border-primary/20 bg-primary/10/50"
-                            : "border-border bg-muted/30",
-                          col.hidden && "opacity-50",
-                        )}
-                        draggable
-                        onDragStart={(e) => e.dataTransfer.setData("columnIndex", String(index))}
-                        onDragOver={(e) => e.preventDefault()}
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
-                          if (fromIndex !== index) {
-                            const newColumns = [...config.columns];
-                            const [movedCol] = newColumns.splice(fromIndex, 1);
-                            newColumns.splice(index, 0, movedCol);
-                            updateConfig({ columns: newColumns });
+            <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div className="flex items-center gap-2">
+                    <GripVertical className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">선택된 컬럼</span>
+                    <Badge variant="secondary" className="text-[10px] h-5">
+                      {config.columns.length}개
+                    </Badge>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                      selectedColumnsOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                  <span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
+                  <div className="max-h-48 space-y-1 overflow-y-auto">
+                {config.columns.map((col, index) => (
+                  <div key={col.key} className="space-y-1">
+                    <div
+                      className={cn(
+                        "flex items-center gap-2 rounded-md border p-2",
+                        col.isSourceDisplay
+                          ? "border-primary/20 bg-primary/10/50"
+                          : "border-border bg-muted/30",
+                        col.hidden && "opacity-50",
+                      )}
+                      draggable
+                      onDragStart={(e) => e.dataTransfer.setData("columnIndex", String(index))}
+                      onDragOver={(e) => e.preventDefault()}
+                      onDrop={(e) => {
+                        e.preventDefault();
+                        const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
+                        if (fromIndex !== index) {
+                          const newColumns = [...config.columns];
+                          const [movedCol] = newColumns.splice(fromIndex, 1);
+                          newColumns.splice(index, 0, movedCol);
+                          updateConfig({ columns: newColumns });
+                        }
+                      }}
+                    >
+                      <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
+
+                      {!col.isSourceDisplay && (
+                        <button
+                          type="button"
+                          onClick={() =>
+                            setExpandedColumn(expandedColumn === col.key ? null : col.key)
+                          }
+                          className="rounded p-0.5 hover:bg-muted/80"
+                        >
+                          {expandedColumn === col.key ? (
+                            <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                          ) : (
+                            <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          )}
+                        </button>
+                      )}
+
+                      {col.isSourceDisplay ? (
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                      ) : (
+                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                      )}
+
+                      <Input
+                        value={col.title}
+                        onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
+                        placeholder="제목"
+                        className="h-6 flex-1 text-xs"
+                      />
+
+                      {!col.isSourceDisplay && (
+                        <button
+                          type="button"
+                          onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
+                          className={cn(
+                            "rounded p-1 hover:bg-muted/80",
+                            col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
+                          )}
+                          title={col.hidden ? "히든" : "표시됨"}
+                        >
+                          {col.hidden ? (
+                            <EyeOff className="h-3 w-3" />
+                          ) : (
+                            <Eye className="h-3 w-3" />
+                          )}
+                        </button>
+                      )}
+
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          if (col.isSourceDisplay) {
+                            toggleSourceDisplayColumn({ columnName: col.key, displayName: col.title });
+                          } else {
+                            toggleDetailColumn({ columnName: col.key, displayName: col.title });
                           }
                         }}
+                        className="text-destructive h-6 w-6 p-0"
                       >
-                        <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
-
-                        {!col.isSourceDisplay && (
-                          <button
-                            type="button"
-                            onClick={() =>
-                              setExpandedColumn(expandedColumn === col.key ? null : col.key)
-                            }
-                            className="rounded p-0.5 hover:bg-muted/80"
-                          >
-                            {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
-                            ) : (
-                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-                            )}
-                          </button>
-                        )}
-
-                        {col.isSourceDisplay ? (
-                          <Link2 className="h-3 w-3 flex-shrink-0 text-primary" title="소스 표시" />
-                        ) : (
-                          <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-                        )}
-
-                        <Input
-                          value={col.title}
-                          onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
-                          placeholder="제목"
-                          className="h-6 flex-1 text-xs"
-                        />
-
-                        {!col.isSourceDisplay && (
-                          <button
-                            type="button"
-                            onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
-                            className={cn(
-                              "rounded p-1 hover:bg-muted/80",
-                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
-                            )}
-                            title={col.hidden ? "히든" : "표시됨"}
-                          >
-                            {col.hidden ? (
-                              <EyeOff className="h-3 w-3" />
-                            ) : (
-                              <Eye className="h-3 w-3" />
-                            )}
-                          </button>
-                        )}
-
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => {
-                            if (col.isSourceDisplay) {
-                              toggleSourceDisplayColumn({ columnName: col.key, displayName: col.title });
-                            } else {
-                              toggleDetailColumn({ columnName: col.key, displayName: col.title });
-                            }
-                          }}
-                          className="text-destructive h-6 w-6 p-0"
-                        >
-                          <Trash2 className="h-3 w-3" />
-                        </Button>
-                      </div>
-
-                      {/* 확장 상세 */}
-                      {!col.isSourceDisplay && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
-                          <div className="space-y-1">
-                            <Label className="text-[10px] text-muted-foreground">컬럼 너비</Label>
-                            <Input
-                              value={col.width || "auto"}
-                              onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
-                              placeholder="auto, 100px, 20%"
-                              className="h-6 text-xs"
-                            />
-                          </div>
-                        </div>
-                      )}
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
                     </div>
-                  ))}
+
+                    {/* 확장 상세 */}
+                    {!col.isSourceDisplay && expandedColumn === col.key && (
+                      <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
+                        <div className="space-y-1">
+                          <p className="text-[10px] text-muted-foreground">컬럼 너비</p>
+                          <Input
+                            value={col.width || "auto"}
+                            onChange={(e) => updateColumnProp(col.key, "width", e.target.value)}
+                            placeholder="auto, 100px, 20%"
+                            className="h-6 text-xs"
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+                  </div>
                 </div>
-              </div>
-            </>
+              </CollapsibleContent>
+            </Collapsible>
           )}
         </TabsContent>
       </Tabs>
diff --git a/frontend/components/v2/config-panels/V2ButtonConfigPanel.tsx b/frontend/components/v2/config-panels/V2ButtonConfigPanel.tsx
new file mode 100644
index 00000000..777c705b
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2ButtonConfigPanel.tsx
@@ -0,0 +1,1378 @@
+"use client";
+
+/**
+ * V2Button 설정 패널
+ * 토스식 단계별 UX: 액션 유형 카드 선택 -> 표시 모드 카드 -> 액션별 세부 설정 -> 고급 설정(접힘)
+ */
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import {
+  Save,
+  Trash2,
+  Pencil,
+  ArrowRight,
+  Maximize2,
+  SendHorizontal,
+  Download,
+  Upload,
+  Zap,
+  Settings,
+  ChevronDown,
+  Check,
+  Plus,
+  X,
+  Type,
+  Image,
+  Columns,
+  ScanLine,
+  Truck,
+  Send,
+  Copy,
+  FileSpreadsheet,
+  ChevronsUpDown,
+  Info,
+  Workflow,
+} from "lucide-react";
+import { icons as allLucideIcons } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import {
+  actionIconMap,
+  noIconActions,
+  NO_ICON_MESSAGE,
+  iconSizePresets,
+  getLucideIcon,
+  addToIconMap,
+  getDefaultIconForAction,
+  sanitizeSvg,
+} from "@/lib/button-icon-map";
+import { ImprovedButtonControlConfigPanel } from "@/components/screen/config-panels/ImprovedButtonControlConfigPanel";
+import { FlowVisibilityConfigPanel } from "@/components/screen/config-panels/FlowVisibilityConfigPanel";
+import type { ComponentData } from "@/types/screen";
+
+// ─── 액션 유형 카드 정의 ───
+const ACTION_TYPE_CARDS = [
+  {
+    value: "save",
+    icon: Save,
+    title: "저장",
+    description: "데이터를 저장해요",
+  },
+  {
+    value: "delete",
+    icon: Trash2,
+    title: "삭제",
+    description: "데이터를 삭제해요",
+  },
+  {
+    value: "edit",
+    icon: Pencil,
+    title: "편집",
+    description: "데이터를 수정해요",
+  },
+  {
+    value: "modal",
+    icon: Maximize2,
+    title: "모달 열기",
+    description: "팝업 화면을 열어요",
+  },
+  {
+    value: "navigate",
+    icon: ArrowRight,
+    title: "페이지 이동",
+    description: "다른 화면으로 이동해요",
+  },
+  {
+    value: "transferData",
+    icon: SendHorizontal,
+    title: "데이터 전달",
+    description: "다른 테이블로 전달해요",
+  },
+  {
+    value: "excel_download",
+    icon: Download,
+    title: "엑셀 다운로드",
+    description: "데이터를 엑셀로 받아요",
+  },
+  {
+    value: "excel_upload",
+    icon: Upload,
+    title: "엑셀 업로드",
+    description: "엑셀 파일을 올려요",
+  },
+  {
+    value: "quickInsert",
+    icon: Zap,
+    title: "즉시 저장",
+    description: "바로 저장해요",
+  },
+  {
+    value: "approval",
+    icon: Check,
+    title: "결재 요청",
+    description: "결재를 요청해요",
+  },
+  {
+    value: "control",
+    icon: Settings,
+    title: "제어 흐름",
+    description: "흐름을 제어해요",
+  },
+  {
+    value: "event",
+    icon: Send,
+    title: "이벤트 발송",
+    description: "이벤트를 보내요",
+  },
+  {
+    value: "copy",
+    icon: Copy,
+    title: "복사",
+    description: "데이터를 복사해요",
+  },
+  {
+    value: "barcode_scan",
+    icon: ScanLine,
+    title: "바코드 스캔",
+    description: "바코드를 스캔해요",
+  },
+  {
+    value: "operation_control",
+    icon: Truck,
+    title: "운행알림/종료",
+    description: "운행을 관리해요",
+  },
+  {
+    value: "multi_table_excel_upload",
+    icon: FileSpreadsheet,
+    title: "다중 엑셀 업로드",
+    description: "여러 테이블에 올려요",
+  },
+] as const;
+
+// ─── 표시 모드 카드 정의 ───
+const DISPLAY_MODE_CARDS = [
+  {
+    value: "text" as const,
+    icon: Type,
+    title: "텍스트",
+    description: "텍스트만 표시",
+  },
+  {
+    value: "icon" as const,
+    icon: Image,
+    title: "아이콘",
+    description: "아이콘만 표시",
+  },
+  {
+    value: "icon-text" as const,
+    icon: Columns,
+    title: "아이콘+텍스트",
+    description: "둘 다 표시",
+  },
+] as const;
+
+// ─── 버튼 변형 옵션 ───
+const VARIANT_OPTIONS = [
+  { value: "primary", label: "기본 (Primary)" },
+  { value: "secondary", label: "보조 (Secondary)" },
+  { value: "danger", label: "위험 (Danger)" },
+] as const;
+
+interface ScreenOption {
+  id: number;
+  name: string;
+  description?: string;
+}
+
+interface V2ButtonConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  component?: ComponentData;
+  currentComponent?: ComponentData;
+  onUpdateProperty?: (path: string, value: any) => void;
+  allComponents?: ComponentData[];
+  currentTableName?: string;
+  screenTableName?: string;
+  currentScreenCompanyCode?: string;
+  [key: string]: any;
+}
+
+export const V2ButtonConfigPanel: React.FC<V2ButtonConfigPanelProps> = ({
+  config,
+  onChange,
+  component,
+  currentComponent,
+  onUpdateProperty,
+  allComponents = [],
+  currentTableName,
+  screenTableName,
+  currentScreenCompanyCode,
+}) => {
+  const effectiveComponent = component || currentComponent;
+  const effectiveTableName = currentTableName || screenTableName;
+  const actionType = String(config.action?.type || "save");
+  const displayMode = (config.displayMode as "text" | "icon" | "icon-text") || "text";
+  const variant = config.variant || "primary";
+  const buttonText = config.text !== undefined ? config.text : "버튼";
+
+  // 아이콘 상태
+  const [selectedIcon, setSelectedIcon] = useState<string>(config.icon?.name || "");
+  const [selectedIconType, setSelectedIconType] = useState<"lucide" | "svg">(
+    config.icon?.type || "lucide"
+  );
+  const [iconSize, setIconSize] = useState<string>(config.icon?.size || "보통");
+
+  // UI 상태
+  const [iconSectionOpen, setIconSectionOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [lucideSearchOpen, setLucideSearchOpen] = useState(false);
+  const [lucideSearchTerm, setLucideSearchTerm] = useState("");
+  const [svgPasteOpen, setSvgPasteOpen] = useState(false);
+  const [svgInput, setSvgInput] = useState("");
+  const [svgName, setSvgName] = useState("");
+  const [svgError, setSvgError] = useState("");
+
+  // 모달 관련
+  const [screens, setScreens] = useState<ScreenOption[]>([]);
+  const [screensLoading, setScreensLoading] = useState(false);
+  const [modalScreenOpen, setModalScreenOpen] = useState(false);
+  const [modalSearchTerm, setModalSearchTerm] = useState("");
+
+  const showIconSettings = displayMode === "icon" || displayMode === "icon-text";
+  const currentActionIcons = actionIconMap[actionType] || [];
+  const isNoIconAction = noIconActions.has(actionType);
+  const customIcons: string[] = config.customIcons || [];
+  const customSvgIcons: Array<{ name: string; svg: string }> = config.customSvgIcons || [];
+
+  // 플로우 위젯 존재 여부
+  const hasFlowWidget = useMemo(() => {
+    return allComponents.some((comp: any) => {
+      const compType = comp.componentType || comp.widgetType || "";
+      return compType === "flow-widget" || compType?.toLowerCase().includes("flow");
+    });
+  }, [allComponents]);
+
+  // config 업데이트 헬퍼
+  const updateConfig = useCallback(
+    (field: string, value: any) => {
+      onChange({ ...config, [field]: value });
+    },
+    [config, onChange]
+  );
+
+  const updateActionConfig = useCallback(
+    (field: string, value: any) => {
+      const currentAction = config.action || {};
+      onChange({
+        ...config,
+        action: { ...currentAction, [field]: value },
+      });
+    },
+    [config, onChange]
+  );
+
+  // 기존 서브패널(ImprovedButtonControlConfigPanel 등)이 webTypeConfig.* 경로로 쓰므로
+  // 항상 config 기반 onChange로 통일 (onUpdateProperty는 V2 경로 불일치 문제 있음)
+  const handleUpdateProperty = useCallback(
+    (path: string, value: any) => {
+      const normalizedPath = path
+        .replace(/^componentConfig\./, "")
+        .replace(/^webTypeConfig\./, "");
+      const parts = normalizedPath.split(".");
+      const newConfig = { ...config };
+      let current: any = newConfig;
+      for (let i = 0; i < parts.length - 1; i++) {
+        if (!current[parts[i]]) current[parts[i]] = {};
+        current[parts[i]] = { ...current[parts[i]] };
+        current = current[parts[i]];
+      }
+      current[parts[parts.length - 1]] = value;
+      onChange(newConfig);
+    },
+    [config, onChange]
+  );
+
+  // prop 변경 시 아이콘 상태 동기화
+  useEffect(() => {
+    setSelectedIcon(config.icon?.name || "");
+    setSelectedIconType(config.icon?.type || "lucide");
+    setIconSize(config.icon?.size || "보통");
+  }, [config.icon?.name, config.icon?.type, config.icon?.size]);
+
+  // 화면 목록 로드 (모달 액션용)
+  useEffect(() => {
+    if (actionType !== "modal" && actionType !== "navigate") return;
+    if (screens.length > 0) return;
+
+    const loadScreens = async () => {
+      setScreensLoading(true);
+      try {
+        const response = await apiClient.get("/screen-management/screens");
+        if (response.data.success && response.data.data) {
+          const screenList = response.data.data.map((s: any) => ({
+            id: s.id || s.screenId,
+            name: s.name || s.screenName,
+            description: s.description || "",
+          }));
+          setScreens(screenList);
+        }
+      } catch {
+        setScreens([]);
+      } finally {
+        setScreensLoading(false);
+      }
+    };
+    loadScreens();
+  }, [actionType, screens.length]);
+
+  // 아이콘 선택 핸들러
+  const handleSelectIcon = (iconName: string, iconType: "lucide" | "svg" = "lucide") => {
+    setSelectedIcon(iconName);
+    setSelectedIconType(iconType);
+    updateConfig("icon", {
+      name: iconName,
+      type: iconType,
+      size: iconSize,
+    });
+  };
+
+  const revertToDefaultIcon = () => {
+    const def = getDefaultIconForAction(actionType);
+    handleSelectIcon(def.name, def.type);
+  };
+
+  // 액션 유형 변경 핸들러
+  const handleActionTypeChange = (newType: string) => {
+    const currentAction = config.action || {};
+    onChange({
+      ...config,
+      action: { ...currentAction, type: newType },
+    });
+
+    // 아이콘이 새 액션 추천에 없으면 초기화
+    const newActionIcons = actionIconMap[newType] || [];
+    if (selectedIcon && selectedIconType === "lucide" && !newActionIcons.includes(selectedIcon) && !customIcons.includes(selectedIcon)) {
+      setSelectedIcon("");
+      updateConfig("icon", undefined);
+    }
+  };
+
+  // componentData 생성 (기존 패널 재사용용)
+  // effectiveComponent가 있어도 config 변경분을 반드시 반영해야 토글 등이 동작함
+  const componentData = useMemo(() => {
+    if (effectiveComponent) {
+      return {
+        ...effectiveComponent,
+        componentConfig: config,
+        webTypeConfig: config,
+      } as ComponentData;
+    }
+    return {
+      id: "virtual",
+      type: "widget" as const,
+      position: { x: 0, y: 0 },
+      size: { width: 120, height: 40 },
+      componentConfig: config,
+      webTypeConfig: config,
+      componentType: "v2-button-primary",
+    } as ComponentData;
+  }, [effectiveComponent, config]);
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 버튼 액션 유형 선택 (가장 중요) ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">이 버튼은 어떤 동작을 하나요?</p>
+        <div className="grid grid-cols-3 gap-2">
+          {ACTION_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = actionType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => handleActionTypeChange(card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2 text-center transition-all min-h-[68px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className={cn("h-4 w-4 mb-1", isSelected ? "text-primary" : "text-muted-foreground")} />
+                <span className="text-[11px] font-medium leading-tight">{card.title}</span>
+                <span className="text-[9px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* ─── 2단계: 표시 모드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">버튼을 어떻게 표시할까요?</p>
+        <div className="grid grid-cols-3 gap-2">
+          {DISPLAY_MODE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = displayMode === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => {
+                  updateConfig("displayMode", card.value);
+                  if ((card.value === "icon" || card.value === "icon-text") && !selectedIcon) {
+                    revertToDefaultIcon();
+                  }
+                }}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className={cn("h-4 w-4 mb-1", isSelected ? "text-primary" : "text-muted-foreground")} />
+                <span className="text-xs font-medium">{card.title}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 버튼 텍스트 ─── */}
+      {(displayMode === "text" || displayMode === "icon-text") && (
+        <div>
+          <Label htmlFor="btn-text" className="mb-1.5 text-xs">
+            버튼 텍스트
+          </Label>
+          <Input
+            id="btn-text"
+            value={buttonText}
+            onChange={(e) => updateConfig("text", e.target.value)}
+            placeholder="버튼에 표시할 텍스트"
+            className="h-8 text-sm"
+          />
+        </div>
+      )}
+
+      {/* ─── 버튼 변형 ─── */}
+      <div>
+        <Label className="mb-1.5 text-xs">버튼 스타일</Label>
+        <Select value={variant} onValueChange={(v) => updateConfig("variant", v)}>
+          <SelectTrigger className="h-8 text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {VARIANT_OPTIONS.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <Separator />
+
+      {/* ─── 3단계: 액션별 세부 설정 ─── */}
+      <ActionDetailSection
+        actionType={actionType}
+        config={config}
+        updateConfig={updateConfig}
+        updateActionConfig={updateActionConfig}
+        screens={screens}
+        screensLoading={screensLoading}
+        modalScreenOpen={modalScreenOpen}
+        setModalScreenOpen={setModalScreenOpen}
+        modalSearchTerm={modalSearchTerm}
+        setModalSearchTerm={setModalSearchTerm}
+        currentTableName={effectiveTableName}
+      />
+
+      {/* ─── 아이콘 설정 (접기) ─── */}
+      {showIconSettings && (
+        <Collapsible open={iconSectionOpen} onOpenChange={setIconSectionOpen}>
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-2">
+                <Image className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">아이콘 설정</span>
+              </div>
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                  iconSectionOpen && "rotate-180"
+                )}
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+              <IconSettingsSection
+                actionType={actionType}
+                isNoIconAction={isNoIconAction}
+                currentActionIcons={currentActionIcons}
+                selectedIcon={selectedIcon}
+                selectedIconType={selectedIconType}
+                iconSize={iconSize}
+                displayMode={displayMode}
+                iconTextPosition={config.iconTextPosition || "right"}
+                iconGap={config.iconGap ?? 6}
+                customIcons={customIcons}
+                customSvgIcons={customSvgIcons}
+                lucideSearchOpen={lucideSearchOpen}
+                setLucideSearchOpen={setLucideSearchOpen}
+                lucideSearchTerm={lucideSearchTerm}
+                setLucideSearchTerm={setLucideSearchTerm}
+                svgPasteOpen={svgPasteOpen}
+                setSvgPasteOpen={setSvgPasteOpen}
+                svgInput={svgInput}
+                setSvgInput={setSvgInput}
+                svgName={svgName}
+                setSvgName={setSvgName}
+                svgError={svgError}
+                setSvgError={setSvgError}
+                onSelectIcon={handleSelectIcon}
+                onRevertToDefault={revertToDefaultIcon}
+                onIconSizeChange={(preset) => {
+                  setIconSize(preset);
+                  if (selectedIcon) {
+                    updateConfig("icon", { ...config.icon, size: preset });
+                  }
+                }}
+                onIconTextPositionChange={(pos) => updateConfig("iconTextPosition", pos)}
+                onIconGapChange={(gap) => updateConfig("iconGap", gap)}
+                onCustomIconsChange={(icons) => updateConfig("customIcons", icons)}
+                onCustomSvgIconsChange={(icons) => updateConfig("customSvgIcons", icons)}
+              />
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* ─── 고급 설정 (접기) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-4">
+            {/* 행 선택 활성화 */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <p className="text-sm font-medium">행 선택 시에만 활성화</p>
+                  <p className="text-[11px] text-muted-foreground">
+                    테이블에서 행을 선택해야만 버튼이 활성화돼요
+                  </p>
+                </div>
+                <Switch
+                  checked={config.action?.requireRowSelection || false}
+                  onCheckedChange={(checked) => updateActionConfig("requireRowSelection", checked)}
+                />
+              </div>
+
+              {config.action?.requireRowSelection && (
+                <div className="ml-4 space-y-2 border-l-2 border-primary/20 pl-3">
+                  <div>
+                    <Label className="text-xs">선택 데이터 소스</Label>
+                    <Select
+                      value={config.action?.rowSelectionSource || "auto"}
+                      onValueChange={(v) => updateActionConfig("rowSelectionSource", v)}
+                    >
+                      <SelectTrigger className="h-7 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="auto">자동 감지 (권장)</SelectItem>
+                        <SelectItem value="tableList">테이블 리스트</SelectItem>
+                        <SelectItem value="splitPanelLeft">분할 패널 좌측</SelectItem>
+                        <SelectItem value="flowWidget">플로우 위젯</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-xs">다중 선택 허용</p>
+                      <p className="text-[10px] text-muted-foreground">여러 행 선택 시에도 활성화</p>
+                    </div>
+                    <Switch
+                      checked={config.action?.allowMultiRowSelection ?? true}
+                      onCheckedChange={(checked) => updateActionConfig("allowMultiRowSelection", checked)}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* 제어 기능 */}
+            {actionType !== "excel_upload" && actionType !== "multi_table_excel_upload" && (
+              <>
+                <Separator />
+                <ImprovedButtonControlConfigPanel
+                  component={componentData}
+                  onUpdateProperty={handleUpdateProperty}
+                />
+              </>
+            )}
+
+            {/* 플로우 단계별 표시 제어 */}
+            {hasFlowWidget && (
+              <>
+                <Separator />
+                <FlowVisibilityConfigPanel
+                  component={componentData}
+                  allComponents={allComponents}
+                  onUpdateProperty={handleUpdateProperty}
+                />
+              </>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+// ─── 액션별 세부 설정 서브 컴포넌트 ───
+const ActionDetailSection: React.FC<{
+  actionType: string;
+  config: Record<string, any>;
+  updateConfig: (field: string, value: any) => void;
+  updateActionConfig: (field: string, value: any) => void;
+  screens: ScreenOption[];
+  screensLoading: boolean;
+  modalScreenOpen: boolean;
+  setModalScreenOpen: (open: boolean) => void;
+  modalSearchTerm: string;
+  setModalSearchTerm: (term: string) => void;
+  currentTableName?: string;
+}> = ({
+  actionType,
+  config,
+  updateConfig,
+  updateActionConfig,
+  screens,
+  screensLoading,
+  modalScreenOpen,
+  setModalScreenOpen,
+  modalSearchTerm,
+  setModalSearchTerm,
+  currentTableName,
+}) => {
+  const action = config.action || {};
+
+  // 성공/에러 메시지 (모든 액션 공통)
+  const commonMessageSection = (
+    <div className="space-y-2">
+      <div>
+        <Label className="text-xs">성공 메시지</Label>
+        <Input
+          value={action.successMessage || ""}
+          onChange={(e) => updateActionConfig("successMessage", e.target.value)}
+          placeholder="처리되었습니다."
+          className="h-7 text-xs"
+        />
+      </div>
+      <div>
+        <Label className="text-xs">에러 메시지</Label>
+        <Input
+          value={action.errorMessage || ""}
+          onChange={(e) => updateActionConfig("errorMessage", e.target.value)}
+          placeholder="처리 중 오류가 발생했습니다."
+          className="h-7 text-xs"
+        />
+      </div>
+    </div>
+  );
+
+  switch (actionType) {
+    case "save":
+    case "delete":
+    case "edit":
+    case "quickInsert":
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Info className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">
+              {actionType === "save" && "저장 설정"}
+              {actionType === "delete" && "삭제 설정"}
+              {actionType === "edit" && "편집 설정"}
+              {actionType === "quickInsert" && "즉시 저장 설정"}
+            </span>
+          </div>
+          {commonMessageSection}
+
+          {actionType === "delete" && (
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs font-medium">삭제 확인 팝업</p>
+                <p className="text-[10px] text-muted-foreground">삭제 전 확인 대화상자를 표시해요</p>
+              </div>
+              <Switch
+                checked={action.confirmBeforeDelete !== false}
+                onCheckedChange={(checked) => updateActionConfig("confirmBeforeDelete", checked)}
+              />
+            </div>
+          )}
+        </div>
+      );
+
+    case "modal":
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Maximize2 className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">모달 설정</span>
+          </div>
+
+          {/* 대상 화면 선택 */}
+          <div>
+            <Label className="text-xs">대상 화면</Label>
+            <Popover open={modalScreenOpen} onOpenChange={setModalScreenOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={modalScreenOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={screensLoading}
+                >
+                  {screensLoading
+                    ? "로딩 중..."
+                    : action.targetScreenId
+                      ? screens.find((s) => s.id === action.targetScreenId)?.name || `화면 #${action.targetScreenId}`
+                      : "화면 선택"}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput
+                    placeholder="화면 검색..."
+                    value={modalSearchTerm}
+                    onValueChange={setModalSearchTerm}
+                    className="text-xs"
+                  />
+                  <CommandList className="max-h-48">
+                    <CommandEmpty className="py-3 text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      {screens
+                        .filter((s) =>
+                          s.name.toLowerCase().includes(modalSearchTerm.toLowerCase()) ||
+                          s.description?.toLowerCase().includes(modalSearchTerm.toLowerCase())
+                        )
+                        .map((screen) => (
+                          <CommandItem
+                            key={screen.id}
+                            value={String(screen.id)}
+                            onSelect={() => {
+                              updateActionConfig("targetScreenId", screen.id);
+                              setModalScreenOpen(false);
+                              setModalSearchTerm("");
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3 w-3",
+                                action.targetScreenId === screen.id ? "opacity-100" : "opacity-0"
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{screen.name}</span>
+                              {screen.description && (
+                                <span className="text-[10px] text-muted-foreground">{screen.description}</span>
+                              )}
+                            </div>
+                          </CommandItem>
+                        ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 모달 제목/설명 */}
+          <div>
+            <Label className="text-xs">모달 제목</Label>
+            <Input
+              value={action.modalTitle || ""}
+              onChange={(e) => updateActionConfig("modalTitle", e.target.value)}
+              placeholder="모달 제목"
+              className="h-7 text-xs"
+            />
+          </div>
+          <div>
+            <Label className="text-xs">모달 설명</Label>
+            <Input
+              value={action.modalDescription || ""}
+              onChange={(e) => updateActionConfig("modalDescription", e.target.value)}
+              placeholder="모달 설명"
+              className="h-7 text-xs"
+            />
+          </div>
+
+          {/* 데이터 자동 전달 */}
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-medium">데이터 자동 전달</p>
+              <p className="text-[10px] text-muted-foreground">선택된 행의 데이터를 모달에 전달해요</p>
+            </div>
+            <Switch
+              checked={action.autoDetectDataSource || false}
+              onCheckedChange={(checked) => updateActionConfig("autoDetectDataSource", checked)}
+            />
+          </div>
+
+          {commonMessageSection}
+        </div>
+      );
+
+    case "navigate":
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <ArrowRight className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">이동 설정</span>
+          </div>
+          <div>
+            <Label className="text-xs">이동 대상 URL</Label>
+            <Input
+              value={action.targetUrl || ""}
+              onChange={(e) => updateActionConfig("targetUrl", e.target.value)}
+              placeholder="/admin/example"
+              className="h-7 text-xs"
+            />
+          </div>
+          {commonMessageSection}
+        </div>
+      );
+
+    case "excel_download":
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Download className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">엑셀 다운로드 설정</span>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-medium">현재 필터 적용</p>
+              <p className="text-[10px] text-muted-foreground">검색 조건이 적용된 데이터만 다운로드</p>
+            </div>
+            <Switch
+              checked={action.applyCurrentFilters !== false}
+              onCheckedChange={(checked) => updateActionConfig("applyCurrentFilters", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-medium">선택된 행만</p>
+              <p className="text-[10px] text-muted-foreground">테이블에서 선택한 행만 다운로드</p>
+            </div>
+            <Switch
+              checked={action.selectedRowsOnly || false}
+              onCheckedChange={(checked) => updateActionConfig("selectedRowsOnly", checked)}
+            />
+          </div>
+
+          {commonMessageSection}
+        </div>
+      );
+
+    case "excel_upload":
+    case "multi_table_excel_upload":
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Upload className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">
+              {actionType === "multi_table_excel_upload" ? "다중 테이블 엑셀 업로드 설정" : "엑셀 업로드 설정"}
+            </span>
+          </div>
+          {commonMessageSection}
+        </div>
+      );
+
+    case "event":
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Send className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">이벤트 설정</span>
+          </div>
+          <div>
+            <Label className="text-xs">이벤트명</Label>
+            <Input
+              value={action.eventName || ""}
+              onChange={(e) => updateActionConfig("eventName", e.target.value)}
+              placeholder="이벤트 이름"
+              className="h-7 text-xs"
+            />
+          </div>
+          {commonMessageSection}
+        </div>
+      );
+
+    default:
+      return (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Settings className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">기본 설정</span>
+          </div>
+          {commonMessageSection}
+        </div>
+      );
+  }
+};
+
+// ─── 아이콘 설정 서브 컴포넌트 ───
+const IconSettingsSection: React.FC<{
+  actionType: string;
+  isNoIconAction: boolean;
+  currentActionIcons: string[];
+  selectedIcon: string;
+  selectedIconType: "lucide" | "svg";
+  iconSize: string;
+  displayMode: string;
+  iconTextPosition: string;
+  iconGap: number;
+  customIcons: string[];
+  customSvgIcons: Array<{ name: string; svg: string }>;
+  lucideSearchOpen: boolean;
+  setLucideSearchOpen: (open: boolean) => void;
+  lucideSearchTerm: string;
+  setLucideSearchTerm: (term: string) => void;
+  svgPasteOpen: boolean;
+  setSvgPasteOpen: (open: boolean) => void;
+  svgInput: string;
+  setSvgInput: (input: string) => void;
+  svgName: string;
+  setSvgName: (name: string) => void;
+  svgError: string;
+  setSvgError: (error: string) => void;
+  onSelectIcon: (name: string, type?: "lucide" | "svg") => void;
+  onRevertToDefault: () => void;
+  onIconSizeChange: (preset: string) => void;
+  onIconTextPositionChange: (pos: string) => void;
+  onIconGapChange: (gap: number) => void;
+  onCustomIconsChange: (icons: string[]) => void;
+  onCustomSvgIconsChange: (icons: Array<{ name: string; svg: string }>) => void;
+}> = ({
+  actionType,
+  isNoIconAction,
+  currentActionIcons,
+  selectedIcon,
+  selectedIconType,
+  iconSize,
+  displayMode,
+  iconTextPosition,
+  iconGap,
+  customIcons,
+  customSvgIcons,
+  lucideSearchOpen,
+  setLucideSearchOpen,
+  lucideSearchTerm,
+  setLucideSearchTerm,
+  svgPasteOpen,
+  setSvgPasteOpen,
+  svgInput,
+  setSvgInput,
+  svgName,
+  setSvgName,
+  svgError,
+  setSvgError,
+  onSelectIcon,
+  onRevertToDefault,
+  onIconSizeChange,
+  onIconTextPositionChange,
+  onIconGapChange,
+  onCustomIconsChange,
+  onCustomSvgIconsChange,
+}) => {
+  // 추천 아이콘 영역
+  const renderIconGrid = (icons: string[], type: "lucide" | "svg" = "lucide") => (
+    <div className="grid grid-cols-4 gap-1.5">
+      {icons.map((iconName) => {
+        const Icon = getLucideIcon(iconName);
+        if (!Icon) return null;
+        return (
+          <button
+            key={iconName}
+            type="button"
+            onClick={() => onSelectIcon(iconName, type)}
+            className={cn(
+              "hover:bg-muted flex flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+              selectedIcon === iconName && selectedIconType === type
+                ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                : "border-transparent"
+            )}
+          >
+            <Icon className="h-5 w-5" />
+            <span className="text-muted-foreground truncate text-[9px]">{iconName}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div className="space-y-3">
+      {/* 추천 아이콘 */}
+      {isNoIconAction ? (
+        <div className="text-muted-foreground rounded-md border border-dashed p-3 text-center text-xs">
+          {NO_ICON_MESSAGE}
+        </div>
+      ) : (
+        <div>
+          <p className="mb-1.5 text-xs font-medium">추천 아이콘</p>
+          {renderIconGrid(currentActionIcons)}
+        </div>
+      )}
+
+      {/* 커스텀 아이콘 */}
+      {(customIcons.length > 0 || customSvgIcons.length > 0) && (
+        <>
+          <div className="flex items-center gap-2">
+            <div className="bg-border h-px flex-1" />
+            <span className="text-muted-foreground text-[10px]">커스텀 아이콘</span>
+            <div className="bg-border h-px flex-1" />
+          </div>
+          <div className="grid grid-cols-4 gap-1.5">
+            {customIcons.map((iconName) => {
+              const Icon = getLucideIcon(iconName);
+              if (!Icon) return null;
+              return (
+                <div key={`custom-${iconName}`} className="relative">
+                  <button
+                    type="button"
+                    onClick={() => onSelectIcon(iconName, "lucide")}
+                    className={cn(
+                      "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                      selectedIcon === iconName && selectedIconType === "lucide"
+                        ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                        : "border-transparent"
+                    )}
+                  >
+                    <Icon className="h-5 w-5" />
+                    <span className="text-muted-foreground truncate text-[9px]">{iconName}</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onCustomIconsChange(customIcons.filter((n) => n !== iconName));
+                      if (selectedIcon === iconName) onRevertToDefault();
+                    }}
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                  >
+                    <X className="h-2.5 w-2.5" />
+                  </button>
+                </div>
+              );
+            })}
+            {customSvgIcons.map((svgIcon) => (
+              <div key={`svg-${svgIcon.name}`} className="relative">
+                <button
+                  type="button"
+                  onClick={() => onSelectIcon(svgIcon.name, "svg")}
+                  className={cn(
+                    "hover:bg-muted flex w-full flex-col items-center gap-1 rounded-md border p-2 transition-colors",
+                    selectedIcon === svgIcon.name && selectedIconType === "svg"
+                      ? "border-primary ring-primary/30 bg-primary/5 ring-2"
+                      : "border-transparent"
+                  )}
+                >
+                  <span
+                    className="flex h-5 w-5 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                    dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgIcon.svg) }}
+                  />
+                  <span className="text-muted-foreground truncate text-[9px]">{svgIcon.name}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onCustomSvgIconsChange(customSvgIcons.filter((s) => s.name !== svgIcon.name));
+                    if (selectedIcon === svgIcon.name) onRevertToDefault();
+                  }}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/80 absolute -top-1 -right-1 rounded-full p-0.5"
+                >
+                  <X className="h-2.5 w-2.5" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+
+      {/* 커스텀 아이콘 추가 */}
+      <div className="flex gap-2">
+        <Popover open={lucideSearchOpen} onOpenChange={setLucideSearchOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              Lucide 검색
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-64 p-0" align="start">
+            <Command>
+              <CommandInput
+                placeholder="아이콘 이름 검색..."
+                value={lucideSearchTerm}
+                onValueChange={setLucideSearchTerm}
+                className="text-xs"
+              />
+              <CommandList className="max-h-48">
+                <CommandEmpty className="py-3 text-xs">아이콘을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {Object.keys(allLucideIcons)
+                    .filter((name) => name.toLowerCase().includes(lucideSearchTerm.toLowerCase()))
+                    .slice(0, 30)
+                    .map((iconName) => {
+                      const Icon = allLucideIcons[iconName as keyof typeof allLucideIcons];
+                      return (
+                        <CommandItem
+                          key={iconName}
+                          value={iconName}
+                          onSelect={() => {
+                            const next = [...customIcons];
+                            if (!next.includes(iconName)) {
+                              next.push(iconName);
+                              onCustomIconsChange(next);
+                              if (Icon) addToIconMap(iconName, Icon);
+                            }
+                            setLucideSearchOpen(false);
+                            setLucideSearchTerm("");
+                          }}
+                          className="flex items-center gap-2 text-xs"
+                        >
+                          {Icon ? <Icon className="h-4 w-4" /> : <span className="h-4 w-4" />}
+                          {iconName}
+                          {customIcons.includes(iconName) && <Check className="text-primary ml-auto h-3 w-3" />}
+                        </CommandItem>
+                      );
+                    })}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        <Popover open={svgPasteOpen} onOpenChange={setSvgPasteOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm" className="h-7 flex-1 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              SVG 붙여넣기
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72 space-y-2 p-3" align="start">
+            <Label className="text-xs">아이콘 이름</Label>
+            <Input
+              value={svgName}
+              onChange={(e) => setSvgName(e.target.value)}
+              placeholder="예: 회사로고"
+              className="h-7 text-xs"
+            />
+            <Label className="text-xs">SVG 코드</Label>
+            <textarea
+              value={svgInput}
+              onChange={(e) => {
+                setSvgInput(e.target.value);
+                setSvgError("");
+              }}
+              onPaste={(e) => {
+                e.stopPropagation();
+                const text = e.clipboardData.getData("text/plain");
+                if (text) {
+                  e.preventDefault();
+                  setSvgInput(text);
+                  setSvgError("");
+                }
+              }}
+              onKeyDown={(e) => e.stopPropagation()}
+              placeholder={'<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'}
+              className="bg-background focus:ring-ring h-20 w-full rounded-md border px-2 py-1.5 text-xs focus:ring-2 focus:outline-none"
+            />
+            {svgInput && (
+              <div className="bg-muted/50 flex items-center justify-center rounded border p-2">
+                <span
+                  className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
+                  dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgInput) }}
+                />
+              </div>
+            )}
+            {svgError && <p className="text-destructive text-xs">{svgError}</p>}
+            <Button
+              size="sm"
+              className="h-7 w-full text-xs"
+              onClick={() => {
+                if (!svgName.trim()) {
+                  setSvgError("아이콘 이름을 입력하세요.");
+                  return;
+                }
+                if (!svgInput.trim().includes("<svg")) {
+                  setSvgError("유효한 SVG 코드가 아닙니다.");
+                  return;
+                }
+                const sanitized = sanitizeSvg(svgInput);
+                let finalName = svgName.trim();
+                const existingNames = new Set(customSvgIcons.map((s) => s.name));
+                if (existingNames.has(finalName)) {
+                  let counter = 2;
+                  while (existingNames.has(`${svgName.trim()}(${counter})`)) counter++;
+                  finalName = `${svgName.trim()}(${counter})`;
+                }
+                onCustomSvgIconsChange([...customSvgIcons, { name: finalName, svg: sanitized }]);
+                setSvgInput("");
+                setSvgName("");
+                setSvgError("");
+                setSvgPasteOpen(false);
+              }}
+            >
+              추가
+            </Button>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* 아이콘 크기 */}
+      <div>
+        <Label className="mb-1.5 text-xs">아이콘 크기</Label>
+        <div className="flex rounded-md border">
+          {Object.keys(iconSizePresets).map((preset) => (
+            <button
+              key={preset}
+              type="button"
+              onClick={() => onIconSizeChange(preset)}
+              className={cn(
+                "flex-1 px-1 py-1 text-xs font-medium whitespace-nowrap transition-colors first:rounded-l-md last:rounded-r-md",
+                iconSize === preset
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-muted text-muted-foreground"
+              )}
+            >
+              {preset}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 텍스트 위치 (icon-text 모드) */}
+      {displayMode === "icon-text" && (
+        <>
+          <div>
+            <Label className="mb-1.5 text-xs">텍스트 위치</Label>
+            <div className="flex rounded-md border">
+              {([
+                { value: "left", label: "왼쪽" },
+                { value: "right", label: "오른쪽" },
+                { value: "top", label: "위쪽" },
+                { value: "bottom", label: "아래쪽" },
+              ] as const).map((pos) => (
+                <button
+                  key={pos.value}
+                  type="button"
+                  onClick={() => onIconTextPositionChange(pos.value)}
+                  className={cn(
+                    "flex-1 px-2 py-1 text-xs font-medium transition-colors first:rounded-l-md last:rounded-r-md",
+                    iconTextPosition === pos.value
+                      ? "bg-primary text-primary-foreground"
+                      : "hover:bg-muted text-muted-foreground"
+                  )}
+                >
+                  {pos.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <Label className="mb-1.5 text-xs">아이콘-텍스트 간격</Label>
+            <div className="flex items-center gap-2">
+              <input
+                type="range"
+                min={0}
+                max={32}
+                step={1}
+                value={Math.min(iconGap, 32)}
+                onChange={(e) => onIconGapChange(Number(e.target.value))}
+                className="accent-primary h-1.5 flex-1 cursor-pointer"
+              />
+              <div className="flex items-center gap-1">
+                <Input
+                  type="number"
+                  min={0}
+                  value={iconGap}
+                  onChange={(e) => onIconGapChange(Math.max(0, Number(e.target.value) || 0))}
+                  className="h-7 w-14 text-center text-xs"
+                />
+                <span className="text-muted-foreground text-xs">px</span>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+V2ButtonConfigPanel.displayName = "V2ButtonConfigPanel";
+
+export default V2ButtonConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2CardDisplayConfigPanel.tsx b/frontend/components/v2/config-panels/V2CardDisplayConfigPanel.tsx
new file mode 100644
index 00000000..c8537ae0
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2CardDisplayConfigPanel.tsx
@@ -0,0 +1,789 @@
+"use client";
+
+/**
+ * V2CardDisplay 설정 패널
+ * 토스식 단계별 UX: 테이블 선택 -> 컬럼 매핑 -> 카드 스타일 -> 고급 설정(접힘)
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Badge } from "@/components/ui/badge";
+import {
+  Settings,
+  ChevronDown,
+  Database,
+  ChevronsUpDown,
+  Check,
+  Plus,
+  Trash2,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { entityJoinApi } from "@/lib/api/entityJoin";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+
+// ─── 한 행당 카드 수 카드 정의 ───
+const CARDS_PER_ROW_OPTIONS = [
+  { value: 1, label: "1개" },
+  { value: 2, label: "2개" },
+  { value: 3, label: "3개" },
+  { value: 4, label: "4개" },
+  { value: 5, label: "5개" },
+  { value: 6, label: "6개" },
+] as const;
+
+interface EntityJoinColumn {
+  tableName: string;
+  columnName: string;
+  columnLabel: string;
+  dataType: string;
+  joinAlias: string;
+  suggestedLabel: string;
+}
+
+interface JoinTable {
+  tableName: string;
+  currentDisplayColumn: string;
+  joinConfig?: { sourceColumn: string };
+  availableColumns: Array<{
+    columnName: string;
+    columnLabel: string;
+    dataType: string;
+    description?: string;
+  }>;
+}
+
+interface V2CardDisplayConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  screenTableName?: string;
+  tableColumns?: any[];
+}
+
+export const V2CardDisplayConfigPanel: React.FC<V2CardDisplayConfigPanelProps> = ({
+  config,
+  onChange,
+  screenTableName,
+  tableColumns = [],
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+  const [allTables, setAllTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [availableColumns, setAvailableColumns] = useState<any[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [entityJoinColumns, setEntityJoinColumns] = useState<{
+    availableColumns: EntityJoinColumn[];
+    joinTables: JoinTable[];
+  }>({ availableColumns: [], joinTables: [] });
+  const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);
+
+  const targetTableName = useMemo(() => {
+    if (config.useCustomTable && config.customTableName) {
+      return config.customTableName;
+    }
+    return config.tableName || screenTableName;
+  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
+
+  const updateConfig = (field: string, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
+      );
+    }
+  };
+
+  const updateNestedConfig = (path: string, value: any) => {
+    const keys = path.split(".");
+    const newConfig = { ...config };
+    let current = newConfig;
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (!current[keys[i]]) current[keys[i]] = {};
+      current[keys[i]] = { ...current[keys[i]] };
+      current = current[keys[i]];
+    }
+    current[keys[keys.length - 1]] = value;
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
+      );
+    }
+  };
+
+  // 테이블 목록 로드
+  useEffect(() => {
+    const loadAllTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTables(
+            response.data.map((t: any) => ({
+              tableName: t.tableName || t.table_name,
+              displayName: t.tableLabel || t.displayName || t.tableName || t.table_name,
+            }))
+          );
+        }
+      } catch {
+        /* 무시 */
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadAllTables();
+  }, []);
+
+  // 컬럼 로드
+  useEffect(() => {
+    const loadColumns = async () => {
+      if (!targetTableName) {
+        setAvailableColumns([]);
+        return;
+      }
+      if (!config.useCustomTable && tableColumns && tableColumns.length > 0) {
+        setAvailableColumns(tableColumns);
+        return;
+      }
+      setLoadingColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(targetTableName);
+        if (result.success && result.data?.columns) {
+          setAvailableColumns(
+            result.data.columns.map((col: any) => ({
+              columnName: col.columnName,
+              columnLabel: col.displayName || col.columnLabel || col.columnName,
+              dataType: col.dataType,
+            }))
+          );
+        }
+      } catch {
+        setAvailableColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [targetTableName, config.useCustomTable, tableColumns]);
+
+  // 엔티티 조인 컬럼 로드
+  useEffect(() => {
+    const fetchEntityJoinColumns = async () => {
+      if (!targetTableName) {
+        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
+        return;
+      }
+      setLoadingEntityJoins(true);
+      try {
+        const result = await entityJoinApi.getEntityJoinColumns(targetTableName);
+        setEntityJoinColumns({
+          availableColumns: result.availableColumns || [],
+          joinTables: result.joinTables || [],
+        });
+      } catch {
+        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
+      } finally {
+        setLoadingEntityJoins(false);
+      }
+    };
+    fetchEntityJoinColumns();
+  }, [targetTableName]);
+
+  const handleTableSelect = (selectedTable: string, isScreenTable: boolean) => {
+    const newConfig = isScreenTable
+      ? { ...config, useCustomTable: false, customTableName: undefined, tableName: selectedTable, columnMapping: { displayColumns: [] } }
+      : { ...config, useCustomTable: true, customTableName: selectedTable, tableName: selectedTable, columnMapping: { displayColumns: [] } };
+    onChange(newConfig);
+    setTableComboboxOpen(false);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
+      );
+    }
+  };
+
+  const getSelectedTableDisplay = () => {
+    if (!targetTableName) return "테이블을 선택하세요";
+    const found = allTables.find((t) => t.tableName === targetTableName);
+    return found?.displayName || targetTableName;
+  };
+
+  const handleColumnSelect = (path: string, columnName: string) => {
+    const joinColumn = entityJoinColumns.availableColumns.find(
+      (col) => col.joinAlias === columnName
+    );
+    if (joinColumn) {
+      const joinColumnsConfig = config.joinColumns || [];
+      const exists = joinColumnsConfig.find((jc: any) => jc.columnName === columnName);
+      if (!exists) {
+        const joinTableInfo = entityJoinColumns.joinTables?.find(
+          (jt) => jt.tableName === joinColumn.tableName
+        );
+        const newJoinColumnConfig = {
+          columnName: joinColumn.joinAlias,
+          label: joinColumn.suggestedLabel || joinColumn.columnLabel,
+          sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
+          referenceTable: joinColumn.tableName,
+          referenceColumn: joinColumn.columnName,
+          isJoinColumn: true,
+        };
+        const newConfig = {
+          ...config,
+          columnMapping: { ...config.columnMapping, [path.split(".")[1]]: columnName },
+          joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
+        };
+        onChange(newConfig);
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
+          );
+        }
+        return;
+      }
+    }
+    updateNestedConfig(path, columnName);
+  };
+
+  // 표시 컬럼 관리
+  const addDisplayColumn = () => {
+    const current = config.columnMapping?.displayColumns || [];
+    updateNestedConfig("columnMapping.displayColumns", [...current, ""]);
+  };
+
+  const removeDisplayColumn = (index: number) => {
+    const current = [...(config.columnMapping?.displayColumns || [])];
+    current.splice(index, 1);
+    updateNestedConfig("columnMapping.displayColumns", current);
+  };
+
+  const updateDisplayColumn = (index: number, value: string) => {
+    const current = [...(config.columnMapping?.displayColumns || [])];
+    current[index] = value;
+
+    const joinColumn = entityJoinColumns.availableColumns.find(
+      (col) => col.joinAlias === value
+    );
+    if (joinColumn) {
+      const joinColumnsConfig = config.joinColumns || [];
+      const exists = joinColumnsConfig.find((jc: any) => jc.columnName === value);
+      if (!exists) {
+        const joinTableInfo = entityJoinColumns.joinTables?.find(
+          (jt) => jt.tableName === joinColumn.tableName
+        );
+        const newConfig = {
+          ...config,
+          columnMapping: { ...config.columnMapping, displayColumns: current },
+          joinColumns: [
+            ...joinColumnsConfig,
+            {
+              columnName: joinColumn.joinAlias,
+              label: joinColumn.suggestedLabel || joinColumn.columnLabel,
+              sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
+              referenceTable: joinColumn.tableName,
+              referenceColumn: joinColumn.columnName,
+              isJoinColumn: true,
+            },
+          ],
+        };
+        onChange(newConfig);
+        if (typeof window !== "undefined") {
+          window.dispatchEvent(
+            new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
+          );
+        }
+        return;
+      }
+    }
+    updateNestedConfig("columnMapping.displayColumns", current);
+  };
+
+  // 테이블별 조인 컬럼 그룹화
+  const joinColumnsByTable: Record<string, EntityJoinColumn[]> = {};
+  entityJoinColumns.availableColumns.forEach((col) => {
+    if (!joinColumnsByTable[col.tableName]) joinColumnsByTable[col.tableName] = [];
+    joinColumnsByTable[col.tableName].push(col);
+  });
+
+  const currentTableColumns = config.useCustomTable
+    ? availableColumns
+    : tableColumns.length > 0
+      ? tableColumns
+      : availableColumns;
+
+  // 컬럼 선택 Select 렌더링
+  const renderColumnSelect = (
+    value: string,
+    onChangeHandler: (value: string) => void,
+    placeholder: string = "컬럼 선택"
+  ) => (
+    <Select
+      value={value || "__none__"}
+      onValueChange={(val) => onChangeHandler(val === "__none__" ? "" : val)}
+    >
+      <SelectTrigger className="h-7 text-[11px]">
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="__none__" className="text-[11px] text-muted-foreground">
+          선택 안함
+        </SelectItem>
+        {currentTableColumns.length > 0 && (
+          <SelectGroup>
+            <SelectLabel className="text-[10px] font-semibold text-muted-foreground">
+              기본 컬럼
+            </SelectLabel>
+            {currentTableColumns.map((column: any) => (
+              <SelectItem key={column.columnName} value={column.columnName} className="text-[11px]">
+                {column.columnLabel || column.columnName}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        )}
+        {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
+          <SelectGroup key={tableName}>
+            <SelectLabel className="text-[10px] font-semibold text-primary">
+              {tableName} (조인)
+            </SelectLabel>
+            {columns.map((col) => (
+              <SelectItem key={col.joinAlias} value={col.joinAlias} className="text-[11px]">
+                {col.suggestedLabel || col.columnLabel}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 테이블 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">데이터 소스</p>
+        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={tableComboboxOpen}
+              className="h-8 w-full justify-between text-xs"
+              disabled={loadingTables}
+            >
+              <div className="flex items-center gap-2 truncate">
+                <Database className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                <span className="truncate">
+                  {loadingTables ? "로딩 중..." : getSelectedTableDisplay()}
+                </span>
+              </div>
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[300px] p-0" align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="text-xs" />
+              <CommandList>
+                <CommandEmpty className="py-3 text-center text-xs text-muted-foreground">
+                  테이블을 찾을 수 없어요
+                </CommandEmpty>
+                {screenTableName && (
+                  <CommandGroup heading="기본 (화면 테이블)">
+                    <CommandItem
+                      value={screenTableName}
+                      onSelect={() => handleTableSelect(screenTableName, true)}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          targetTableName === screenTableName && !config.useCustomTable
+                            ? "opacity-100"
+                            : "opacity-0"
+                        )}
+                      />
+                      <Database className="mr-2 h-3.5 w-3.5 text-primary" />
+                      {allTables.find((t) => t.tableName === screenTableName)?.displayName ||
+                        screenTableName}
+                    </CommandItem>
+                  </CommandGroup>
+                )}
+                <CommandGroup heading="전체 테이블">
+                  {allTables
+                    .filter((t) => t.tableName !== screenTableName)
+                    .map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={table.tableName}
+                        onSelect={() => handleTableSelect(table.tableName, false)}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            config.useCustomTable && targetTableName === table.tableName
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
+                        />
+                        <Database className="mr-2 h-3.5 w-3.5 text-muted-foreground" />
+                        <span className="truncate">{table.displayName}</span>
+                      </CommandItem>
+                    ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        {config.useCustomTable && (
+          <p className="text-[10px] text-muted-foreground">
+            화면 기본 테이블이 아닌 다른 테이블의 데이터를 표시해요
+          </p>
+        )}
+      </div>
+
+      {/* ─── 2단계: 컬럼 매핑 ─── */}
+      {(currentTableColumns.length > 0 || loadingColumns) && (
+        <div className="space-y-3">
+          <p className="text-sm font-medium truncate">컬럼 매핑</p>
+
+          {(loadingEntityJoins || loadingColumns) && (
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              {loadingColumns ? "컬럼 로딩 중..." : "조인 컬럼 로딩 중..."}
+            </div>
+          )}
+
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">타이틀</span>
+              <div className="w-[180px]">
+                {renderColumnSelect(
+                  config.columnMapping?.titleColumn || "",
+                  (value) => handleColumnSelect("columnMapping.titleColumn", value)
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">서브타이틀</span>
+              <div className="w-[180px]">
+                {renderColumnSelect(
+                  config.columnMapping?.subtitleColumn || "",
+                  (value) => handleColumnSelect("columnMapping.subtitleColumn", value)
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">설명</span>
+              <div className="w-[180px]">
+                {renderColumnSelect(
+                  config.columnMapping?.descriptionColumn || "",
+                  (value) => handleColumnSelect("columnMapping.descriptionColumn", value)
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">이미지</span>
+              <div className="w-[180px]">
+                {renderColumnSelect(
+                  config.columnMapping?.imageColumn || "",
+                  (value) => handleColumnSelect("columnMapping.imageColumn", value)
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* 표시 컬럼 */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-medium truncate">추가 표시 컬럼</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={addDisplayColumn}
+                className="h-6 px-2 text-xs"
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                추가
+              </Button>
+            </div>
+
+            {(config.columnMapping?.displayColumns || []).length > 0 ? (
+              <div className="space-y-1.5">
+                {(config.columnMapping?.displayColumns || []).map(
+                  (column: string, index: number) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <div className="flex-1">
+                        {renderColumnSelect(column, (value) =>
+                          updateDisplayColumn(index, value)
+                        )}
+                      </div>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeDisplayColumn(index)}
+                        className="h-7 w-7 shrink-0 p-0 text-destructive"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  )
+                )}
+              </div>
+            ) : (
+              <div className="rounded-md border border-dashed border-muted-foreground/30 py-3 text-center text-xs text-muted-foreground">
+                추가 버튼으로 표시할 컬럼을 추가해요
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* ─── 3단계: 카드 레이아웃 ─── */}
+      <div className="space-y-3">
+        <p className="text-sm font-medium truncate">카드 레이아웃</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">한 행당 카드 수</span>
+            <Select
+              value={String(config.cardsPerRow || 3)}
+              onValueChange={(v) => updateConfig("cardsPerRow", parseInt(v))}
+            >
+              <SelectTrigger className="h-7 w-[100px] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {CARDS_PER_ROW_OPTIONS.map((opt) => (
+                  <SelectItem key={opt.value} value={String(opt.value)}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">카드 간격 (px)</span>
+            <Input
+              type="number"
+              min={0}
+              max={50}
+              value={config.cardSpacing ?? 16}
+              onChange={(e) => updateConfig("cardSpacing", parseInt(e.target.value))}
+              className="h-7 w-[100px] text-xs"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 4단계: 표시 요소 토글 ─── */}
+      <div className="space-y-3">
+        <p className="text-sm font-medium truncate">표시 요소</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-2">
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">타이틀</p>
+              <p className="text-[11px] text-muted-foreground">카드 상단 제목</p>
+            </div>
+            <Switch
+              checked={config.cardStyle?.showTitle ?? true}
+              onCheckedChange={(checked) => updateNestedConfig("cardStyle.showTitle", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">서브타이틀</p>
+              <p className="text-[11px] text-muted-foreground">제목 아래 보조 텍스트</p>
+            </div>
+            <Switch
+              checked={config.cardStyle?.showSubtitle ?? true}
+              onCheckedChange={(checked) =>
+                updateNestedConfig("cardStyle.showSubtitle", checked)
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">설명</p>
+              <p className="text-[11px] text-muted-foreground">카드 본문 텍스트</p>
+            </div>
+            <Switch
+              checked={config.cardStyle?.showDescription ?? true}
+              onCheckedChange={(checked) =>
+                updateNestedConfig("cardStyle.showDescription", checked)
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">이미지</p>
+              <p className="text-[11px] text-muted-foreground">카드 이미지 영역</p>
+            </div>
+            <Switch
+              checked={config.cardStyle?.showImage ?? false}
+              onCheckedChange={(checked) =>
+                updateNestedConfig("cardStyle.showImage", checked)
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">액션 버튼</p>
+              <p className="text-[11px] text-muted-foreground">
+                상세보기, 편집, 삭제 버튼
+              </p>
+            </div>
+            <Switch
+              checked={config.cardStyle?.showActions ?? true}
+              onCheckedChange={(checked) =>
+                updateNestedConfig("cardStyle.showActions", checked)
+              }
+            />
+          </div>
+
+          {(config.cardStyle?.showActions ?? true) && (
+            <div className="ml-4 border-l-2 border-primary/20 pl-3 space-y-2">
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">상세보기</span>
+                <Switch
+                  checked={config.cardStyle?.showViewButton ?? true}
+                  onCheckedChange={(checked) =>
+                    updateNestedConfig("cardStyle.showViewButton", checked)
+                  }
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">편집</span>
+                <Switch
+                  checked={config.cardStyle?.showEditButton ?? true}
+                  onCheckedChange={(checked) =>
+                    updateNestedConfig("cardStyle.showEditButton", checked)
+                  }
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">삭제</span>
+                <Switch
+                  checked={config.cardStyle?.showDeleteButton ?? false}
+                  onCheckedChange={(checked) =>
+                    updateNestedConfig("cardStyle.showDeleteButton", checked)
+                  }
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* ─── 5단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">고급 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">3개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">설명 최대 길이</span>
+              <Input
+                type="number"
+                min={10}
+                max={500}
+                value={config.cardStyle?.maxDescriptionLength ?? 100}
+                onChange={(e) =>
+                  updateNestedConfig(
+                    "cardStyle.maxDescriptionLength",
+                    parseInt(e.target.value)
+                  )
+                }
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">비활성화</p>
+                <p className="text-[11px] text-muted-foreground">
+                  카드 상호작용을 비활성화해요
+                </p>
+              </div>
+              <Switch
+                checked={config.disabled || false}
+                onCheckedChange={(checked) => updateConfig("disabled", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">읽기 전용</p>
+                <p className="text-[11px] text-muted-foreground">
+                  데이터 수정을 막아요
+                </p>
+              </div>
+              <Switch
+                checked={config.readonly || false}
+                onCheckedChange={(checked) => updateConfig("readonly", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2CardDisplayConfigPanel.displayName = "V2CardDisplayConfigPanel";
+
+export default V2CardDisplayConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2CategoryManagerConfigPanel.tsx b/frontend/components/v2/config-panels/V2CategoryManagerConfigPanel.tsx
new file mode 100644
index 00000000..d9d5ee1d
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2CategoryManagerConfigPanel.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+/**
+ * V2 카테고리 관리 설정 패널 (토스식 리디자인)
+ * 토스식 단계별 UX: 뷰 모드 -> 트리 설정 -> 레이아웃(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Settings, ChevronDown, FolderTree } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { V2CategoryManagerConfig, ViewMode } from "@/lib/registry/components/v2-category-manager/types";
+import { defaultV2CategoryManagerConfig } from "@/lib/registry/components/v2-category-manager/types";
+
+interface V2CategoryManagerConfigPanelProps {
+  config: Partial<V2CategoryManagerConfig>;
+  onChange: (config: Partial<V2CategoryManagerConfig>) => void;
+}
+
+export const V2CategoryManagerConfigPanel: React.FC<V2CategoryManagerConfigPanelProps> = ({
+  config: externalConfig,
+  onChange,
+}) => {
+  const [layoutOpen, setLayoutOpen] = useState(false);
+
+  const config: V2CategoryManagerConfig = {
+    ...defaultV2CategoryManagerConfig,
+    ...externalConfig,
+  };
+
+  const handleChange = <K extends keyof V2CategoryManagerConfig>(key: K, value: V2CategoryManagerConfig[K]) => {
+    const newConfig = { ...config, [key]: value };
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", { detail: { config: newConfig } })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 뷰 모드 설정 ─── */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <FolderTree className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">뷰 모드 설정</p>
+        </div>
+        <p className="text-[11px] text-muted-foreground">카테고리 표시 방식을 설정해요</p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">기본 뷰 모드</span>
+          <Select
+            value={config.viewMode}
+            onValueChange={(value: ViewMode) => handleChange("viewMode", value)}
+          >
+            <SelectTrigger className="h-7 w-[120px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="tree">트리 뷰</SelectItem>
+              <SelectItem value="list">목록 뷰</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">뷰 모드 토글</p>
+            <p className="text-[11px] text-muted-foreground">트리/목록 전환 버튼을 표시해요</p>
+          </div>
+          <Switch
+            checked={config.showViewModeToggle}
+            onCheckedChange={(checked) => handleChange("showViewModeToggle", checked)}
+          />
+        </div>
+      </div>
+
+      {/* ─── 2단계: 트리 설정 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">트리 설정</p>
+        <p className="text-[11px] text-muted-foreground">트리 뷰의 기본 동작을 설정해요</p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <span className="text-xs text-muted-foreground">기본 펼침 단계</span>
+            <p className="text-[10px] text-muted-foreground mt-0.5">처음 로드 시 펼쳐지는 깊이</p>
+          </div>
+          <Select
+            value={String(config.defaultExpandLevel)}
+            onValueChange={(value) => handleChange("defaultExpandLevel", Number(value))}
+          >
+            <SelectTrigger className="h-7 w-[120px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1">1단계 (대분류만)</SelectItem>
+              <SelectItem value="2">2단계 (중분류까지)</SelectItem>
+              <SelectItem value="3">3단계 (전체 펼침)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">비활성 항목 표시</p>
+            <p className="text-[11px] text-muted-foreground">비활성화된 카테고리도 보여줘요</p>
+          </div>
+          <Switch
+            checked={config.showInactiveItems}
+            onCheckedChange={(checked) => handleChange("showInactiveItems", checked)}
+          />
+        </div>
+      </div>
+
+      {/* ─── 3단계: 레이아웃 (Collapsible) ─── */}
+      <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">레이아웃 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                layoutOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">컬럼 목록 표시</p>
+                <p className="text-[11px] text-muted-foreground">좌측 카테고리 컬럼 목록 패널을 보여줘요</p>
+              </div>
+              <Switch
+                checked={config.showColumnList}
+                onCheckedChange={(checked) => handleChange("showColumnList", checked)}
+              />
+            </div>
+
+            {config.showColumnList && (
+              <div className="ml-1 border-l-2 border-primary/20 pl-3">
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <span className="text-xs text-muted-foreground">좌측 패널 너비 (%)</span>
+                    <p className="text-[10px] text-muted-foreground mt-0.5">10~40% 범위</p>
+                  </div>
+                  <Input
+                    type="number"
+                    min={10}
+                    max={40}
+                    value={config.leftPanelWidth}
+                    onChange={(e) => handleChange("leftPanelWidth", Number(e.target.value))}
+                    className="h-7 w-[80px] text-xs"
+                  />
+                </div>
+              </div>
+            )}
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <span className="text-xs text-muted-foreground">높이</span>
+                <p className="text-[10px] text-muted-foreground mt-0.5">px 또는 % (예: 100%, 600)</p>
+              </div>
+              <Input
+                value={String(config.height)}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  handleChange("height", isNaN(Number(v)) ? v : Number(v));
+                }}
+                placeholder="100%"
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2CategoryManagerConfigPanel.displayName = "V2CategoryManagerConfigPanel";
+
+export default V2CategoryManagerConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2DateConfigPanel.tsx b/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
index 6d7ba5d7..fe785bc2 100644
--- a/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2DateConfigPanel.tsx
@@ -2,15 +2,70 @@
 
 /**
  * V2Date 설정 패널
- * 통합 날짜 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 날짜 타입 카드 선택 -> 표시 설정 -> 고급 설정(접힘)
  */
 
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Calendar, Clock, CalendarClock, Settings, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 날짜 타입 카드 정의 ───
+const DATE_TYPE_CARDS = [
+  {
+    value: "date",
+    icon: Calendar,
+    title: "날짜",
+    description: "연/월/일을 선택해요",
+  },
+  {
+    value: "time",
+    icon: Clock,
+    title: "시간",
+    description: "시/분을 선택해요",
+  },
+  {
+    value: "datetime",
+    icon: CalendarClock,
+    title: "날짜+시간",
+    description: "날짜와 시간을 함께 선택해요",
+  },
+] as const;
+
+// ─── 날짜 타입별 표시 형식 옵션 ───
+const FORMAT_OPTIONS: Record<string, { value: string; label: string }[]> = {
+  date: [
+    { value: "YYYY-MM-DD", label: "YYYY-MM-DD" },
+    { value: "YYYY/MM/DD", label: "YYYY/MM/DD" },
+    { value: "DD/MM/YYYY", label: "DD/MM/YYYY" },
+    { value: "MM/DD/YYYY", label: "MM/DD/YYYY" },
+    { value: "YYYY년 MM월 DD일", label: "YYYY년 MM월 DD일" },
+  ],
+  time: [
+    { value: "HH:mm", label: "HH:mm" },
+    { value: "HH:mm:ss", label: "HH:mm:ss" },
+  ],
+  datetime: [
+    { value: "YYYY-MM-DD HH:mm", label: "YYYY-MM-DD HH:mm" },
+    { value: "YYYY-MM-DD HH:mm:ss", label: "YYYY-MM-DD HH:mm:ss" },
+    { value: "YYYY/MM/DD HH:mm", label: "YYYY/MM/DD HH:mm" },
+    { value: "YYYY년 MM월 DD일", label: "YYYY년 MM월 DD일" },
+  ],
+};
 
 interface V2DateConfigPanelProps {
   config: Record<string, any>;
@@ -21,137 +76,183 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 설정 업데이트 핸들러
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
+  const currentDateType = config.dateType || config.type || "date";
+  const showTimeOptions = currentDateType === "datetime" || currentDateType === "time";
+
+  const formatOptions = useMemo(() => {
+    return FORMAT_OPTIONS[currentDateType] || FORMAT_OPTIONS.date;
+  }, [currentDateType]);
+
   return (
     <div className="space-y-4">
-      {/* 날짜 타입 */}
+      {/* ─── 1단계: 날짜 타입 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">날짜 타입</Label>
-        <Select
-          value={config.dateType || config.type || "date"}
-          onValueChange={(value) => updateConfig("dateType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="date">날짜</SelectItem>
-            <SelectItem value="time">시간</SelectItem>
-            <SelectItem value="datetime">날짜+시간</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Separator />
-
-      {/* 플레이스홀더 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">플레이스홀더</Label>
-        <Input
-          value={config.placeholder || ""}
-          onChange={(e) => updateConfig("placeholder", e.target.value)}
-          placeholder="날짜 선택"
-          className="h-8 text-xs"
-        />
-        <p className="text-muted-foreground text-[10px]">날짜가 선택되지 않았을 때 표시할 텍스트</p>
-      </div>
-
-      <Separator />
-
-      {/* 표시 형식 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">표시 형식</Label>
-        <Select
-          value={config.format || "YYYY-MM-DD"}
-          onValueChange={(value) => updateConfig("format", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="형식 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
-            <SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
-            <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
-            <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
-            <SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
-            {(config.dateType === "time" || config.dateType === "datetime") && (
-              <>
-                <SelectItem value="HH:mm">HH:mm</SelectItem>
-                <SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
-                <SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
-                <SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
-              </>
-            )}
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Separator />
-
-      {/* 날짜 범위 제한 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">날짜 범위 제한</Label>
-        <div className="grid grid-cols-2 gap-2">
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">최소 날짜</Label>
-            <Input
-              type="date"
-              value={config.minDate || ""}
-              onChange={(e) => updateConfig("minDate", e.target.value)}
-              className="h-8 text-xs"
-            />
-          </div>
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">최대 날짜</Label>
-            <Input
-              type="date"
-              value={config.maxDate || ""}
-              onChange={(e) => updateConfig("maxDate", e.target.value)}
-              className="h-8 text-xs"
-            />
-          </div>
+        <p className="text-sm font-medium">어떤 날짜 정보를 입력받나요?</p>
+        <div className="grid grid-cols-3 gap-2">
+          {DATE_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = currentDateType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("dateType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50",
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
         </div>
       </div>
 
-      <Separator />
+      {/* ─── 2단계: 표시 설정 ─── */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <span className="text-sm font-medium">표시 설정</span>
 
-      {/* 추가 옵션 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">추가 옵션</Label>
-        
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="range"
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">표시 형식</span>
+          <Select
+            value={config.format || formatOptions[0]?.value || "YYYY-MM-DD"}
+            onValueChange={(value) => updateConfig("format", value)}
+          >
+            <SelectTrigger className="h-8 w-[180px] text-sm">
+              <SelectValue placeholder="형식 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              {formatOptions.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">안내 텍스트</span>
+          <Input
+            value={config.placeholder || ""}
+            onChange={(e) => updateConfig("placeholder", e.target.value)}
+            placeholder="날짜 선택"
+            className="h-8 w-[180px] text-sm"
+          />
+        </div>
+      </div>
+
+      {/* ─── 3단계: 옵션 (Switch + 설명) ─── */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">기간 선택</p>
+            <p className="text-[11px] text-muted-foreground">
+              시작일~종료일을 함께 선택할 수 있어요
+            </p>
+          </div>
+          <Switch
             checked={config.range || false}
             onCheckedChange={(checked) => updateConfig("range", checked)}
           />
-          <label htmlFor="range" className="text-xs">기간 선택 (시작~종료)</label>
         </div>
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="showToday"
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">오늘 버튼</p>
+            <p className="text-[11px] text-muted-foreground">
+              오늘 날짜로 빠르게 이동할 수 있어요
+            </p>
+          </div>
+          <Switch
             checked={config.showToday !== false}
             onCheckedChange={(checked) => updateConfig("showToday", checked)}
           />
-          <label htmlFor="showToday" className="text-xs">오늘 버튼 표시</label>
         </div>
 
-        {(config.dateType === "datetime" || config.dateType === "time") && (
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="showSeconds"
+        {showTimeOptions && (
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">초 단위 표시</p>
+              <p className="text-[11px] text-muted-foreground">
+                시:분 외에 초까지 입력할 수 있어요
+              </p>
+            </div>
+            <Switch
               checked={config.showSeconds || false}
               onCheckedChange={(checked) => updateConfig("showSeconds", checked)}
             />
-            <label htmlFor="showSeconds" className="text-xs">초 단위 표시</label>
           </div>
         )}
       </div>
+
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <p className="text-xs text-muted-foreground">
+              선택 가능한 날짜 범위를 제한할 수 있어요
+            </p>
+
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <Label className="text-xs text-muted-foreground">최소 날짜</Label>
+                <Input
+                  type="date"
+                  value={config.minDate || ""}
+                  onChange={(e) => updateConfig("minDate", e.target.value)}
+                  className="h-8 w-full text-sm"
+                />
+              </div>
+              <div className="flex-1">
+                <Label className="text-xs text-muted-foreground">최대 날짜</Label>
+                <Input
+                  type="date"
+                  value={config.maxDate || ""}
+                  onChange={(e) => updateConfig("maxDate", e.target.value)}
+                  className="h-8 w-full text-sm"
+                />
+              </div>
+            </div>
+
+            <p className="text-[11px] text-muted-foreground">
+              비워두면 제한 없이 모든 날짜를 선택할 수 있어요
+            </p>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 };
@@ -159,5 +260,3 @@ export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
 V2DateConfigPanel.displayName = "V2DateConfigPanel";
 
 export default V2DateConfigPanel;
-
-
diff --git a/frontend/components/v2/config-panels/V2DividerLineConfigPanel.tsx b/frontend/components/v2/config-panels/V2DividerLineConfigPanel.tsx
new file mode 100644
index 00000000..f00a31f6
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2DividerLineConfigPanel.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+/**
+ * V2DividerLine 설정 패널
+ * 토스식 UX: 구분선 스타일 카드 선택 -> 텍스트 설정 -> 고급 설정(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Settings, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const THICKNESS_CARDS = [
+  { value: "1px", label: "얇게", size: "1px" },
+  { value: "2px", label: "보통", size: "2px" },
+  { value: "4px", label: "두껍게", size: "4px" },
+] as const;
+
+const COLOR_CARDS = [
+  { value: "#d1d5db", label: "기본", description: "연한 회색" },
+  { value: "#9ca3af", label: "진하게", description: "중간 회색" },
+  { value: "#3b82f6", label: "강조", description: "파란색" },
+] as const;
+
+interface V2DividerLineConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+}
+
+export const V2DividerLineConfigPanel: React.FC<V2DividerLineConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: string, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 선 두께 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">선 두께</p>
+        <div className="grid grid-cols-3 gap-2">
+          {THICKNESS_CARDS.map((card) => {
+            const isSelected = (config.thickness || "1px") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("thickness", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[56px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <div
+                  className="mb-1.5 w-full rounded-full"
+                  style={{
+                    height: card.size,
+                    backgroundColor: config.color || "#d1d5db",
+                  }}
+                />
+                <span className="text-xs font-medium">{card.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 2단계: 선 색상 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">선 색상</p>
+        <div className="grid grid-cols-3 gap-2">
+          {COLOR_CARDS.map((card) => {
+            const isSelected = (config.color || "#d1d5db") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("color", card.value)}
+                className={cn(
+                  "flex flex-col items-center rounded-md border p-2 text-center transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <div
+                  className="mb-1 h-3 w-3 rounded-full"
+                  style={{ backgroundColor: card.value }}
+                />
+                <span className="text-xs font-medium">{card.label}</span>
+              </button>
+            );
+          })}
+        </div>
+        {/* 커스텀 색상 */}
+        <div className="flex items-center gap-2 pt-1">
+          <input
+            type="color"
+            value={config.color || "#d1d5db"}
+            onChange={(e) => updateConfig("color", e.target.value)}
+            className="h-7 w-7 cursor-pointer rounded border"
+          />
+          <Input
+            value={config.color || "#d1d5db"}
+            onChange={(e) => updateConfig("color", e.target.value)}
+            placeholder="#d1d5db"
+            className="h-7 flex-1 text-xs"
+          />
+        </div>
+      </div>
+
+      {/* ─── 3단계: 구분선 텍스트 ─── */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium">구분 텍스트</p>
+            <p className="text-[11px] text-muted-foreground">
+              선 가운데에 텍스트를 표시해요
+            </p>
+          </div>
+          <Switch
+            checked={!!config.dividerText}
+            onCheckedChange={(checked) =>
+              updateConfig("dividerText", checked ? "구분" : "")
+            }
+          />
+        </div>
+
+        {config.dividerText && (
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">텍스트</span>
+              <Input
+                value={config.dividerText || ""}
+                onChange={(e) => updateConfig("dividerText", e.target.value)}
+                placeholder="구분 텍스트 입력"
+                className="h-7 w-[160px] text-xs"
+              />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">텍스트 색상</span>
+              <div className="flex items-center gap-1.5">
+                <input
+                  type="color"
+                  value={config.textColor || "#6b7280"}
+                  onChange={(e) => updateConfig("textColor", e.target.value)}
+                  className="h-6 w-6 cursor-pointer rounded border"
+                />
+                <Input
+                  value={config.textColor || "#6b7280"}
+                  onChange={(e) => updateConfig("textColor", e.target.value)}
+                  className="h-7 w-[100px] text-xs"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">둥근 끝</p>
+                <p className="text-[11px] text-muted-foreground">
+                  선의 양쪽 끝을 둥글게 처리해요
+                </p>
+              </div>
+              <Switch
+                checked={config.rounded || false}
+                onCheckedChange={(checked) => updateConfig("rounded", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">비활성화</p>
+                <p className="text-[11px] text-muted-foreground">
+                  컴포넌트를 비활성화 상태로 표시해요
+                </p>
+              </div>
+              <Switch
+                checked={config.disabled || false}
+                onCheckedChange={(checked) => updateConfig("disabled", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2DividerLineConfigPanel.displayName = "V2DividerLineConfigPanel";
+
+export default V2DividerLineConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx b/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
new file mode 100644
index 00000000..7dfe8834
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
@@ -0,0 +1,749 @@
+"use client";
+
+/**
+ * V2 통합 필드 설정 패널
+ * 입력(text/number/textarea/numbering)과 선택(select/category/entity)을
+ * 하나의 패널에서 전환할 수 있는 통합 설정 UI
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Separator } from "@/components/ui/separator";
+import {
+  Type, Hash, AlignLeft, ListOrdered, List, Database, FolderTree,
+  Settings, ChevronDown, Plus, Trash2, Loader2, Filter,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+import { AutoGenerationType } from "@/types/screen";
+import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
+import { getAvailableNumberingRulesForScreen } from "@/lib/api/numberingRule";
+import { NumberingRuleConfig } from "@/types/numbering-rule";
+import type { V2SelectFilter } from "@/types/v2-components";
+
+// ─── 필드 유형 카드 정의 ───
+const FIELD_TYPE_CARDS = [
+  { value: "text", icon: Type, label: "텍스트", desc: "일반 텍스트 입력", group: "input" },
+  { value: "number", icon: Hash, label: "숫자", desc: "숫자만 입력", group: "input" },
+  { value: "textarea", icon: AlignLeft, label: "여러 줄", desc: "긴 텍스트 입력", group: "input" },
+  { value: "select", icon: List, label: "셀렉트", desc: "직접 옵션 선택", group: "select" },
+  { value: "category", icon: FolderTree, label: "카테고리", desc: "등록된 선택지", group: "select" },
+  { value: "entity", icon: Database, label: "테이블 참조", desc: "다른 테이블 참조", group: "select" },
+  { value: "numbering", icon: ListOrdered, label: "채번", desc: "자동 번호 생성", group: "input" },
+] as const;
+
+type FieldType = typeof FIELD_TYPE_CARDS[number]["value"];
+
+// 필터 조건 관련 상수
+const OPERATOR_OPTIONS = [
+  { value: "=", label: "같음 (=)" },
+  { value: "!=", label: "다름 (!=)" },
+  { value: ">", label: "초과 (>)" },
+  { value: "<", label: "미만 (<)" },
+  { value: ">=", label: "이상 (>=)" },
+  { value: "<=", label: "이하 (<=)" },
+  { value: "in", label: "포함 (IN)" },
+  { value: "notIn", label: "미포함 (NOT IN)" },
+  { value: "like", label: "유사 (LIKE)" },
+  { value: "isNull", label: "NULL" },
+  { value: "isNotNull", label: "NOT NULL" },
+] as const;
+
+const VALUE_TYPE_OPTIONS = [
+  { value: "static", label: "고정값" },
+  { value: "field", label: "폼 필드 참조" },
+  { value: "user", label: "로그인 사용자" },
+] as const;
+
+const USER_FIELD_OPTIONS = [
+  { value: "companyCode", label: "회사코드" },
+  { value: "userId", label: "사용자ID" },
+  { value: "deptCode", label: "부서코드" },
+  { value: "userName", label: "사용자명" },
+] as const;
+
+interface ColumnOption {
+  columnName: string;
+  columnLabel: string;
+}
+
+interface CategoryValueOption {
+  valueCode: string;
+  valueLabel: string;
+}
+
+// ─── 하위 호환: 기존 config에서 fieldType 추론 ───
+function resolveFieldType(config: Record<string, any>, componentType?: string): FieldType {
+  if (config.fieldType) return config.fieldType as FieldType;
+
+  // v2-select 계열
+  if (componentType === "v2-select" || config.source) {
+    const source = config.source === "code" ? "category" : config.source;
+    if (source === "entity") return "entity";
+    if (source === "category") return "category";
+    return "select";
+  }
+
+  // v2-input 계열
+  const it = config.inputType || config.type;
+  if (it === "number") return "number";
+  if (it === "textarea") return "textarea";
+  if (it === "numbering") return "numbering";
+  return "text";
+}
+
+// ─── 필터 조건 서브 컴포넌트 ───
+const FilterConditionsSection: React.FC<{
+  filters: V2SelectFilter[];
+  columns: ColumnOption[];
+  loadingColumns: boolean;
+  targetTable: string;
+  onFiltersChange: (filters: V2SelectFilter[]) => void;
+}> = ({ filters, columns, loadingColumns, targetTable, onFiltersChange }) => {
+  const addFilter = () => {
+    onFiltersChange([...filters, { column: "", operator: "=", valueType: "static", value: "" }]);
+  };
+  const updateFilter = (index: number, patch: Partial<V2SelectFilter>) => {
+    const updated = [...filters];
+    updated[index] = { ...updated[index], ...patch };
+    if (patch.valueType) {
+      if (patch.valueType === "static") { updated[index].fieldRef = undefined; updated[index].userField = undefined; }
+      else if (patch.valueType === "field") { updated[index].value = undefined; updated[index].userField = undefined; }
+      else if (patch.valueType === "user") { updated[index].value = undefined; updated[index].fieldRef = undefined; }
+    }
+    if (patch.operator === "isNull" || patch.operator === "isNotNull") {
+      updated[index].value = undefined; updated[index].fieldRef = undefined;
+      updated[index].userField = undefined; updated[index].valueType = "static";
+    }
+    onFiltersChange(updated);
+  };
+  const removeFilter = (index: number) => onFiltersChange(filters.filter((_, i) => i !== index));
+  const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <Filter className="h-3.5 w-3.5 text-muted-foreground" />
+          <span className="text-xs font-medium">데이터 필터</span>
+        </div>
+        <Button type="button" variant="ghost" size="sm" onClick={addFilter} className="h-6 px-2 text-xs">
+          <Plus className="mr-1 h-3 w-3" />추가
+        </Button>
+      </div>
+      <p className="text-muted-foreground text-[10px]">{targetTable} 테이블에서 옵션을 불러올 때 적용할 조건</p>
+      {loadingColumns && (
+        <div className="text-muted-foreground flex items-center gap-2 text-xs"><Loader2 className="h-3 w-3 animate-spin" />컬럼 목록 로딩 중...</div>
+      )}
+      {filters.length === 0 && <p className="text-muted-foreground py-2 text-center text-xs">필터 조건이 없습니다</p>}
+      <div className="space-y-2">
+        {filters.map((filter, index) => (
+          <div key={index} className="space-y-2 rounded-md border p-3">
+            <div className="flex items-center gap-1.5">
+              <Select value={filter.column || ""} onValueChange={(v) => updateFilter(index, { column: v })}>
+                <SelectTrigger className="h-7 flex-1 text-[11px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
+                <SelectContent>{columns.map((col) => (<SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel}</SelectItem>))}</SelectContent>
+              </Select>
+              <Select value={filter.operator || "="} onValueChange={(v) => updateFilter(index, { operator: v as V2SelectFilter["operator"] })}>
+                <SelectTrigger className="h-7 flex-1 text-[11px]"><SelectValue /></SelectTrigger>
+                <SelectContent>{OPERATOR_OPTIONS.map((op) => (<SelectItem key={op.value} value={op.value}>{op.label}</SelectItem>))}</SelectContent>
+              </Select>
+              <Button type="button" variant="ghost" size="sm" onClick={() => removeFilter(index)} className="text-destructive h-8 w-8 shrink-0 p-0"><Trash2 className="h-3 w-3" /></Button>
+            </div>
+            {needsValue(filter.operator) && (
+              <div className="flex items-center gap-1.5">
+                <Select value={filter.valueType || "static"} onValueChange={(v) => updateFilter(index, { valueType: v as V2SelectFilter["valueType"] })}>
+                  <SelectTrigger className="h-7 w-[100px] shrink-0 text-[11px]"><SelectValue /></SelectTrigger>
+                  <SelectContent>{VALUE_TYPE_OPTIONS.map((vt) => (<SelectItem key={vt.value} value={vt.value}>{vt.label}</SelectItem>))}</SelectContent>
+                </Select>
+                {(filter.valueType || "static") === "static" && (
+                  <Input value={String(filter.value ?? "")} onChange={(e) => updateFilter(index, { value: e.target.value })}
+                    placeholder={filter.operator === "in" || filter.operator === "notIn" ? "값1, 값2, ..." : "값 입력"} className="h-7 flex-1 text-[11px]" />
+                )}
+                {filter.valueType === "field" && (
+                  <Input value={filter.fieldRef || ""} onChange={(e) => updateFilter(index, { fieldRef: e.target.value })} placeholder="참조할 필드명" className="h-7 flex-1 text-[11px]" />
+                )}
+                {filter.valueType === "user" && (
+                  <Select value={filter.userField || ""} onValueChange={(v) => updateFilter(index, { userField: v as V2SelectFilter["userField"] })}>
+                    <SelectTrigger className="h-7 flex-1 text-[11px]"><SelectValue placeholder="사용자 필드" /></SelectTrigger>
+                    <SelectContent>{USER_FIELD_OPTIONS.map((uf) => (<SelectItem key={uf.value} value={uf.value}>{uf.label}</SelectItem>))}</SelectContent>
+                  </Select>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// ─── 메인 컴포넌트 ───
+
+interface V2FieldConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  tableName?: string;
+  columnName?: string;
+  tables?: Array<{ tableName: string; displayName?: string; tableComment?: string }>;
+  menuObjid?: number;
+  screenTableName?: string;
+  inputType?: string;
+  componentType?: string;
+}
+
+export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
+  config,
+  onChange,
+  tableName,
+  columnName,
+  tables = [],
+  screenTableName,
+  inputType: metaInputType,
+  componentType,
+}) => {
+  const fieldType = resolveFieldType(config, componentType);
+  const isSelectGroup = ["select", "category", "entity"].includes(fieldType);
+
+  // ─── 채번 관련 상태 (테이블 기반) ───
+  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
+  const [loadingRules, setLoadingRules] = useState(false);
+  const numberingTableName = screenTableName || tableName;
+
+  // ─── 셀렉트 관련 상태 ───
+  const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
+  const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
+  const [filterColumns, setFilterColumns] = useState<ColumnOption[]>([]);
+  const [loadingFilterColumns, setLoadingFilterColumns] = useState(false);
+
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: string, value: any) => {
+    onChange({ ...config, [field]: value });
+  };
+
+  // ─── 필드 타입 전환 핸들러 ───
+  const handleFieldTypeChange = (newType: FieldType) => {
+    const newIsSelect = ["select", "category", "entity"].includes(newType);
+    const base: Record<string, any> = { ...config, fieldType: newType };
+
+    if (newIsSelect) {
+      base.source = newType === "category" ? "category" : newType === "entity" ? "entity" : "static";
+      delete base.inputType;
+    } else {
+      base.inputType = newType;
+      // 선택형 -> 입력형 전환 시 source 잔류 제거 (안 지우면 '카테고리 값이 없습니다' 같은 오류 표시)
+      delete base.source;
+    }
+
+    if (newType === "numbering") {
+      base.autoGeneration = {
+        ...config.autoGeneration,
+        type: "numbering_rule" as AutoGenerationType,
+        tableName: numberingTableName,
+      };
+      base.readonly = config.readonly ?? true;
+    }
+
+    onChange(base);
+
+    // table_type_columns.input_type 동기화 (카테고리/엔티티 등 설정 가능하도록)
+    const syncTableName = screenTableName || tableName;
+    const syncColumnName = columnName || config.columnName || config.fieldName;
+    if (syncTableName && syncColumnName) {
+      apiClient.put(`/table-management/tables/${syncTableName}/columns/${syncColumnName}/input-type`, {
+        inputType: newType,
+      }).then(() => {
+        // 왼쪽 테이블 패널의 컬럼 타입 뱃지 갱신
+        window.dispatchEvent(new CustomEvent("table-columns-refresh"));
+      }).catch(() => { /* 동기화 실패해도 화면 설정은 유지 */ });
+    }
+  };
+
+  // ─── 채번 규칙 로드 (테이블 기반) ───
+  useEffect(() => {
+    if (fieldType !== "numbering") return;
+    if (!numberingTableName) { setNumberingRules([]); return; }
+    const load = async () => {
+      setLoadingRules(true);
+      try {
+        const resp = await getAvailableNumberingRulesForScreen(numberingTableName);
+        if (resp.success && resp.data) setNumberingRules(resp.data);
+        else setNumberingRules([]);
+      } catch { setNumberingRules([]); } finally { setLoadingRules(false); }
+    };
+    load();
+  }, [numberingTableName, fieldType]);
+
+  // ─── 엔티티 컬럼 로드 ───
+  const loadEntityColumns = useCallback(async (tblName: string) => {
+    if (!tblName) { setEntityColumns([]); return; }
+    setLoadingColumns(true);
+    try {
+      const resp = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
+      const data = resp.data.data || resp.data;
+      const cols = data.columns || data || [];
+      setEntityColumns(cols.map((col: any) => ({
+        columnName: col.columnName || col.column_name || col.name,
+        columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
+      })));
+    } catch { setEntityColumns([]); } finally { setLoadingColumns(false); }
+  }, []);
+
+  useEffect(() => {
+    if (fieldType === "entity" && config.entityTable) loadEntityColumns(config.entityTable);
+  }, [fieldType, config.entityTable, loadEntityColumns]);
+
+  // ─── 카테고리 값 로드 ───
+  const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
+    if (!catTable || !catColumn) { setCategoryValues([]); return; }
+    setLoadingCategoryValues(true);
+    try {
+      const resp = await apiClient.get(`/table-categories/${catTable}/${catColumn}/values`);
+      if (resp.data.success && resp.data.data) {
+        const flattenTree = (items: any[], depth = 0): CategoryValueOption[] => {
+          const result: CategoryValueOption[] = [];
+          for (const item of items) {
+            result.push({ valueCode: item.valueCode, valueLabel: depth > 0 ? `${"  ".repeat(depth)}${item.valueLabel}` : item.valueLabel });
+            if (item.children?.length) result.push(...flattenTree(item.children, depth + 1));
+          }
+          return result;
+        };
+        setCategoryValues(flattenTree(resp.data.data));
+      }
+    } catch { setCategoryValues([]); } finally { setLoadingCategoryValues(false); }
+  }, []);
+
+  useEffect(() => {
+    if (fieldType === "category") {
+      const catTable = config.categoryTable || tableName;
+      const catColumn = config.categoryColumn || columnName;
+      if (catTable && catColumn) loadCategoryValues(catTable, catColumn);
+    }
+  }, [fieldType, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);
+
+  // ─── 필터 컬럼 로드 ───
+  const filterTargetTable = useMemo(() => {
+    if (fieldType === "entity") return config.entityTable;
+    if (fieldType === "category") return config.categoryTable || tableName;
+    return null;
+  }, [fieldType, config.entityTable, config.categoryTable, tableName]);
+
+  useEffect(() => {
+    if (!filterTargetTable) { setFilterColumns([]); return; }
+    const load = async () => {
+      setLoadingFilterColumns(true);
+      try {
+        const resp = await apiClient.get(`/table-management/tables/${filterTargetTable}/columns?size=500`);
+        const data = resp.data.data || resp.data;
+        const cols = data.columns || data || [];
+        setFilterColumns(cols.map((col: any) => ({
+          columnName: col.columnName || col.column_name || col.name,
+          columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
+        })));
+      } catch { setFilterColumns([]); } finally { setLoadingFilterColumns(false); }
+    };
+    load();
+  }, [filterTargetTable]);
+
+  // ─── 옵션 관리 (select static) ───
+  const options = config.options || [];
+  const addOption = () => updateConfig("options", [...options, { value: "", label: "" }]);
+  const updateOptionValue = (index: number, value: string) => {
+    const newOpts = [...options];
+    newOpts[index] = { ...newOpts[index], value, label: value };
+    updateConfig("options", newOpts);
+  };
+  const removeOption = (index: number) => updateConfig("options", options.filter((_: any, i: number) => i !== index));
+
+  return (
+    <div className="space-y-4">
+      {/* ═══ 1단계: 필드 유형 선택 ═══ */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">이 필드는 어떤 유형인가요?</p>
+        <p className="text-[11px] text-muted-foreground">유형에 따라 입력 방식이 바뀌어요</p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        {FIELD_TYPE_CARDS.map((card) => {
+          const Icon = card.icon;
+          const isSelected = fieldType === card.value;
+          return (
+            <button
+              key={card.value}
+              type="button"
+              onClick={() => handleFieldTypeChange(card.value)}
+              className={cn(
+                "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[72px]",
+                isSelected
+                  ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                  : "border-border hover:border-primary/50 hover:bg-muted/50"
+              )}
+            >
+              <Icon className={cn("h-4 w-4 mb-1", isSelected ? "text-primary" : "text-muted-foreground")} />
+              <span className={cn("text-[11px] font-medium leading-tight", isSelected ? "text-primary" : "text-foreground")}>{card.label}</span>
+              <span className="text-[9px] text-muted-foreground leading-tight mt-0.5">{card.desc}</span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* ═══ 2단계: 유형별 상세 설정 ═══ */}
+
+      {/* ─── 텍스트/숫자/여러줄: 기본 설정 ─── */}
+      {(fieldType === "text" || fieldType === "number" || fieldType === "textarea") && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">안내 텍스트</span>
+            <Input value={config.placeholder || ""} onChange={(e) => updateConfig("placeholder", e.target.value)} placeholder="입력 안내" className="h-7 w-[160px] text-xs" />
+          </div>
+
+          {fieldType === "text" && (
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">입력 형식</span>
+              <Select value={config.format || "none"} onValueChange={(v) => updateConfig("format", v)}>
+                <SelectTrigger className="h-7 w-[160px] text-xs"><SelectValue placeholder="형식 선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">제한 없음</SelectItem>
+                  <SelectItem value="email">이메일</SelectItem>
+                  <SelectItem value="tel">전화번호</SelectItem>
+                  <SelectItem value="url">URL</SelectItem>
+                  <SelectItem value="currency">통화</SelectItem>
+                  <SelectItem value="biz_no">사업자번호</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
+          {fieldType === "number" && (
+            <div className="space-y-2 pt-1">
+              <p className="text-xs text-muted-foreground">값 범위</p>
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">최소값</Label>
+                  <Input type="number" value={config.min ?? ""} onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)} placeholder="0" className="h-7 text-xs" />
+                </div>
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">최대값</Label>
+                  <Input type="number" value={config.max ?? ""} onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)} placeholder="100" className="h-7 text-xs" />
+                </div>
+                <div className="flex-1">
+                  <Label className="text-[10px] text-muted-foreground">단계</Label>
+                  <Input type="number" value={config.step ?? ""} onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)} placeholder="1" className="h-7 text-xs" />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {fieldType === "textarea" && (
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">줄 수</span>
+              <Input type="number" value={config.rows || 3} onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)} min={2} max={20} className="h-7 w-[160px] text-xs" />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ─── 셀렉트 (직접 입력): 옵션 관리 ─── */}
+      {fieldType === "select" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">옵션 목록</span>
+            <Button type="button" variant="outline" size="sm" onClick={addOption} className="h-7 px-2 text-xs">
+              <Plus className="mr-1 h-3 w-3" />추가
+            </Button>
+          </div>
+          {options.length > 0 ? (
+            <div className="max-h-40 space-y-1.5 overflow-y-auto">
+              {options.map((option: any, index: number) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Input value={option.value || ""} onChange={(e) => updateOptionValue(index, e.target.value)} placeholder={`옵션 ${index + 1}`} className="h-8 flex-1 text-sm" />
+                  <Button type="button" variant="ghost" size="icon" onClick={() => removeOption(index)} className="text-destructive h-8 w-8 shrink-0"><Trash2 className="h-4 w-4" /></Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-6 text-muted-foreground">
+              <List className="mx-auto mb-2 h-8 w-8 opacity-30" />
+              <p className="text-sm">아직 옵션이 없어요</p>
+              <p className="text-xs">위의 추가 버튼으로 옵션을 만들어보세요</p>
+            </div>
+          )}
+          {options.length > 0 && (
+            <div className="border-t pt-3 mt-3">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">기본 선택값</span>
+                <Select value={config.defaultValue || "_none_"} onValueChange={(v) => updateConfig("defaultValue", v === "_none_" ? "" : v)}>
+                  <SelectTrigger className="h-8 w-[160px] text-sm"><SelectValue placeholder="선택 안함" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="_none_">선택 안함</SelectItem>
+                    {options.map((opt: any, i: number) => (<SelectItem key={`d-${i}`} value={opt.value || `_idx_${i}`}>{opt.label || opt.value || `옵션 ${i + 1}`}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ─── 카테고리 ─── */}
+      {fieldType === "category" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <FolderTree className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">카테고리</span>
+          </div>
+          {config.source === "code" && config.codeGroup && (
+            <div className="rounded-md border bg-background p-3">
+              <p className="text-xs text-muted-foreground">코드 그룹</p>
+              <p className="mt-0.5 text-sm font-medium">{config.codeGroup}</p>
+            </div>
+          )}
+          <div className="rounded-md border bg-background p-3">
+            <div className="flex gap-6">
+              <div><p className="text-xs text-muted-foreground">테이블</p><p className="text-sm font-medium">{config.categoryTable || tableName || "-"}</p></div>
+              <div><p className="text-xs text-muted-foreground">컬럼</p><p className="text-sm font-medium">{config.categoryColumn || columnName || "-"}</p></div>
+            </div>
+          </div>
+          {loadingCategoryValues && <div className="text-muted-foreground flex items-center gap-2 text-xs"><Loader2 className="h-3 w-3 animate-spin" />카테고리 값 로딩 중...</div>}
+          {categoryValues.length > 0 && (
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">{categoryValues.length}개의 값이 있어요</p>
+              <div className="max-h-28 overflow-y-auto rounded-md border bg-background p-2 space-y-0.5">
+                {categoryValues.map((cv) => (
+                  <div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5 text-xs">
+                    <span className="shrink-0 font-mono text-[10px] text-muted-foreground">{cv.valueCode}</span>
+                    <span className="truncate">{cv.valueLabel}</span>
+                  </div>
+                ))}
+              </div>
+              <div className="mt-3 flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">기본 선택값</span>
+                <Select value={config.defaultValue || "_none_"} onValueChange={(v) => updateConfig("defaultValue", v === "_none_" ? "" : v)}>
+                  <SelectTrigger className="h-8 w-[160px] text-sm"><SelectValue placeholder="선택 안함" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="_none_">선택 안함</SelectItem>
+                    {categoryValues.map((cv) => (<SelectItem key={cv.valueCode} value={cv.valueCode}>{cv.valueLabel}</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+          {!loadingCategoryValues && categoryValues.length === 0 && (
+            <p className="text-[10px] text-amber-600">카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.</p>
+          )}
+        </div>
+      )}
+
+      {/* ─── 테이블 참조 (entity) ─── */}
+      {fieldType === "entity" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Database className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">테이블 참조</span>
+          </div>
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">참조 테이블</p>
+            <Select value={config.entityTable || ""} onValueChange={(v) => onChange({ ...config, entityTable: v, entityValueColumn: "", entityLabelColumn: "" })}>
+              <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="테이블을 선택해주세요" /></SelectTrigger>
+              <SelectContent>
+                {tables.map((t) => (<SelectItem key={t.tableName} value={t.tableName}>{t.displayName || t.tableComment ? `${t.displayName || t.tableComment} (${t.tableName})` : t.tableName}</SelectItem>))}
+              </SelectContent>
+            </Select>
+          </div>
+          {loadingColumns && <div className="text-muted-foreground flex items-center gap-2 text-xs"><Loader2 className="h-3 w-3 animate-spin" />컬럼 목록 로딩 중...</div>}
+          {entityColumns.length > 0 && (
+            <div className="space-y-3">
+              <div>
+                <p className="mb-1.5 text-xs text-muted-foreground">실제 저장되는 값</p>
+                <Select value={config.entityValueColumn || ""} onValueChange={(v) => updateConfig("entityValueColumn", v)}>
+                  <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="컬럼 선택" /></SelectTrigger>
+                  <SelectContent>{entityColumns.map((col) => (<SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel}</SelectItem>))}</SelectContent>
+                </Select>
+              </div>
+              <div>
+                <p className="mb-1.5 text-xs text-muted-foreground">사용자에게 보여지는 텍스트</p>
+                <Select value={config.entityLabelColumn || ""} onValueChange={(v) => updateConfig("entityLabelColumn", v)}>
+                  <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="컬럼 선택" /></SelectTrigger>
+                  <SelectContent>{entityColumns.map((col) => (<SelectItem key={col.columnName} value={col.columnName}>{col.columnLabel}</SelectItem>))}</SelectContent>
+                </Select>
+              </div>
+              <p className="text-[11px] text-muted-foreground">엔티티 선택 시 같은 폼의 관련 필드가 자동으로 채워져요</p>
+            </div>
+          )}
+          {config.entityTable && !loadingColumns && entityColumns.length === 0 && (
+            <p className="text-[10px] text-amber-600">선택한 테이블의 컬럼 정보를 불러올 수 없어요.</p>
+          )}
+        </div>
+      )}
+
+      {/* ─── 채번 (테이블 기반) ─── */}
+      {fieldType === "numbering" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <ListOrdered className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">채번 규칙</span>
+          </div>
+          {numberingTableName ? (
+            <div className="rounded-md border bg-background p-2">
+              <p className="text-xs text-muted-foreground">대상 테이블</p>
+              <p className="text-sm font-medium mt-0.5">{numberingTableName}</p>
+            </div>
+          ) : (
+            <p className="text-xs text-amber-600">화면에 연결된 테이블이 없어서 채번 규칙을 불러올 수 없어요.</p>
+          )}
+          {numberingTableName && (
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">채번 규칙</p>
+              {loadingRules ? (
+                <div className="text-muted-foreground flex items-center gap-2 text-xs py-1"><Loader2 className="h-3 w-3 animate-spin" />채번 규칙 로딩 중...</div>
+              ) : numberingRules.length > 0 ? (
+                <Select value={config.autoGeneration?.numberingRuleId || ""} onValueChange={(v) => {
+                  onChange({ ...config, autoGeneration: { ...config.autoGeneration, type: "numbering_rule" as AutoGenerationType, numberingRuleId: v, tableName: numberingTableName } });
+                }}>
+                  <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="채번 규칙 선택" /></SelectTrigger>
+                  <SelectContent>
+                    {numberingRules.map((rule) => (<SelectItem key={rule.ruleId} value={String(rule.ruleId)}>{rule.ruleName} ({rule.separator || "-"}{"{번호}"})</SelectItem>))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <p className="text-xs text-muted-foreground">이 테이블에 등록된 채번 규칙이 없어요</p>
+              )}
+            </div>
+          )}
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">읽기전용</p>
+              <p className="text-[11px] text-muted-foreground">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
+            </div>
+            <Switch checked={config.readonly !== false} onCheckedChange={(checked) => updateConfig("readonly", checked)} />
+          </div>
+        </div>
+      )}
+
+      {/* ─── 데이터 필터 (선택형 + 테이블 있을 때만) ─── */}
+      {isSelectGroup && fieldType !== "select" && filterTargetTable && (
+        <div className="rounded-lg border bg-muted/30 p-4">
+          <FilterConditionsSection
+            filters={(config.filters as V2SelectFilter[]) || []}
+            columns={filterColumns}
+            loadingColumns={loadingFilterColumns}
+            targetTable={filterTargetTable}
+            onFiltersChange={(filters) => updateConfig("filters", filters)}
+          />
+        </div>
+      )}
+
+      {/* ═══ 3단계: 고급 설정 ═══ */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", advancedOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 선택형: 선택 방식, 복수 선택, 검색 등 */}
+            {isSelectGroup && (
+              <>
+                <div>
+                  <p className="mb-1.5 text-xs text-muted-foreground">선택 방식</p>
+                  <Select value={config.mode || "dropdown"} onValueChange={(v) => updateConfig("mode", v)}>
+                    <SelectTrigger className="h-8 text-sm"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="dropdown">드롭다운</SelectItem>
+                      <SelectItem value="combobox">검색 가능 드롭다운</SelectItem>
+                      <SelectItem value="radio">라디오 버튼</SelectItem>
+                      <SelectItem value="check">체크박스</SelectItem>
+                      <Separator className="my-1" />
+                      <SelectItem value="tag">태그 선택</SelectItem>
+                      <SelectItem value="toggle">토글</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between py-1">
+                    <div><p className="text-sm">여러 개 선택</p><p className="text-[11px] text-muted-foreground">한 번에 여러 값을 선택할 수 있어요</p></div>
+                    <Switch checked={config.multiple || false} onCheckedChange={(v) => updateConfig("multiple", v)} />
+                  </div>
+                  {config.multiple && (
+                    <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                      <div className="flex items-center justify-between py-1">
+                        <span className="text-xs text-muted-foreground">최대 선택 개수</span>
+                        <Input type="number" value={config.maxSelect ?? ""} onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)} placeholder="제한 없음" min={1} className="h-7 w-[100px] text-xs" />
+                      </div>
+                    </div>
+                  )}
+                  <div className="flex items-center justify-between py-1">
+                    <div><p className="text-sm">검색 기능</p><p className="text-[11px] text-muted-foreground">옵션이 많을 때 검색으로 찾을 수 있어요</p></div>
+                    <Switch checked={config.searchable || false} onCheckedChange={(v) => updateConfig("searchable", v)} />
+                  </div>
+                  <div className="flex items-center justify-between py-1">
+                    <div><p className="text-sm">선택 초기화</p><p className="text-[11px] text-muted-foreground">선택한 값을 지울 수 있는 X 버튼이 표시돼요</p></div>
+                    <Switch checked={config.allowClear !== false} onCheckedChange={(v) => updateConfig("allowClear", v)} />
+                  </div>
+                </div>
+              </>
+            )}
+
+            {/* 입력형: 자동 생성 */}
+            {!isSelectGroup && fieldType !== "numbering" && (
+              <div className="space-y-3">
+                <div className="flex items-center justify-between py-1">
+                  <div><p className="text-sm">자동 생성</p><p className="text-[11px] text-muted-foreground">값이 자동으로 채워져요</p></div>
+                  <Switch checked={config.autoGeneration?.enabled || false} onCheckedChange={(checked) => updateConfig("autoGeneration", { ...config.autoGeneration || { type: "none", enabled: false }, enabled: checked })} />
+                </div>
+                {config.autoGeneration?.enabled && (
+                  <div className="ml-1 border-l-2 border-primary/20 pl-3">
+                    <div>
+                      <p className="mb-1.5 text-xs text-muted-foreground">생성 방식</p>
+                      <Select value={config.autoGeneration?.type || "none"} onValueChange={(v: AutoGenerationType) => updateConfig("autoGeneration", { ...config.autoGeneration, type: v })}>
+                        <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="자동생성 타입 선택" /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">자동생성 없음</SelectItem>
+                          <SelectItem value="uuid">UUID 생성</SelectItem>
+                          <SelectItem value="current_user">현재 사용자 ID</SelectItem>
+                          <SelectItem value="current_time">현재 시간</SelectItem>
+                          <SelectItem value="sequence">순차 번호</SelectItem>
+                          <SelectItem value="company_code">회사 코드</SelectItem>
+                          <SelectItem value="department">부서 코드</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
+                      <p className="text-[11px] text-muted-foreground mt-1">{AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}</p>
+                    )}
+                  </div>
+                )}
+
+                {/* 입력 마스크 */}
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <span className="text-xs text-muted-foreground">입력 마스크</span>
+                    <p className="text-[10px] text-muted-foreground mt-0.5"># = 숫자, A = 문자, * = 모두</p>
+                  </div>
+                  <Input value={config.mask || ""} onChange={(e) => updateConfig("mask", e.target.value)} placeholder="###-####-####" className="h-7 w-[140px] text-xs" />
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2FieldConfigPanel.displayName = "V2FieldConfigPanel";
+
+export default V2FieldConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2FileUploadConfigPanel.tsx b/frontend/components/v2/config-panels/V2FileUploadConfigPanel.tsx
new file mode 100644
index 00000000..9d09df8e
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2FileUploadConfigPanel.tsx
@@ -0,0 +1,371 @@
+"use client";
+
+/**
+ * V2FileUpload 설정 패널
+ * 토스식 단계별 UX: 파일 형식(카드선택) -> 제한 설정 -> 동작/표시(Switch) -> 고급 설정(접힘)
+ */
+
+import React, { useState, useMemo, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Settings,
+  ChevronDown,
+  FileText,
+  Image,
+  Archive,
+  File,
+  FileImage,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { FileUploadConfig } from "@/lib/registry/components/v2-file-upload/types";
+import { V2FileUploadDefaultConfig } from "@/lib/registry/components/v2-file-upload/config";
+
+const FILE_TYPE_CARDS = [
+  { value: "*/*", label: "모든 파일", icon: File, desc: "제한 없음" },
+  { value: "image/*", label: "이미지", icon: Image, desc: "JPG, PNG 등" },
+  { value: ".pdf,.doc,.docx,.xls,.xlsx", label: "문서", icon: FileText, desc: "PDF, Word, Excel" },
+  { value: "image/*,.pdf", label: "이미지+PDF", icon: FileImage, desc: "이미지와 PDF" },
+  { value: ".zip,.rar,.7z", label: "압축 파일", icon: Archive, desc: "ZIP, RAR 등" },
+] as const;
+
+const VARIANT_CARDS = [
+  { value: "default", label: "기본", desc: "기본 스타일" },
+  { value: "outlined", label: "테두리", desc: "테두리 강조" },
+  { value: "filled", label: "채움", desc: "배경 채움" },
+] as const;
+
+const SIZE_CARDS = [
+  { value: "sm", label: "작게" },
+  { value: "md", label: "보통" },
+  { value: "lg", label: "크게" },
+] as const;
+
+interface V2FileUploadConfigPanelProps {
+  config: FileUploadConfig;
+  onChange: (config: Partial<FileUploadConfig>) => void;
+  screenTableName?: string;
+}
+
+export const V2FileUploadConfigPanel: React.FC<V2FileUploadConfigPanelProps> = ({
+  config: propConfig,
+  onChange,
+  screenTableName,
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const config = useMemo(() => ({
+    ...V2FileUploadDefaultConfig,
+    ...propConfig,
+  }), [propConfig]);
+
+  const maxSizeMB = useMemo(() => {
+    return (config.maxSize || 10 * 1024 * 1024) / (1024 * 1024);
+  }, [config.maxSize]);
+
+  const updateConfig = useCallback(<K extends keyof FileUploadConfig>(
+    field: K,
+    value: FileUploadConfig[K]
+  ) => {
+    const newConfig = { ...config, [field]: value };
+    onChange({ [field]: value });
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  }, [config, onChange]);
+
+  const handleMaxSizeChange = useCallback((value: string) => {
+    const mb = parseFloat(value) || 10;
+    updateConfig("maxSize", mb * 1024 * 1024);
+  }, [updateConfig]);
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 허용 파일 형식 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">허용 파일 형식</p>
+        <div className="grid grid-cols-2 gap-2">
+          {FILE_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = (config.accept || "*/*") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("accept", card.value)}
+                className={cn(
+                  "flex items-center gap-2 rounded-lg border p-2.5 text-left transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <div className="min-w-0">
+                  <span className="text-xs font-medium block">{card.label}</span>
+                  <span className="text-[10px] text-muted-foreground block">
+                    {card.desc}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+        <p className="text-[11px] text-muted-foreground">업로드 가능한 파일 유형을 선택해요</p>
+      </div>
+
+      {/* ─── 2단계: 파일 제한 설정 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">파일 제한</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">안내 텍스트</span>
+            <Input
+              value={config.placeholder || ""}
+              onChange={(e) => updateConfig("placeholder", e.target.value)}
+              placeholder="파일을 선택하세요"
+              className="h-7 w-[160px] text-xs"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <span className="text-xs text-muted-foreground">최대 크기 (MB)</span>
+              <Input
+                type="number"
+                min={1}
+                max={100}
+                value={maxSizeMB}
+                onChange={(e) => handleMaxSizeChange(e.target.value)}
+                className="mt-1 h-7 text-xs"
+              />
+            </div>
+            <div>
+              <span className="text-xs text-muted-foreground">최대 파일 수</span>
+              <Input
+                type="number"
+                min={1}
+                max={50}
+                value={config.maxFiles || 10}
+                onChange={(e) => updateConfig("maxFiles", parseInt(e.target.value) || 10)}
+                className="mt-1 h-7 text-xs"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 3단계: 동작 설정 (Switch) ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">동작 설정</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">다중 파일 선택</p>
+              <p className="text-[11px] text-muted-foreground">여러 파일을 한 번에 선택할 수 있어요</p>
+            </div>
+            <Switch
+              checked={config.multiple !== false}
+              onCheckedChange={(checked) => updateConfig("multiple", checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">파일 삭제 허용</p>
+              <p className="text-[11px] text-muted-foreground">업로드된 파일을 삭제할 수 있어요</p>
+            </div>
+            <Switch
+              checked={config.allowDelete !== false}
+              onCheckedChange={(checked) => updateConfig("allowDelete", checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">파일 다운로드 허용</p>
+              <p className="text-[11px] text-muted-foreground">업로드된 파일을 다운로드할 수 있어요</p>
+            </div>
+            <Switch
+              checked={config.allowDownload !== false}
+              onCheckedChange={(checked) => updateConfig("allowDownload", checked)}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 4단계: 표시 설정 (Switch) ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">표시 설정</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">미리보기 표시</p>
+              <p className="text-[11px] text-muted-foreground">이미지 파일의 미리보기를 보여줘요</p>
+            </div>
+            <Switch
+              checked={config.showPreview !== false}
+              onCheckedChange={(checked) => updateConfig("showPreview", checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">파일 목록 표시</p>
+              <p className="text-[11px] text-muted-foreground">업로드된 파일의 목록을 보여줘요</p>
+            </div>
+            <Switch
+              checked={config.showFileList !== false}
+              onCheckedChange={(checked) => updateConfig("showFileList", checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">파일 크기 표시</p>
+              <p className="text-[11px] text-muted-foreground">각 파일의 크기를 함께 보여줘요</p>
+            </div>
+            <Switch
+              checked={config.showFileSize !== false}
+              onCheckedChange={(checked) => updateConfig("showFileSize", checked)}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 5단계: 스타일 카드 선택 ─── */}
+      <div className="space-y-3">
+        <p className="text-sm font-medium">스타일</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div>
+            <span className="text-xs text-muted-foreground">스타일 변형</span>
+            <div className="mt-1.5 grid grid-cols-3 gap-2">
+              {VARIANT_CARDS.map((card) => {
+                const isSelected = (config.variant || "default") === card.value;
+                return (
+                  <button
+                    key={card.value}
+                    type="button"
+                    onClick={() => updateConfig("variant", card.value as "default" | "outlined" | "filled")}
+                    className={cn(
+                      "flex flex-col items-center rounded-md border p-2 text-center transition-all",
+                      isSelected
+                        ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                        : "border-border hover:border-primary/50 hover:bg-muted/50"
+                    )}
+                  >
+                    <span className="text-xs font-medium">{card.label}</span>
+                    <span className="text-[10px] text-muted-foreground">{card.desc}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          <div>
+            <span className="text-xs text-muted-foreground">크기</span>
+            <div className="mt-1.5 grid grid-cols-3 gap-2">
+              {SIZE_CARDS.map((card) => {
+                const isSelected = (config.size || "md") === card.value;
+                return (
+                  <button
+                    key={card.value}
+                    type="button"
+                    onClick={() => updateConfig("size", card.value as "sm" | "md" | "lg")}
+                    className={cn(
+                      "flex items-center justify-center rounded-md border p-2 text-center transition-all",
+                      isSelected
+                        ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                        : "border-border hover:border-primary/50 hover:bg-muted/50"
+                    )}
+                  >
+                    <span className="text-xs font-medium">{card.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 6단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 도움말 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">도움말</span>
+              <Input
+                value={config.helperText || ""}
+                onChange={(e) => updateConfig("helperText", e.target.value)}
+                placeholder="안내 문구 입력"
+                className="h-7 w-[160px] text-xs"
+              />
+            </div>
+
+            {/* 필수 입력 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">필수 입력</p>
+                <p className="text-[11px] text-muted-foreground">파일 첨부를 필수로 해요</p>
+              </div>
+              <Switch
+                checked={config.required || false}
+                onCheckedChange={(checked) => updateConfig("required", checked)}
+              />
+            </div>
+
+            {/* 읽기 전용 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">읽기 전용</p>
+                <p className="text-[11px] text-muted-foreground">파일 목록만 볼 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.readonly || false}
+                onCheckedChange={(checked) => updateConfig("readonly", checked)}
+              />
+            </div>
+
+            {/* 비활성화 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">비활성화</p>
+                <p className="text-[11px] text-muted-foreground">컴포넌트를 비활성화해요</p>
+              </div>
+              <Switch
+                checked={config.disabled || false}
+                onCheckedChange={(checked) => updateConfig("disabled", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2FileUploadConfigPanel.displayName = "V2FileUploadConfigPanel";
+
+export default V2FileUploadConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx b/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
index 6c3750bf..d81abe5c 100644
--- a/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2GroupConfigPanel.tsx
@@ -2,17 +2,78 @@
 
 /**
  * V2Group 설정 패널
- * 통합 그룹 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 그룹 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
-import React from "react";
-import { Label } from "@/components/ui/label";
+import React, { useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
-import { Plus, Trash2 } from "lucide-react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  LayoutList,
+  Rows3,
+  ChevronsDownUp,
+  SquareStack,
+  AppWindow,
+  FileInput,
+  Settings,
+  ChevronDown,
+  Plus,
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 그룹 타입 카드 정의 ───
+const GROUP_TYPE_CARDS = [
+  {
+    value: "section",
+    icon: LayoutList,
+    title: "섹션",
+    description: "기본 영역 구분이에요",
+  },
+  {
+    value: "tabs",
+    icon: Rows3,
+    title: "탭",
+    description: "탭으로 내용을 나눠요",
+  },
+  {
+    value: "accordion",
+    icon: ChevronsDownUp,
+    title: "아코디언",
+    description: "접었다 펼 수 있어요",
+  },
+  {
+    value: "card",
+    icon: SquareStack,
+    title: "카드 섹션",
+    description: "카드 형태로 묶어요",
+  },
+  {
+    value: "modal",
+    icon: AppWindow,
+    title: "모달",
+    description: "팝업으로 표시해요",
+  },
+  {
+    value: "form-modal",
+    icon: FileInput,
+    title: "폼 모달",
+    description: "입력 폼 팝업이에요",
+  },
+] as const;
 
 interface V2GroupConfigPanelProps {
   config: Record<string, any>;
@@ -23,12 +84,17 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 설정 업데이트 핸들러
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
-  // 탭 관리
+  const currentGroupType = config.groupType || config.type || "section";
+  const isSectionType = currentGroupType === "section" || currentGroupType === "accordion";
+  const isModalType = currentGroupType === "modal" || currentGroupType === "form-modal";
+  const isTabsType = currentGroupType === "tabs";
+
   const tabs = config.tabs || [];
 
   const addTab = () => {
@@ -49,168 +115,241 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
 
   return (
     <div className="space-y-4">
-      {/* 그룹 타입 */}
+      {/* ─── 1단계: 그룹 타입 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">그룹 타입</Label>
-        <Select
-          value={config.groupType || config.type || "section"}
-          onValueChange={(value) => updateConfig("groupType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="section">섹션</SelectItem>
-            <SelectItem value="tabs">탭</SelectItem>
-            <SelectItem value="accordion">아코디언</SelectItem>
-            <SelectItem value="card">카드 섹션</SelectItem>
-            <SelectItem value="modal">모달</SelectItem>
-            <SelectItem value="form-modal">폼 모달</SelectItem>
-          </SelectContent>
-        </Select>
+        <p className="text-sm font-medium">어떤 방식으로 영역을 구성하나요?</p>
+        <div className="grid grid-cols-3 gap-2">
+          {GROUP_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = currentGroupType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("groupType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50",
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      <Separator />
+      {/* ─── 2단계: 기본 설정 ─── */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <span className="text-sm font-medium">기본 설정</span>
 
-      {/* 제목 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">제목</Label>
-        <Input
-          value={config.title || ""}
-          onChange={(e) => updateConfig("title", e.target.value)}
-          placeholder="그룹 제목"
-          className="h-8 text-xs"
-        />
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">제목</span>
+          <Input
+            value={config.title || ""}
+            onChange={(e) => updateConfig("title", e.target.value)}
+            placeholder="그룹 제목"
+            className="h-8 w-[180px] text-sm"
+          />
+        </div>
       </div>
 
-      {/* 탭 설정 */}
-      {config.groupType === "tabs" && (
-        <div className="space-y-2">
+      {/* ─── 3단계: 타입별 설정 ─── */}
+
+      {/* 탭 타입: 탭 목록 관리 */}
+      {isTabsType && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
           <div className="flex items-center justify-between">
-            <Label className="text-xs font-medium">탭 목록</Label>
+            <div className="flex items-center gap-2">
+              <Rows3 className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">탭 목록</span>
+            </div>
             <Button
               type="button"
-              variant="ghost"
+              variant="outline"
               size="sm"
               onClick={addTab}
-              className="h-6 px-2 text-xs"
+              className="h-7 px-2 text-xs"
             >
-              <Plus className="h-3 w-3 mr-1" />
+              <Plus className="mr-1 h-3 w-3" />
               추가
             </Button>
           </div>
-          <div className="space-y-2 max-h-40 overflow-y-auto">
-            {tabs.map((tab: any, index: number) => (
-              <div key={index} className="flex items-center gap-2">
-                <Input
-                  value={tab.id || ""}
-                  onChange={(e) => updateTab(index, "id", e.target.value)}
-                  placeholder="ID"
-                  className="h-7 text-xs flex-1"
-                />
-                <Input
-                  value={tab.label || ""}
-                  onChange={(e) => updateTab(index, "label", e.target.value)}
-                  placeholder="라벨"
-                  className="h-7 text-xs flex-1"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => removeTab(index)}
-                  className="h-7 w-7 p-0 text-destructive"
-                >
-                  <Trash2 className="h-3 w-3" />
-                </Button>
-              </div>
-            ))}
-            {tabs.length === 0 && (
-              <p className="text-xs text-muted-foreground text-center py-2">
-                탭을 추가해주세요
-              </p>
-            )}
-          </div>
-        </div>
-      )}
 
-      {/* 섹션/아코디언 옵션 */}
-      {(config.groupType === "section" || config.groupType === "accordion" || !config.groupType) && (
-        <div className="space-y-3">
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="collapsible"
-              checked={config.collapsible || false}
-              onCheckedChange={(checked) => updateConfig("collapsible", checked)}
-            />
-            <label htmlFor="collapsible" className="text-xs">접기/펴기 가능</label>
-          </div>
-
-          {config.collapsible && (
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="defaultOpen"
-                checked={config.defaultOpen !== false}
-                onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
-              />
-              <label htmlFor="defaultOpen" className="text-xs">기본으로 펼침</label>
+          {tabs.length > 0 ? (
+            <div className="max-h-40 space-y-1.5 overflow-y-auto">
+              {tabs.map((tab: any, index: number) => (
+                <div key={index} className="flex items-center gap-1.5">
+                  <Input
+                    value={tab.id || ""}
+                    onChange={(e) => updateTab(index, "id", e.target.value)}
+                    placeholder="ID"
+                    className="h-8 flex-1 text-sm"
+                  />
+                  <Input
+                    value={tab.label || ""}
+                    onChange={(e) => updateTab(index, "label", e.target.value)}
+                    placeholder="라벨"
+                    className="h-8 flex-1 text-sm"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeTab(index)}
+                    className="text-destructive h-8 w-8 shrink-0"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-6 text-muted-foreground">
+              <Rows3 className="mx-auto mb-2 h-8 w-8 opacity-30" />
+              <p className="text-sm">아직 탭이 없어요</p>
+              <p className="text-xs mt-0.5">위의 추가 버튼으로 탭을 만들어보세요</p>
             </div>
           )}
         </div>
       )}
 
-      {/* 모달 옵션 */}
-      {(config.groupType === "modal" || config.groupType === "form-modal") && (
-        <div className="space-y-3">
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">모달 크기</Label>
-            <Select
-              value={config.modalSize || "md"}
-              onValueChange={(value) => updateConfig("modalSize", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="sm">작게 (400px)</SelectItem>
-                <SelectItem value="md">보통 (600px)</SelectItem>
-                <SelectItem value="lg">크게 (800px)</SelectItem>
-                <SelectItem value="xl">매우 크게 (1000px)</SelectItem>
-                <SelectItem value="full">전체 화면</SelectItem>
-              </SelectContent>
-            </Select>
+      {/* 섹션/아코디언 타입: 접기/펴기 옵션 */}
+      {isSectionType && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">접기/펴기</p>
+              <p className="text-[11px] text-muted-foreground">
+                사용자가 섹션을 접었다 펼 수 있어요
+              </p>
+            </div>
+            <Switch
+              checked={config.collapsible || false}
+              onCheckedChange={(checked) => updateConfig("collapsible", checked)}
+            />
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="closeable"
+          {config.collapsible && (
+            <div className="ml-4 border-l-2 border-primary/20 pl-3">
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">기본으로 펼침</p>
+                  <p className="text-[11px] text-muted-foreground">
+                    처음에 펼쳐진 상태로 보여줘요
+                  </p>
+                </div>
+                <Switch
+                  checked={config.defaultOpen !== false}
+                  onCheckedChange={(checked) => updateConfig("defaultOpen", checked)}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 모달/폼모달 타입: 모달 옵션 */}
+      {isModalType && (
+        <div className="space-y-3">
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <AppWindow className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">모달 설정</span>
+            </div>
+
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">모달 크기</span>
+              <Select
+                value={config.modalSize || "md"}
+                onValueChange={(value) => updateConfig("modalSize", value)}
+              >
+                <SelectTrigger className="h-8 w-[180px] text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="sm">작게 (400px)</SelectItem>
+                  <SelectItem value="md">보통 (600px)</SelectItem>
+                  <SelectItem value="lg">크게 (800px)</SelectItem>
+                  <SelectItem value="xl">매우 크게 (1000px)</SelectItem>
+                  <SelectItem value="full">전체 화면</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">닫기 버튼</p>
+              <p className="text-[11px] text-muted-foreground">
+                모달 우측 상단에 X 버튼이 표시돼요
+              </p>
+            </div>
+            <Switch
               checked={config.closeable !== false}
               onCheckedChange={(checked) => updateConfig("closeable", checked)}
             />
-            <label htmlFor="closeable" className="text-xs">닫기 버튼 표시</label>
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="backdrop"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">배경 클릭 닫기</p>
+              <p className="text-[11px] text-muted-foreground">
+                모달 바깥을 클릭하면 닫혀요
+              </p>
+            </div>
+            <Switch
               checked={config.backdrop !== false}
               onCheckedChange={(checked) => updateConfig("backdrop", checked)}
             />
-            <label htmlFor="backdrop" className="text-xs">배경 클릭으로 닫기</label>
           </div>
         </div>
       )}
 
-      {/* 헤더 표시 여부 */}
-      <Separator />
-      <div className="flex items-center space-x-2">
-        <Checkbox
-          id="showHeader"
-          checked={config.showHeader !== false}
-          onCheckedChange={(checked) => updateConfig("showHeader", checked)}
-        />
-        <label htmlFor="showHeader" className="text-xs">헤더 표시</label>
-      </div>
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">헤더 표시</p>
+                <p className="text-[11px] text-muted-foreground">
+                  그룹 상단에 제목 영역이 표시돼요
+                </p>
+              </div>
+              <Switch
+                checked={config.showHeader !== false}
+                onCheckedChange={(checked) => updateConfig("showHeader", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 };
@@ -218,5 +357,3 @@ export const V2GroupConfigPanel: React.FC<V2GroupConfigPanelProps> = ({
 V2GroupConfigPanel.displayName = "V2GroupConfigPanel";
 
 export default V2GroupConfigPanel;
-
-
diff --git a/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx b/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx
index db234c91..35897fb5 100644
--- a/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2HierarchyConfigPanel.tsx
@@ -2,15 +2,28 @@
 
 /**
  * V2Hierarchy 설정 패널
- * 통합 계층 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 계층 타입 카드 선택 -> 데이터 소스 설정 -> 고급 설정(접힘)
  */
 
 import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  GitFork,
+  Building2,
+  Layers,
+  ListTree,
+  Database,
+  FileJson,
+  Globe,
+  Settings,
+  ChevronDown,
+  Loader2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import { tableTypeApi } from "@/lib/api/screen";
 
 interface V2HierarchyConfigPanelProps {
@@ -28,24 +41,33 @@ interface ColumnOption {
   displayName: string;
 }
 
+const HIERARCHY_TYPE_CARDS = [
+  { value: "tree", icon: GitFork, title: "트리", description: "계층 구조를 표시해요" },
+  { value: "org-chart", icon: Building2, title: "조직도", description: "조직 구조를 보여줘요" },
+  { value: "bom", icon: Layers, title: "BOM", description: "부품 구성을 관리해요" },
+  { value: "cascading", icon: ListTree, title: "연쇄 선택", description: "단계별로 선택해요" },
+] as const;
+
+const DATA_SOURCE_CARDS = [
+  { value: "static", icon: FileJson, title: "정적 데이터", description: "직접 입력해요" },
+  { value: "db", icon: Database, title: "데이터베이스", description: "테이블에서 가져와요" },
+  { value: "api", icon: Globe, title: "API", description: "외부 API로 조회해요" },
+] as const;
+
 export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 테이블 목록
   const [tables, setTables] = useState<TableOption[]>([]);
   const [loadingTables, setLoadingTables] = useState(false);
-  
-  // 컬럼 목록
   const [columns, setColumns] = useState<ColumnOption[]>([]);
   const [loadingColumns, setLoadingColumns] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
-  // 설정 업데이트 핸들러
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
-  // 테이블 목록 로드
   useEffect(() => {
     const loadTables = async () => {
       setLoadingTables(true);
@@ -64,14 +86,9 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
     loadTables();
   }, []);
 
-  // 테이블 선택 시 컬럼 목록 로드
   useEffect(() => {
     const loadColumns = async () => {
-      if (!config.tableName) {
-        setColumns([]);
-        return;
-      }
-      
+      if (!config.tableName) { setColumns([]); return; }
       setLoadingColumns(true);
       try {
         const data = await tableTypeApi.getColumns(config.tableName);
@@ -88,37 +105,47 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
     loadColumns();
   }, [config.tableName]);
 
+  const hierarchyType = config.hierarchyType || config.type || "tree";
+  const dataSource = config.dataSource || "static";
+
   return (
     <div className="space-y-4">
-      {/* 계층 타입 */}
+      {/* ─── 1단계: 계층 타입 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">계층 타입</Label>
-        <Select
-          value={config.hierarchyType || config.type || "tree"}
-          onValueChange={(value) => updateConfig("hierarchyType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="tree">트리</SelectItem>
-            <SelectItem value="org-chart">조직도</SelectItem>
-            <SelectItem value="bom">BOM (Bill of Materials)</SelectItem>
-            <SelectItem value="cascading">연쇄 선택박스</SelectItem>
-          </SelectContent>
-        </Select>
+        <p className="text-sm font-medium">어떤 계층 구조를 사용하나요?</p>
+        <div className="grid grid-cols-2 gap-2">
+          {HIERARCHY_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = hierarchyType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("hierarchyType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      <Separator />
-
-      {/* 뷰 모드 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">표시 방식</Label>
+      {/* ─── 2단계: 표시 방식 ─── */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <span className="text-sm font-medium">표시 방식</span>
         <Select
           value={config.viewMode || "tree"}
           onValueChange={(value) => updateConfig("viewMode", value)}
         >
-          <SelectTrigger className="h-8 text-xs">
+          <SelectTrigger className="h-8 text-sm">
             <SelectValue placeholder="방식 선택" />
           </SelectTrigger>
           <SelectContent>
@@ -128,279 +155,345 @@ export const V2HierarchyConfigPanel: React.FC<V2HierarchyConfigPanelProps> = ({
             <SelectItem value="cascading">연쇄 드롭다운</SelectItem>
           </SelectContent>
         </Select>
+        <p className="text-[11px] text-muted-foreground">데이터를 어떤 형태로 보여줄지 선택해요</p>
       </div>
 
-      <Separator />
-
-      {/* 데이터 소스 */}
+      {/* ─── 3단계: 데이터 소스 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">데이터 소스</Label>
-        <Select
-          value={config.dataSource || "static"}
-          onValueChange={(value) => updateConfig("dataSource", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="소스 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="static">정적 데이터</SelectItem>
-            <SelectItem value="db">데이터베이스</SelectItem>
-            <SelectItem value="api">API</SelectItem>
-          </SelectContent>
-        </Select>
+        <p className="text-sm font-medium">데이터는 어디서 가져오나요?</p>
+        <div className="grid grid-cols-3 gap-2">
+          {DATA_SOURCE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = dataSource === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("dataSource", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      {/* DB 설정 */}
-      {config.dataSource === "db" && (
-        <div className="space-y-3">
-          {/* 테이블 선택 */}
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">테이블</Label>
-            <Select
-              value={config.tableName || ""}
-              onValueChange={(value) => {
-                updateConfig("tableName", value);
-                // 테이블 변경 시 컬럼 초기화
-                updateConfig("idColumn", "");
-                updateConfig("parentIdColumn", "");
-                updateConfig("labelColumn", "");
-              }}
-              disabled={loadingTables}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder={loadingTables ? "로딩 중..." : "테이블 선택"} />
-              </SelectTrigger>
-              <SelectContent>
-                {tables.map((table) => (
-                  <SelectItem key={table.tableName} value={table.tableName}>
-                    {table.displayName}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+      {/* ─── DB 소스 설정 ─── */}
+      {dataSource === "db" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Database className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">테이블 설정</span>
           </div>
-          
-          {/* 컬럼 선택 */}
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">데이터 테이블</p>
+            {loadingTables ? (
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                테이블 로딩 중...
+              </div>
+            ) : (
+              <Select
+                value={config.tableName || ""}
+                onValueChange={(value) => {
+                  updateConfig("tableName", value);
+                  updateConfig("idColumn", "");
+                  updateConfig("parentIdColumn", "");
+                  updateConfig("labelColumn", "");
+                }}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="테이블 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((table) => (
+                    <SelectItem key={table.tableName} value={table.tableName}>
+                      {table.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
           {config.tableName && (
             <>
-              <div className="grid grid-cols-2 gap-2">
-                <div className="space-y-2">
-                  <Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
-                  <Select
-                    value={config.idColumn || ""}
-                    onValueChange={(value) => updateConfig("idColumn", value)}
-                    disabled={loadingColumns}
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {columns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          {col.displayName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+              {loadingColumns ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  컬럼 로딩 중...
                 </div>
-                <div className="space-y-2">
-                  <Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
-                  <Select
-                    value={config.parentIdColumn || ""}
-                    onValueChange={(value) => updateConfig("parentIdColumn", value)}
-                    disabled={loadingColumns}
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {columns.map((col) => (
-                        <SelectItem key={col.columnName} value={col.columnName}>
-                          {col.displayName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-              <div className="space-y-2">
-                <Label className="text-[10px] text-muted-foreground">표시 컬럼</Label>
-                <Select
-                  value={config.labelColumn || ""}
-                  onValueChange={(value) => updateConfig("labelColumn", value)}
-                  disabled={loadingColumns}
-                >
-                  <SelectTrigger className="h-8 text-xs">
-                    <SelectValue placeholder={loadingColumns ? "로딩 중..." : "선택"} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {columns.map((col) => (
-                      <SelectItem key={col.columnName} value={col.columnName}>
-                        {col.displayName}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
+              ) : (
+                <>
+                  <div className="space-y-2">
+                    <p className="text-xs text-muted-foreground">컬럼 매핑</p>
+                    <div className="flex gap-2">
+                      <div className="flex-1">
+                        <Label className="text-[10px] text-muted-foreground">ID 컬럼</Label>
+                        <Select
+                          value={config.idColumn || ""}
+                          onValueChange={(value) => updateConfig("idColumn", value)}
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue placeholder="선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columns.map((col) => (
+                              <SelectItem key={col.columnName} value={col.columnName}>
+                                {col.displayName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex-1">
+                        <Label className="text-[10px] text-muted-foreground">부모 ID 컬럼</Label>
+                        <Select
+                          value={config.parentIdColumn || ""}
+                          onValueChange={(value) => updateConfig("parentIdColumn", value)}
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue placeholder="선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {columns.map((col) => (
+                              <SelectItem key={col.columnName} value={col.columnName}>
+                                {col.displayName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <p className="mb-1.5 text-xs text-muted-foreground">표시 컬럼</p>
+                    <Select
+                      value={config.labelColumn || ""}
+                      onValueChange={(value) => updateConfig("labelColumn", value)}
+                    >
+                      <SelectTrigger className="h-8 text-sm">
+                        <SelectValue placeholder="표시할 컬럼 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {columns.map((col) => (
+                          <SelectItem key={col.columnName} value={col.columnName}>
+                            {col.displayName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </>
+              )}
             </>
           )}
         </div>
       )}
 
-      {/* API 설정 */}
-      {config.dataSource === "api" && (
-        <div className="space-y-2">
-          <Label className="text-[10px] text-muted-foreground">API 엔드포인트</Label>
-          <Input
-            value={config.apiEndpoint || ""}
-            onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
-            placeholder="/api/hierarchy"
-            className="h-8 text-xs"
-          />
+      {/* ─── API 소스 설정 ─── */}
+      {dataSource === "api" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Globe className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">API 설정</span>
+          </div>
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">엔드포인트 URL</p>
+            <Input
+              value={config.apiEndpoint || ""}
+              onChange={(e) => updateConfig("apiEndpoint", e.target.value)}
+              placeholder="/api/hierarchy"
+              className="h-8 text-sm"
+            />
+          </div>
         </div>
       )}
 
-      <Separator />
+      {/* ─── BOM 전용 설정 ─── */}
+      {hierarchyType === "bom" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Layers className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">BOM 설정</span>
+          </div>
 
-      {/* 옵션 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">옵션</Label>
-        
-        <div className="space-y-2">
-          <Label className="text-[10px] text-muted-foreground">최대 레벨</Label>
-          <Input
-            type="number"
-            value={config.maxLevel || ""}
-            onChange={(e) => updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)}
-            placeholder="제한 없음"
-            min="1"
-            className="h-8 text-xs"
-          />
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">수량 표시</p>
+              <p className="text-[11px] text-muted-foreground">부품별 수량이 표시돼요</p>
+            </div>
+            <Switch
+              checked={config.showQuantity !== false}
+              onCheckedChange={(checked) => updateConfig("showQuantity", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">수량 컬럼</span>
+            <Select
+              value={config.quantityColumn || ""}
+              onValueChange={(value) => updateConfig("quantityColumn", value)}
+              disabled={loadingColumns || !config.tableName}
+            >
+              <SelectTrigger className="h-7 w-[160px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {columns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
+      )}
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="draggable"
-            checked={config.draggable || false}
-            onCheckedChange={(checked) => updateConfig("draggable", checked)}
-          />
-          <label htmlFor="draggable" className="text-xs">드래그 앤 드롭</label>
+      {/* ─── Cascading 전용 설정 ─── */}
+      {hierarchyType === "cascading" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <ListTree className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">연쇄 선택 설정</span>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">부모 필드</span>
+            <Select
+              value={config.parentField || ""}
+              onValueChange={(value) => updateConfig("parentField", value)}
+              disabled={loadingColumns || !config.tableName}
+            >
+              <SelectTrigger className="h-7 w-[160px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {columns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">부모 변경 시 초기화</p>
+              <p className="text-[11px] text-muted-foreground">상위 항목이 바뀌면 하위 선택이 초기화돼요</p>
+            </div>
+            <Switch
+              checked={config.clearOnParentChange !== false}
+              onCheckedChange={(checked) => updateConfig("clearOnParentChange", checked)}
+            />
+          </div>
         </div>
+      )}
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="selectable"
-            checked={config.selectable !== false}
-            onCheckedChange={(checked) => updateConfig("selectable", checked)}
-          />
-          <label htmlFor="selectable" className="text-xs">선택 가능</label>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="multiSelect"
-            checked={config.multiSelect || false}
-            onCheckedChange={(checked) => updateConfig("multiSelect", checked)}
-          />
-          <label htmlFor="multiSelect" className="text-xs">다중 선택</label>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="showCheckbox"
-            checked={config.showCheckbox || false}
-            onCheckedChange={(checked) => updateConfig("showCheckbox", checked)}
-          />
-          <label htmlFor="showCheckbox" className="text-xs">체크박스 표시</label>
-        </div>
-
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="expandAll"
-            checked={config.expandAll || false}
-            onCheckedChange={(checked) => updateConfig("expandAll", checked)}
-          />
-          <label htmlFor="expandAll" className="text-xs">기본 전체 펼침</label>
-        </div>
-      </div>
-
-      {/* BOM 전용 설정 */}
-      {config.hierarchyType === "bom" && (
-        <>
-          <Separator />
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">BOM 설정</Label>
-            
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="showQuantity"
-                checked={config.showQuantity !== false}
-                onCheckedChange={(checked) => updateConfig("showQuantity", checked)}
+      {/* ─── 고급 설정 (Collapsible) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 최대 레벨 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">최대 레벨</span>
+              <Input
+                type="number"
+                value={config.maxLevel || ""}
+                onChange={(e) => updateConfig("maxLevel", e.target.value ? Number(e.target.value) : undefined)}
+                placeholder="제한 없음"
+                min="1"
+                className="h-7 w-[120px] text-xs"
               />
-              <label htmlFor="showQuantity" className="text-xs">수량 표시</label>
             </div>
 
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">수량 컬럼</Label>
-              <Select
-                value={config.quantityColumn || ""}
-                onValueChange={(value) => updateConfig("quantityColumn", value)}
-                disabled={loadingColumns || !config.tableName}
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {columns.map((col) => (
-                    <SelectItem key={col.columnName} value={col.columnName}>
-                      {col.displayName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+            {/* 토글 옵션들 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">드래그 앤 드롭</p>
+                <p className="text-[11px] text-muted-foreground">항목을 끌어서 위치를 변경할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.draggable || false}
+                onCheckedChange={(checked) => updateConfig("draggable", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">선택 가능</p>
+                <p className="text-[11px] text-muted-foreground">항목을 클릭해서 선택할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.selectable !== false}
+                onCheckedChange={(checked) => updateConfig("selectable", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">다중 선택</p>
+                <p className="text-[11px] text-muted-foreground">여러 항목을 동시에 선택할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.multiSelect || false}
+                onCheckedChange={(checked) => updateConfig("multiSelect", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">체크박스 표시</p>
+                <p className="text-[11px] text-muted-foreground">각 항목에 체크박스가 표시돼요</p>
+              </div>
+              <Switch
+                checked={config.showCheckbox || false}
+                onCheckedChange={(checked) => updateConfig("showCheckbox", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">기본 전체 펼침</p>
+                <p className="text-[11px] text-muted-foreground">처음부터 모든 노드가 열려있어요</p>
+              </div>
+              <Switch
+                checked={config.expandAll || false}
+                onCheckedChange={(checked) => updateConfig("expandAll", checked)}
+              />
             </div>
           </div>
-        </>
-      )}
-
-      {/* 연쇄 선택박스 전용 설정 */}
-      {config.hierarchyType === "cascading" && (
-        <>
-          <Separator />
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">연쇄 설정</Label>
-            
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">부모 필드</Label>
-              <Select
-                value={config.parentField || ""}
-                onValueChange={(value) => updateConfig("parentField", value)}
-                disabled={loadingColumns || !config.tableName}
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  {columns.map((col) => (
-                    <SelectItem key={col.columnName} value={col.columnName}>
-                      {col.displayName}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="clearOnParentChange"
-                checked={config.clearOnParentChange !== false}
-                onCheckedChange={(checked) => updateConfig("clearOnParentChange", checked)}
-              />
-              <label htmlFor="clearOnParentChange" className="text-xs">부모 변경 시 값 초기화</label>
-            </div>
-          </div>
-        </>
-      )}
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 };
diff --git a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
index 6e25d811..9059741a 100644
--- a/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2InputConfigPanel.tsx
@@ -2,15 +2,30 @@
 
 /**
  * V2Input 설정 패널
- * 통합 입력 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 기본 설정 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
 import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  Settings,
+  ChevronDown,
+  Loader2,
+  Type,
+  Hash,
+  Lock,
+  AlignLeft,
+  SlidersHorizontal,
+  Palette,
+  ListOrdered,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
 import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
 import { getAvailableNumberingRules } from "@/lib/api/numberingRule";
@@ -19,45 +34,43 @@ import { NumberingRuleConfig } from "@/types/numbering-rule";
 interface V2InputConfigPanelProps {
   config: Record<string, any>;
   onChange: (config: Record<string, any>) => void;
-  menuObjid?: number; // 메뉴 OBJID (채번 규칙 필터링용)
+  menuObjid?: number;
+  allComponents?: any[];
 }
 
-export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config, onChange, menuObjid }) => {
-  // 채번 규칙 목록 상태
+export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({
+  config,
+  onChange,
+  menuObjid,
+  allComponents = [],
+}) => {
   const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
   const [loadingRules, setLoadingRules] = useState(false);
-  
-  // 부모 메뉴 목록 상태 (채번규칙 사용을 위한 선택)
   const [parentMenus, setParentMenus] = useState<any[]>([]);
   const [loadingMenus, setLoadingMenus] = useState(false);
-  
-  // 선택된 메뉴 OBJID
   const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | undefined>(() => {
     return config.autoGeneration?.selectedMenuObjid || menuObjid;
   });
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
-  // 설정 업데이트 핸들러
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
-  // 부모 메뉴 목록 로드 (사용자 메뉴의 레벨 2만)
   useEffect(() => {
     const loadMenus = async () => {
       setLoadingMenus(true);
       try {
         const { apiClient } = await import("@/lib/api/client");
         const response = await apiClient.get("/admin/menus");
-        
         if (response.data.success && response.data.data) {
           const allMenus = response.data.data;
-          
-          // 사용자 메뉴(menu_type='1')의 레벨 2만 필터링
-          const level2UserMenus = allMenus.filter((menu: any) => 
-            menu.menu_type === '1' && menu.lev === 2
-          );
-          
-          setParentMenus(level2UserMenus);
+          const userMenus = allMenus.filter((menu: any) => {
+            const menuType = menu.menu_type || menu.menuType;
+            const level = menu.level || menu.lev || menu.LEVEL;
+            return menuType === "1" && (level === 2 || level === 3 || level === "2" || level === "3");
+          });
+          setParentMenus(userMenus);
         }
       } catch (error) {
         console.error("부모 메뉴 로드 실패:", error);
@@ -68,22 +81,19 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
     loadMenus();
   }, []);
 
-  // 채번 규칙 목록 로드 (선택된 메뉴 기준)
+  const inputType = config.inputType || config.type || "text";
+
   useEffect(() => {
     const loadRules = async () => {
-      if (config.autoGeneration?.type !== "numbering_rule") {
-        return;
-      }
-
+      const isNumbering = inputType === "numbering" || config.autoGeneration?.type === "numbering_rule";
+      if (!isNumbering) return;
       if (!selectedMenuObjid) {
         setNumberingRules([]);
         return;
       }
-      
       setLoadingRules(true);
       try {
         const response = await getAvailableNumberingRules(selectedMenuObjid);
-        
         if (response.success && response.data) {
           setNumberingRules(response.data);
         }
@@ -94,462 +104,729 @@ export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config,
         setLoadingRules(false);
       }
     };
-
     loadRules();
-  }, [selectedMenuObjid, config.autoGeneration?.type]);
+  }, [selectedMenuObjid, config.autoGeneration?.type, inputType]);
 
   return (
     <div className="space-y-4">
-      {/* 입력 타입 */}
+      {/* ─── 1단계: 입력 타입 선택 (카드 방식) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">입력 타입</Label>
-        <Select
-          value={config.inputType || config.type || "text"}
-          onValueChange={(value) => updateConfig("inputType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="입력 타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="text">텍스트</SelectItem>
-            <SelectItem value="number">숫자</SelectItem>
-            <SelectItem value="password">비밀번호</SelectItem>
-            <SelectItem value="textarea">여러 줄 텍스트</SelectItem>
-            <SelectItem value="slider">슬라이더</SelectItem>
-            <SelectItem value="color">색상 선택</SelectItem>
-            <SelectItem value="numbering">채번 (자동생성)</SelectItem>
-          </SelectContent>
-        </Select>
+        <div className="flex items-center gap-2">
+          <Type className="text-muted-foreground h-4 w-4" />
+          <p className="text-sm font-medium">입력 타입</p>
+        </div>
+        <p className="text-muted-foreground text-[11px]">입력 필드의 종류를 선택해요</p>
       </div>
 
-      {/* 채번 타입 전용 설정 */}
-      {config.inputType === "numbering" && (
-        <div className="space-y-3">
-          <Separator />
-          <div className="rounded-md border border-primary/20 bg-primary/10 p-3">
-            <p className="text-xs font-medium text-primary">채번 타입 안내</p>
-            <p className="mt-1 text-[10px] text-primary">
-              채번 규칙은 <strong>테이블 관리</strong>에서 컬럼별로 설정됩니다.
-              <br />
-              화면에 배치된 컬럼의 채번 규칙이 자동으로 적용됩니다.
-            </p>
-          </div>
-          
-          {/* 채번 필드는 기본적으로 읽기전용 */}
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="numberingReadonly"
-              checked={config.readonly !== false}
-              onCheckedChange={(checked) => {
-                updateConfig("readonly", checked);
-              }}
-            />
-            <Label htmlFor="numberingReadonly" className="text-xs font-medium cursor-pointer">
-              읽기전용 (권장)
-            </Label>
-          </div>
-          <p className="text-muted-foreground text-[10px] pl-6">
-            채번 필드는 자동으로 생성되므로 읽기전용을 권장합니다
-          </p>
-        </div>
-      )}
-
-      {/* 채번 타입이 아닌 경우에만 추가 설정 표시 */}
-      {config.inputType !== "numbering" && (
-        <>
-          <Separator />
-
-          {/* 형식 (텍스트/숫자용) */}
-          {(config.inputType === "text" || !config.inputType) && (
-        <div className="space-y-2">
-          <Label className="text-xs font-medium">입력 형식</Label>
-          <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
-            <SelectTrigger className="h-8 text-xs">
-              <SelectValue placeholder="형식 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="none">제한 없음</SelectItem>
-              <SelectItem value="email">이메일</SelectItem>
-              <SelectItem value="tel">전화번호</SelectItem>
-              <SelectItem value="url">URL</SelectItem>
-              <SelectItem value="currency">통화</SelectItem>
-              <SelectItem value="biz_no">사업자번호</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      )}
-
-      {/* 플레이스홀더 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">플레이스홀더</Label>
-        <Input
-          value={config.placeholder || ""}
-          onChange={(e) => updateConfig("placeholder", e.target.value)}
-          placeholder="입력 안내 텍스트"
-          className="h-8 text-xs"
-        />
-      </div>
-
-      {/* 숫자/슬라이더 전용 설정 */}
-      {(config.inputType === "number" || config.inputType === "slider") && (
-        <>
-          <Separator />
-          <div className="grid grid-cols-3 gap-2">
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">최소값</Label>
-              <Input
-                type="number"
-                value={config.min ?? ""}
-                onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="0"
-                className="h-8 text-xs"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">최대값</Label>
-              <Input
-                type="number"
-                value={config.max ?? ""}
-                onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="100"
-                className="h-8 text-xs"
-              />
-            </div>
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">단계</Label>
-              <Input
-                type="number"
-                value={config.step ?? ""}
-                onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
-                placeholder="1"
-                className="h-8 text-xs"
-              />
-            </div>
-          </div>
-        </>
-      )}
-
-      {/* 여러 줄 텍스트 전용 설정 */}
-      {config.inputType === "textarea" && (
-        <div className="space-y-2">
-          <Label className="text-xs font-medium">줄 수</Label>
-          <Input
-            type="number"
-            value={config.rows || 3}
-            onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
-            min={2}
-            max={20}
-            className="h-8 text-xs"
-          />
-        </div>
-      )}
-
-      {/* 마스크 입력 (선택) */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">입력 마스크 (선택)</Label>
-        <Input
-          value={config.mask || ""}
-          onChange={(e) => updateConfig("mask", e.target.value)}
-          placeholder="예: ###-####-####"
-          className="h-8 text-xs"
-        />
-        <p className="text-muted-foreground text-[10px]"># = 숫자, A = 문자, * = 모든 문자</p>
-      </div>
-
-      <Separator />
-
-      {/* 자동생성 기능 */}
-      <div className="space-y-3">
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="autoGenerationEnabled"
-            checked={config.autoGeneration?.enabled || false}
-            onCheckedChange={(checked) => {
-              const currentConfig = config.autoGeneration || { type: "none", enabled: false };
-              updateConfig("autoGeneration", {
-                ...currentConfig,
-                enabled: checked as boolean,
-              });
+      <div className="grid grid-cols-2 gap-2">
+        {[
+          { value: "text", icon: Type, label: "텍스트", desc: "일반 텍스트 입력" },
+          { value: "number", icon: Hash, label: "숫자", desc: "숫자만 입력" },
+          { value: "password", icon: Lock, label: "비밀번호", desc: "마스킹 처리" },
+          { value: "textarea", icon: AlignLeft, label: "여러 줄", desc: "긴 텍스트 입력" },
+          { value: "slider", icon: SlidersHorizontal, label: "슬라이더", desc: "범위 선택" },
+          { value: "color", icon: Palette, label: "색상", desc: "색상 선택기" },
+          { value: "numbering", icon: ListOrdered, label: "채번", desc: "자동 번호 생성" },
+        ].map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            onClick={() => {
+              if (item.value === "numbering") {
+                const autoMenuObjid = selectedMenuObjid || menuObjid;
+                onChange({
+                  ...config,
+                  inputType: "numbering",
+                  autoGeneration: {
+                    ...config.autoGeneration,
+                    type: "numbering_rule" as AutoGenerationType,
+                    selectedMenuObjid: autoMenuObjid,
+                  },
+                  readonly: config.readonly ?? true,
+                });
+                if (autoMenuObjid) setSelectedMenuObjid(autoMenuObjid);
+              } else {
+                updateConfig("inputType", item.value);
+              }
             }}
-          />
-          <Label htmlFor="autoGenerationEnabled" className="text-xs font-medium cursor-pointer">
-            자동생성 활성화
-          </Label>
-        </div>
+            className={cn(
+              "flex items-center gap-2 rounded-lg border p-2.5 text-left transition-all",
+              inputType === item.value
+                ? "border-primary bg-primary/5 ring-primary/20 ring-1"
+                : "border-border hover:border-primary/30 hover:bg-muted/30",
+            )}
+          >
+            <item.icon
+              className={cn("h-4 w-4 shrink-0", inputType === item.value ? "text-primary" : "text-muted-foreground")}
+            />
+            <div className="min-w-0">
+              <span
+                className={cn(
+                  "block text-xs font-medium",
+                  inputType === item.value ? "text-primary" : "text-foreground",
+                )}
+              >
+                {item.label}
+              </span>
+              <span className="text-muted-foreground block truncate text-[10px]">{item.desc}</span>
+            </div>
+          </button>
+        ))}
+      </div>
 
-        {/* 자동생성 타입 선택 */}
-        {config.autoGeneration?.enabled && (
-          <div className="space-y-3 pl-6">
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">자동생성 타입</Label>
+      {/* ─── 채번 타입 전용 설정 ─── */}
+      {inputType === "numbering" && (
+        <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+          <div className="flex items-center gap-2">
+            <ListOrdered className="text-primary h-4 w-4" />
+            <span className="text-sm font-medium">채번 규칙</span>
+          </div>
+
+          <div>
+            <p className="text-muted-foreground mb-1.5 text-xs">적용할 메뉴</p>
+            {menuObjid && selectedMenuObjid === menuObjid ? (
+              <div className="bg-background rounded-md border p-2">
+                <p className="text-muted-foreground text-xs">현재 화면 메뉴 사용 중</p>
+                <div className="mt-1 flex items-center justify-between">
+                  <p className="text-sm font-medium">
+                    {parentMenus.find((m: any) => m.objid === menuObjid)?.menu_name_kor ||
+                      parentMenus.find((m: any) => m.objid === menuObjid)?.translated_name ||
+                      `메뉴 #${menuObjid}`}
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => setSelectedMenuObjid(undefined)}
+                    className="text-muted-foreground hover:text-foreground text-[10px]"
+                  >
+                    변경
+                  </button>
+                </div>
+              </div>
+            ) : loadingMenus ? (
+              <div className="text-muted-foreground flex items-center gap-2 py-1 text-xs">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                메뉴 목록 로딩 중...
+              </div>
+            ) : (
               <Select
-                value={config.autoGeneration?.type || "none"}
-                onValueChange={(value: AutoGenerationType) => {
-                  const currentConfig = config.autoGeneration || { type: "none", enabled: false };
-                  updateConfig("autoGeneration", {
-                    ...currentConfig,
-                    type: value,
+                value={selectedMenuObjid ? String(selectedMenuObjid) : ""}
+                onValueChange={(v) => {
+                  const objid = Number(v);
+                  setSelectedMenuObjid(objid);
+                  onChange({
+                    ...config,
+                    autoGeneration: {
+                      ...config.autoGeneration,
+                      type: "numbering_rule" as AutoGenerationType,
+                      selectedMenuObjid: objid,
+                    },
                   });
                 }}
               >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="자동생성 타입 선택" />
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="메뉴를 선택해주세요" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="none">자동생성 없음</SelectItem>
-                  <SelectItem value="uuid">UUID 생성</SelectItem>
-                  <SelectItem value="current_user">현재 사용자 ID</SelectItem>
-                  <SelectItem value="current_time">현재 시간</SelectItem>
-                  <SelectItem value="sequence">순차 번호</SelectItem>
-                  <SelectItem value="numbering_rule">채번 규칙</SelectItem>
-                  <SelectItem value="random_string">랜덤 문자열</SelectItem>
-                  <SelectItem value="random_number">랜덤 숫자</SelectItem>
-                  <SelectItem value="company_code">회사 코드</SelectItem>
-                  <SelectItem value="department">부서 코드</SelectItem>
+                  {parentMenus.map((menu: any) => (
+                    <SelectItem key={menu.objid} value={String(menu.objid)}>
+                      {menu.menu_name_kor || menu.translated_name || menu.menu_name || `메뉴 ${menu.objid}`}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
+            )}
+          </div>
 
-              {/* 선택된 타입 설명 */}
-              {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
-                <p className="text-muted-foreground text-[10px]">
-                  {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
-                </p>
+          {selectedMenuObjid && (
+            <div>
+              <p className="text-muted-foreground mb-1.5 text-xs">채번 규칙</p>
+              {loadingRules ? (
+                <div className="text-muted-foreground flex items-center gap-2 py-1 text-xs">
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                  채번 규칙 로딩 중...
+                </div>
+              ) : numberingRules.length > 0 ? (
+                <Select
+                  value={config.autoGeneration?.numberingRuleId ? String(config.autoGeneration.numberingRuleId) : ""}
+                  onValueChange={(v) => {
+                    onChange({
+                      ...config,
+                      autoGeneration: {
+                        ...config.autoGeneration,
+                        type: "numbering_rule" as AutoGenerationType,
+                        numberingRuleId: Number(v),
+                        selectedMenuObjid,
+                      },
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-8 text-sm">
+                    <SelectValue placeholder="채번 규칙 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {numberingRules.map((rule) => (
+                      <SelectItem key={rule.ruleId} value={String(rule.ruleId)}>
+                        {rule.ruleName} ({rule.separator || "-"}
+                        {"{번호}"})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <p className="text-muted-foreground text-xs">선택한 메뉴에 등록된 채번 규칙이 없어요</p>
               )}
             </div>
+          )}
 
-            {/* 채번 규칙 선택 */}
-            {config.autoGeneration?.type === "numbering_rule" && (
-              <>
-                {/* 부모 메뉴 선택 */}
-                <div className="space-y-2">
-                  <Label className="text-xs font-medium">
-                    대상 메뉴 <span className="text-destructive">*</span>
-                  </Label>
-                  <Select
-                    value={selectedMenuObjid?.toString() || ""}
-                    onValueChange={(value) => {
-                      const menuId = parseInt(value);
-                      setSelectedMenuObjid(menuId);
-                      
-                      updateConfig("autoGeneration", {
-                        ...config.autoGeneration,
-                        selectedMenuObjid: menuId,
-                      });
-                    }}
-                    disabled={loadingMenus}
-                  >
-                    <SelectTrigger className="h-8 text-xs">
-                      <SelectValue placeholder={loadingMenus ? "메뉴 로딩 중..." : "채번규칙을 사용할 메뉴 선택"} />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {parentMenus.length === 0 ? (
-                        <SelectItem value="no-menus" disabled>
-                          사용 가능한 메뉴가 없습니다
-                        </SelectItem>
-                      ) : (
-                        parentMenus.map((menu) => (
-                          <SelectItem key={menu.objid} value={menu.objid.toString()}>
-                            {menu.menu_name_kor}
-                          </SelectItem>
-                        ))
-                      )}
-                    </SelectContent>
-                  </Select>
-                </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">읽기전용</p>
+              <p className="text-muted-foreground text-[11px]">채번 필드는 자동 생성되므로 읽기전용을 권장해요</p>
+            </div>
+            <Switch
+              checked={config.readonly !== false}
+              onCheckedChange={(checked) => updateConfig("readonly", checked)}
+            />
+          </div>
+        </div>
+      )}
 
-                {/* 채번 규칙 선택 */}
-                {selectedMenuObjid ? (
-                  <div className="space-y-2">
-                    <Label className="text-xs font-medium">
-                      채번 규칙 <span className="text-destructive">*</span>
-                    </Label>
-                    <Select
-                      value={config.autoGeneration?.options?.numberingRuleId || ""}
-                      onValueChange={(value) => {
-                        updateConfig("autoGeneration", {
-                          ...config.autoGeneration,
-                          options: {
-                            ...config.autoGeneration?.options,
-                            numberingRuleId: value,
-                          },
-                        });
-                      }}
-                      disabled={loadingRules}
-                    >
-                      <SelectTrigger className="h-8 text-xs">
-                        <SelectValue placeholder={loadingRules ? "규칙 로딩 중..." : "채번 규칙 선택"} />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {numberingRules.length === 0 ? (
-                          <SelectItem value="no-rules" disabled>
-                            사용 가능한 규칙이 없습니다
-                          </SelectItem>
-                        ) : (
-                          numberingRules.map((rule) => (
-                            <SelectItem key={rule.ruleId} value={rule.ruleId}>
-                              {rule.ruleName}
-                            </SelectItem>
-                          ))
-                        )}
-                      </SelectContent>
-                    </Select>
-                  </div>
-                ) : (
-                  <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-xs text-amber-800">
-                    먼저 대상 메뉴를 선택하세요
-                  </div>
-                )}
-              </>
+      {/* ─── 채번 타입이 아닌 경우: 기본 설정 ─── */}
+      {inputType !== "numbering" && (
+        <>
+          {/* 기본 설정 영역 */}
+          <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+            {/* 안내 텍스트 (placeholder) */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-muted-foreground text-xs">안내 텍스트</span>
+              <Input
+                value={config.placeholder || ""}
+                onChange={(e) => updateConfig("placeholder", e.target.value)}
+                placeholder="입력 안내"
+                className="h-7 w-[160px] text-xs"
+              />
+            </div>
+
+            {/* 입력 형식 - 텍스트 타입 전용 */}
+            {(inputType === "text" || !config.inputType) && (
+              <div className="flex items-center justify-between py-1">
+                <span className="text-muted-foreground text-xs">입력 형식</span>
+                <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
+                  <SelectTrigger className="h-7 w-[160px] text-xs">
+                    <SelectValue placeholder="형식 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">제한 없음</SelectItem>
+                    <SelectItem value="email">이메일</SelectItem>
+                    <SelectItem value="tel">전화번호</SelectItem>
+                    <SelectItem value="url">URL</SelectItem>
+                    <SelectItem value="currency">통화</SelectItem>
+                    <SelectItem value="biz_no">사업자번호</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
             )}
 
-            {/* 자동생성 옵션 (랜덤/순차용) */}
-            {config.autoGeneration?.type &&
-              ["random_string", "random_number", "sequence"].includes(config.autoGeneration.type) && (
-                <div className="space-y-2">
-                  {/* 길이 설정 */}
-                  {["random_string", "random_number"].includes(config.autoGeneration.type) && (
-                    <div className="space-y-1">
-                      <Label className="text-xs font-medium">길이</Label>
-                      <Input
-                        type="number"
-                        min="1"
-                        max="50"
-                        value={config.autoGeneration?.options?.length || 8}
-                        onChange={(e) => {
-                          updateConfig("autoGeneration", {
-                            ...config.autoGeneration,
-                            options: {
-                              ...config.autoGeneration?.options,
-                              length: parseInt(e.target.value) || 8,
-                            },
-                          });
-                        }}
-                        className="h-8 text-xs"
-                      />
-                    </div>
-                  )}
+            {/* 입력 마스크 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <span className="text-muted-foreground text-xs">입력 마스크</span>
+                <p className="text-muted-foreground mt-0.5 text-[10px]"># = 숫자, A = 문자, * = 모두</p>
+              </div>
+              <Input
+                value={config.mask || ""}
+                onChange={(e) => updateConfig("mask", e.target.value)}
+                placeholder="###-####-####"
+                className="h-7 w-[160px] text-xs"
+              />
+            </div>
 
-                  {/* 접두사 */}
-                  <div className="space-y-1">
-                    <Label className="text-xs font-medium">접두사</Label>
+            {/* 숫자/슬라이더: 범위 설정 */}
+            {(inputType === "number" || inputType === "slider") && (
+              <div className="space-y-2 pt-1">
+                <p className="text-muted-foreground text-xs">값 범위</p>
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <Label className="text-muted-foreground text-[10px]">최소값</Label>
                     <Input
-                      value={config.autoGeneration?.options?.prefix || ""}
-                      onChange={(e) => {
-                        updateConfig("autoGeneration", {
-                          ...config.autoGeneration,
-                          options: {
-                            ...config.autoGeneration?.options,
-                            prefix: e.target.value,
-                          },
-                        });
-                      }}
-                      placeholder="예: INV-"
-                      className="h-8 text-xs"
+                      type="number"
+                      value={config.min ?? ""}
+                      onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="0"
+                      className="h-7 text-xs"
                     />
                   </div>
-
-                  {/* 접미사 */}
-                  <div className="space-y-1">
-                    <Label className="text-xs font-medium">접미사</Label>
+                  <div className="flex-1">
+                    <Label className="text-muted-foreground text-[10px]">최대값</Label>
                     <Input
-                      value={config.autoGeneration?.options?.suffix || ""}
-                      onChange={(e) => {
-                        updateConfig("autoGeneration", {
-                          ...config.autoGeneration,
-                          options: {
-                            ...config.autoGeneration?.options,
-                            suffix: e.target.value,
-                          },
-                        });
-                      }}
-                      className="h-8 text-xs"
+                      type="number"
+                      value={config.max ?? ""}
+                      onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="100"
+                      className="h-7 text-xs"
                     />
                   </div>
-
-                  {/* 미리보기 */}
-                  <div className="space-y-1">
-                    <Label className="text-xs font-medium">미리보기</Label>
-                    <div className="rounded border bg-muted p-2 text-xs font-mono">
-                      {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
-                    </div>
+                  <div className="flex-1">
+                    <Label className="text-muted-foreground text-[10px]">단계</Label>
+                    <Input
+                      type="number"
+                      value={config.step ?? ""}
+                      onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="1"
+                      className="h-7 text-xs"
+                    />
                   </div>
                 </div>
-              )}
+              </div>
+            )}
+
+            {/* 여러 줄 텍스트: 줄 수 */}
+            {inputType === "textarea" && (
+              <div className="flex items-center justify-between py-1">
+                <span className="text-muted-foreground text-xs">줄 수</span>
+                <Input
+                  type="number"
+                  value={config.rows || 3}
+                  onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
+                  min={2}
+                  max={20}
+                  className="h-7 w-[160px] text-xs"
+                />
+              </div>
+            )}
           </div>
-        )}
-      </div>
+
+          {/* ─── 고급 설정: 자동 생성 (Collapsible) ─── */}
+          <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <Settings className="text-muted-foreground h-4 w-4" />
+                  <span className="text-sm font-medium">고급 설정</span>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                    advancedOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+                {/* 자동 생성 토글 */}
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">자동 생성</p>
+                    <p className="text-muted-foreground text-[11px]">값이 자동으로 채워져요</p>
+                  </div>
+                  <Switch
+                    checked={config.autoGeneration?.enabled || false}
+                    onCheckedChange={(checked) => {
+                      const currentConfig = config.autoGeneration || { type: "none", enabled: false };
+                      updateConfig("autoGeneration", {
+                        ...currentConfig,
+                        enabled: checked as boolean,
+                      });
+                    }}
+                  />
+                </div>
+
+                {config.autoGeneration?.enabled && (
+                  <div className="border-primary/20 ml-1 space-y-3 border-l-2 pl-3">
+                    {/* 자동 생성 타입 */}
+                    <div>
+                      <p className="text-muted-foreground mb-1.5 text-xs">생성 방식</p>
+                      <Select
+                        value={config.autoGeneration?.type || "none"}
+                        onValueChange={(value: AutoGenerationType) => {
+                          const currentConfig = config.autoGeneration || { type: "none", enabled: false };
+                          updateConfig("autoGeneration", {
+                            ...currentConfig,
+                            type: value,
+                          });
+                        }}
+                      >
+                        <SelectTrigger className="h-8 text-sm">
+                          <SelectValue placeholder="자동생성 타입 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">자동생성 없음</SelectItem>
+                          <SelectItem value="uuid">UUID 생성</SelectItem>
+                          <SelectItem value="current_user">현재 사용자 ID</SelectItem>
+                          <SelectItem value="current_time">현재 시간</SelectItem>
+                          <SelectItem value="sequence">순차 번호</SelectItem>
+                          <SelectItem value="numbering_rule">채번 규칙</SelectItem>
+                          <SelectItem value="random_string">랜덤 문자열</SelectItem>
+                          <SelectItem value="random_number">랜덤 숫자</SelectItem>
+                          <SelectItem value="company_code">회사 코드</SelectItem>
+                          <SelectItem value="department">부서 코드</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
+                      <p className="text-muted-foreground text-[11px]">
+                        {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
+                      </p>
+                    )}
+
+                    {/* 채번 규칙 선택 */}
+                    {config.autoGeneration?.type === "numbering_rule" && (
+                      <div className="space-y-3">
+                        <div>
+                          <p className="text-muted-foreground mb-1.5 text-xs">
+                            대상 메뉴 <span className="text-destructive">*</span>
+                          </p>
+                          <Select
+                            value={selectedMenuObjid?.toString() || ""}
+                            onValueChange={(value) => {
+                              const menuId = parseInt(value);
+                              setSelectedMenuObjid(menuId);
+                              updateConfig("autoGeneration", {
+                                ...config.autoGeneration,
+                                selectedMenuObjid: menuId,
+                              });
+                            }}
+                            disabled={loadingMenus}
+                          >
+                            <SelectTrigger className="h-8 text-sm">
+                              <SelectValue placeholder={loadingMenus ? "로딩 중..." : "메뉴 선택"} />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {parentMenus.length === 0 ? (
+                                <SelectItem value="no-menus" disabled>
+                                  사용 가능한 메뉴가 없습니다
+                                </SelectItem>
+                              ) : (
+                                parentMenus.map((menu) => (
+                                  <SelectItem key={menu.objid} value={menu.objid.toString()}>
+                                    {menu.menu_name_kor}
+                                  </SelectItem>
+                                ))
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {selectedMenuObjid ? (
+                          <div>
+                            <p className="text-muted-foreground mb-1.5 text-xs">
+                              채번 규칙 <span className="text-destructive">*</span>
+                            </p>
+                            {loadingRules ? (
+                              <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                                <Loader2 className="h-3 w-3 animate-spin" />
+                                규칙 로딩 중...
+                              </div>
+                            ) : (
+                              <Select
+                                value={config.autoGeneration?.options?.numberingRuleId || ""}
+                                onValueChange={(value) => {
+                                  updateConfig("autoGeneration", {
+                                    ...config.autoGeneration,
+                                    options: {
+                                      ...config.autoGeneration?.options,
+                                      numberingRuleId: value,
+                                    },
+                                  });
+                                }}
+                              >
+                                <SelectTrigger className="h-8 text-sm">
+                                  <SelectValue placeholder="규칙 선택" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {numberingRules.length === 0 ? (
+                                    <SelectItem value="no-rules" disabled>
+                                      사용 가능한 규칙이 없습니다
+                                    </SelectItem>
+                                  ) : (
+                                    numberingRules.map((rule) => (
+                                      <SelectItem key={rule.ruleId} value={rule.ruleId}>
+                                        {rule.ruleName}
+                                      </SelectItem>
+                                    ))
+                                  )}
+                                </SelectContent>
+                              </Select>
+                            )}
+                          </div>
+                        ) : (
+                          <div className="rounded-md border border-amber-200 bg-amber-50 p-2.5 text-xs text-amber-800">
+                            먼저 대상 메뉴를 선택하세요
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    {/* 랜덤/순차 옵션 */}
+                    {config.autoGeneration?.type &&
+                      ["random_string", "random_number", "sequence"].includes(config.autoGeneration.type) && (
+                        <div className="space-y-3">
+                          {["random_string", "random_number"].includes(config.autoGeneration.type) && (
+                            <div className="flex items-center justify-between py-1">
+                              <span className="text-muted-foreground text-xs">길이</span>
+                              <Input
+                                type="number"
+                                min="1"
+                                max="50"
+                                value={config.autoGeneration?.options?.length || 8}
+                                onChange={(e) => {
+                                  updateConfig("autoGeneration", {
+                                    ...config.autoGeneration,
+                                    options: {
+                                      ...config.autoGeneration?.options,
+                                      length: parseInt(e.target.value) || 8,
+                                    },
+                                  });
+                                }}
+                                className="h-7 w-[120px] text-xs"
+                              />
+                            </div>
+                          )}
+
+                          <div className="flex items-center justify-between py-1">
+                            <span className="text-muted-foreground text-xs">접두사</span>
+                            <Input
+                              value={config.autoGeneration?.options?.prefix || ""}
+                              onChange={(e) => {
+                                updateConfig("autoGeneration", {
+                                  ...config.autoGeneration,
+                                  options: {
+                                    ...config.autoGeneration?.options,
+                                    prefix: e.target.value,
+                                  },
+                                });
+                              }}
+                              placeholder="예: INV-"
+                              className="h-7 w-[120px] text-xs"
+                            />
+                          </div>
+
+                          <div className="flex items-center justify-between py-1">
+                            <span className="text-muted-foreground text-xs">접미사</span>
+                            <Input
+                              value={config.autoGeneration?.options?.suffix || ""}
+                              onChange={(e) => {
+                                updateConfig("autoGeneration", {
+                                  ...config.autoGeneration,
+                                  options: {
+                                    ...config.autoGeneration?.options,
+                                    suffix: e.target.value,
+                                  },
+                                });
+                              }}
+                              className="h-7 w-[120px] text-xs"
+                            />
+                          </div>
+
+                          <div>
+                            <span className="text-muted-foreground text-xs">미리보기</span>
+                            <div className="bg-muted mt-1 rounded-md border p-2 font-mono text-xs">
+                              {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                  </div>
+                )}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
         </>
       )}
 
       {/* 데이터 바인딩 설정 */}
       <Separator className="my-2" />
-      <div className="space-y-2">
-        <div className="flex items-center gap-2">
-          <Checkbox
-            id="dataBindingEnabled"
-            checked={!!config.dataBinding?.sourceComponentId}
-            onCheckedChange={(checked) => {
-              if (checked) {
-                updateConfig("dataBinding", {
-                  sourceComponentId: config.dataBinding?.sourceComponentId || "",
-                  sourceColumn: config.dataBinding?.sourceColumn || "",
-                });
-              } else {
-                updateConfig("dataBinding", undefined);
-              }
-            }}
-          />
-          <Label htmlFor="dataBindingEnabled" className="text-xs font-semibold">
-            테이블 선택 데이터 바인딩
-          </Label>
-        </div>
-
-        {config.dataBinding && (
-          <div className="space-y-2 rounded border p-2">
-            <p className="text-[10px] text-muted-foreground">
-              v2-table-list에서 행 선택 시 해당 컬럼 값이 자동으로 채워집니다
-            </p>
-            <div className="space-y-1">
-              <Label className="text-xs font-medium">소스 컴포넌트 ID</Label>
-              <Input
-                value={config.dataBinding?.sourceComponentId || ""}
-                onChange={(e) => {
-                  updateConfig("dataBinding", {
-                    ...config.dataBinding,
-                    sourceComponentId: e.target.value,
-                  });
-                }}
-                placeholder="예: tbl_items"
-                className="h-7 text-xs"
-              />
-              <p className="text-[10px] text-muted-foreground">
-                같은 화면 내 v2-table-list 컴포넌트의 ID
-              </p>
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs font-medium">소스 컬럼명</Label>
-              <Input
-                value={config.dataBinding?.sourceColumn || ""}
-                onChange={(e) => {
-                  updateConfig("dataBinding", {
-                    ...config.dataBinding,
-                    sourceColumn: e.target.value,
-                  });
-                }}
-                placeholder="예: item_number"
-                className="h-7 text-xs"
-              />
-              <p className="text-[10px] text-muted-foreground">
-                선택된 행에서 가져올 컬럼명
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
+      <DataBindingSection config={config} onChange={onChange} allComponents={allComponents} />
     </div>
   );
 };
 
 V2InputConfigPanel.displayName = "V2InputConfigPanel";
 
+/**
+ * 데이터 바인딩 설정 섹션
+ * 같은 화면의 v2-table-list 컴포넌트를 자동 감지하여 드롭다운으로 표시
+ */
+function DataBindingSection({
+  config,
+  onChange,
+  allComponents,
+}: {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  allComponents: any[];
+}) {
+  const [tableColumns, setTableColumns] = useState<string[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+
+  // 같은 화면의 v2-table-list 컴포넌트만 필터링
+  const tableListComponents = React.useMemo(() => {
+    return allComponents.filter((comp) => {
+      const type =
+        comp.componentType || comp.widgetType || comp.componentConfig?.type || (comp.url && comp.url.split("/").pop());
+      return type === "v2-table-list";
+    });
+  }, [allComponents]);
+
+  // 선택된 테이블 컴포넌트의 테이블명 추출
+  const selectedTableComponent = React.useMemo(() => {
+    if (!config.dataBinding?.sourceComponentId) return null;
+    return tableListComponents.find((comp) => comp.id === config.dataBinding.sourceComponentId);
+  }, [tableListComponents, config.dataBinding?.sourceComponentId]);
+
+  const selectedTableName = React.useMemo(() => {
+    if (!selectedTableComponent) return null;
+    return selectedTableComponent.componentConfig?.selectedTable || selectedTableComponent.selectedTable || null;
+  }, [selectedTableComponent]);
+
+  // 선택된 테이블의 컬럼 목록 로드
+  useEffect(() => {
+    if (!selectedTableName) {
+      setTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const { tableTypeApi } = await import("@/lib/api/screen");
+        const response = await tableTypeApi.getTableTypeColumns(selectedTableName);
+        if (response.success && response.data) {
+          const cols = response.data.map((col: any) => col.column_name).filter(Boolean);
+          setTableColumns(cols);
+        }
+      } catch {
+        // 컬럼 정보를 못 가져오면 테이블 컴포넌트의 columns에서 추출
+        const configColumns = selectedTableComponent?.componentConfig?.columns;
+        if (Array.isArray(configColumns)) {
+          setTableColumns(configColumns.map((c: any) => c.columnName).filter(Boolean));
+        }
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [selectedTableName, selectedTableComponent]);
+
+  const updateConfig = (field: string, value: any) => {
+    onChange({ ...config, [field]: value });
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="dataBindingEnabled"
+          checked={!!config.dataBinding?.sourceComponentId}
+          onCheckedChange={(checked) => {
+            if (checked) {
+              const firstTable = tableListComponents[0];
+              updateConfig("dataBinding", {
+                sourceComponentId: firstTable?.id || "",
+                sourceColumn: "",
+              });
+            } else {
+              updateConfig("dataBinding", undefined);
+            }
+          }}
+        />
+        <Label htmlFor="dataBindingEnabled" className="text-xs font-semibold">
+          테이블 선택 데이터 바인딩
+        </Label>
+      </div>
+
+      {config.dataBinding && (
+        <div className="space-y-2 rounded border p-2">
+          <p className="text-muted-foreground text-[10px]">테이블에서 행 선택 시 해당 컬럼 값이 자동으로 채워집니다</p>
+
+          {/* 소스 테이블 컴포넌트 선택 */}
+          <div className="space-y-1">
+            <Label className="text-xs font-medium">소스 테이블</Label>
+            {tableListComponents.length === 0 ? (
+              <p className="text-[10px] text-amber-500">이 화면에 v2-table-list 컴포넌트가 없습니다</p>
+            ) : (
+              <Select
+                value={config.dataBinding?.sourceComponentId || ""}
+                onValueChange={(value) => {
+                  updateConfig("dataBinding", {
+                    ...config.dataBinding,
+                    sourceComponentId: value,
+                    sourceColumn: "",
+                  });
+                }}
+              >
+                <SelectTrigger className="h-7 text-xs">
+                  <SelectValue placeholder="테이블 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tableListComponents.map((comp) => {
+                    const tblName = comp.componentConfig?.selectedTable || comp.selectedTable || "";
+                    const label = comp.componentConfig?.label || comp.label || comp.id;
+                    return (
+                      <SelectItem key={comp.id} value={comp.id}>
+                        {label} ({tblName || comp.id})
+                      </SelectItem>
+                    );
+                  })}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {/* 소스 컬럼 선택 */}
+          {config.dataBinding?.sourceComponentId && (
+            <div className="space-y-1">
+              <Label className="text-xs font-medium">가져올 컬럼</Label>
+              {loadingColumns ? (
+                <p className="text-muted-foreground text-[10px]">컬럼 로딩 중...</p>
+              ) : tableColumns.length === 0 ? (
+                <>
+                  <Input
+                    value={config.dataBinding?.sourceColumn || ""}
+                    onChange={(e) => {
+                      updateConfig("dataBinding", {
+                        ...config.dataBinding,
+                        sourceColumn: e.target.value,
+                      });
+                    }}
+                    placeholder="컬럼명 직접 입력"
+                    className="h-7 text-xs"
+                  />
+                  <p className="text-muted-foreground text-[10px]">컬럼 정보를 불러올 수 없어 직접 입력</p>
+                </>
+              ) : (
+                <Select
+                  value={config.dataBinding?.sourceColumn || ""}
+                  onValueChange={(value) => {
+                    updateConfig("dataBinding", {
+                      ...config.dataBinding,
+                      sourceColumn: value,
+                    });
+                  }}
+                >
+                  <SelectTrigger className="h-7 text-xs">
+                    <SelectValue placeholder="컬럼 선택" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {tableColumns.map((col) => (
+                      <SelectItem key={col} value={col}>
+                        {col}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default V2InputConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx b/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
new file mode 100644
index 00000000..851d90fe
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
@@ -0,0 +1,609 @@
+"use client";
+
+/**
+ * V2 품목별 라우팅 설정 패널
+ */
+
+import React, { useState, useEffect } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Badge } from "@/components/ui/badge";
+import {
+  Settings, ChevronDown, ChevronRight, Plus, Trash2, Check, ChevronsUpDown,
+  Database, Monitor, Columns, List, Filter, Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ItemRoutingConfig, ProcessColumnDef, ColumnDef, ItemFilterCondition } from "@/lib/registry/components/v2-item-routing/types";
+import { defaultConfig } from "@/lib/registry/components/v2-item-routing/config";
+
+interface V2ItemRoutingConfigPanelProps {
+  config: Partial<ItemRoutingConfig>;
+  onChange: (config: Partial<ItemRoutingConfig>) => void;
+}
+
+interface TableInfo { tableName: string; displayName?: string; }
+interface ColumnInfo { columnName: string; displayName?: string; dataType?: string; }
+interface ScreenInfo { screenId: number; screenName: string; screenCode: string; }
+
+// ─── 공용: 테이블 Combobox ───
+function TableCombobox({ value, onChange, tables, loading }: {
+  value: string; onChange: (v: string) => void; tables: TableInfo[]; loading: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = tables.find((t) => t.tableName === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs" disabled={loading}>
+          {loading ? "로딩 중..." : selected ? selected.displayName || selected.tableName : "테이블 선택"}
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+        <Command>
+          <CommandInput placeholder="테이블 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-4 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {tables.map((t) => (
+                <CommandItem key={t.tableName} value={`${t.displayName || ""} ${t.tableName}`}
+                  onSelect={() => { onChange(t.tableName); setOpen(false); }} className="text-xs">
+                  <Check className={cn("mr-2 h-3 w-3", value === t.tableName ? "opacity-100" : "opacity-0")} />
+                  <div className="flex flex-col">
+                    <span className="font-medium">{t.displayName || t.tableName}</span>
+                    {t.displayName && <span className="text-[10px] text-muted-foreground">{t.tableName}</span>}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── 공용: 컬럼 Combobox ───
+function ColumnCombobox({ value, onChange, tableName, placeholder }: {
+  value: string; onChange: (v: string, displayName?: string) => void; tableName: string; placeholder?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!tableName) { setColumns([]); return; }
+    const load = async () => {
+      setLoading(true);
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const res = await tableManagementApi.getColumnList(tableName);
+        if (res.success && res.data?.columns) setColumns(res.data.columns);
+      } catch { /* ignore */ } finally { setLoading(false); }
+    };
+    load();
+  }, [tableName]);
+
+  const selected = columns.find((c) => c.columnName === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs" disabled={loading || !tableName}>
+          <span className="truncate">
+            {loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
+          </span>
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[240px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-4 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {columns.map((c) => (
+                <CommandItem key={c.columnName} value={`${c.displayName || ""} ${c.columnName}`}
+                  onSelect={() => { onChange(c.columnName, c.displayName); setOpen(false); }} className="text-xs">
+                  <Check className={cn("mr-2 h-3 w-3", value === c.columnName ? "opacity-100" : "opacity-0")} />
+                  <div className="flex flex-col">
+                    <span className="font-medium">{c.displayName || c.columnName}</span>
+                    {c.displayName && <span className="text-[10px] text-muted-foreground">{c.columnName}</span>}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── 공용: 화면 Combobox ───
+function ScreenCombobox({ value, onChange }: { value?: number; onChange: (v?: number) => void; }) {
+  const [open, setOpen] = useState(false);
+  const [screens, setScreens] = useState<ScreenInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      try {
+        const { screenApi } = await import("@/lib/api/screen");
+        const res = await screenApi.getScreens({ page: 1, size: 1000 });
+        if (res.data) {
+          setScreens(res.data.map((s: any) => ({
+            screenId: s.screenId, screenName: s.screenName || `화면 ${s.screenId}`, screenCode: s.screenCode || "",
+          })));
+        }
+      } catch { /* ignore */ } finally { setLoading(false); }
+    };
+    load();
+  }, []);
+
+  const selected = screens.find((s) => s.screenId === value);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="h-7 w-full justify-between text-xs" disabled={loading}>
+          <span className="truncate">{loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}</span>
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[260px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="화면 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="py-4 text-center text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
+            <CommandGroup className="max-h-[200px] overflow-auto">
+              {screens.map((s) => (
+                <CommandItem key={s.screenId} value={`${s.screenName} ${s.screenCode} ${s.screenId}`}
+                  onSelect={() => { onChange(s.screenId); setOpen(false); }} className="text-xs">
+                  <Check className={cn("mr-2 h-3 w-3", value === s.screenId ? "opacity-100" : "opacity-0")} />
+                  <div className="flex flex-col">
+                    <span className="font-medium">{s.screenName}</span>
+                    <span className="text-[10px] text-muted-foreground">ID: {s.screenId}</span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── 컬럼 편집 카드 (품목/모달/공정 공용) ───
+function ColumnEditor({ columns, onChange, tableName, title, icon }: {
+  columns: ColumnDef[];
+  onChange: (cols: ColumnDef[]) => void;
+  tableName: string;
+  title: string;
+  icon: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const addColumn = () => onChange([...columns, { name: "", label: "새 컬럼", width: 100, align: "left" }]);
+  const removeColumn = (idx: number) => onChange(columns.filter((_, i) => i !== idx));
+  const updateColumn = (idx: number, field: keyof ColumnDef, value: string | number) => {
+    const next = [...columns];
+    next[idx] = { ...next[idx], [field]: value };
+    onChange(next);
+  };
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger asChild>
+        <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+          <div className="flex items-center gap-2">
+            {icon}
+            <span className="text-sm font-medium">{title}</span>
+            <Badge variant="secondary" className="text-[10px] h-5">{columns.length}개</Badge>
+          </div>
+          <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", open && "rotate-180")} />
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
+          {columns.map((col, idx) => (
+            <Collapsible key={idx}>
+              <div className="rounded-md border">
+                <CollapsibleTrigger asChild>
+                  <button type="button" className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors">
+                    <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
+                    <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
+                    <span className="text-xs font-medium truncate flex-1 min-w-0">{col.label || col.name || "미설정"}</span>
+                    <Badge variant="outline" className="text-[9px] h-4 shrink-0">{col.name || "?"}</Badge>
+                    <Button type="button" variant="ghost" size="sm"
+                      onClick={(e) => { e.stopPropagation(); removeColumn(idx); }}
+                      className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0">
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </button>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] text-muted-foreground">컬럼</span>
+                      <ColumnCombobox value={col.name} onChange={(v, displayName) => {
+                        updateColumn(idx, "name", v);
+                        if (!col.label || col.label === "새 컬럼" || col.label === col.name) updateColumn(idx, "label", displayName || v);
+                      }} tableName={tableName} placeholder="컬럼 선택" />
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] text-muted-foreground">표시명</span>
+                      <Input value={col.label} onChange={(e) => updateColumn(idx, "label", e.target.value)} className="h-7 text-xs" />
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] text-muted-foreground">너비</span>
+                      <Input type="number" value={col.width || 100} onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)} className="h-7 text-xs" />
+                    </div>
+                    <div className="space-y-0.5">
+                      <span className="text-[10px] text-muted-foreground">정렬</span>
+                      <Select value={col.align || "left"} onValueChange={(v) => updateColumn(idx, "align", v)}>
+                        <SelectTrigger className="h-7 text-xs"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="left">좌</SelectItem>
+                          <SelectItem value="center">중</SelectItem>
+                          <SelectItem value="right">우</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CollapsibleContent>
+              </div>
+            </Collapsible>
+          ))}
+          <Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addColumn}>
+            <Plus className="h-3 w-3" /> 컬럼 추가
+          </Button>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ─── 메인 컴포넌트 ───
+export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> = ({ config: configProp, onChange }) => {
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [dataSourceOpen, setDataSourceOpen] = useState(false);
+  const [layoutOpen, setLayoutOpen] = useState(false);
+  const [filterOpen, setFilterOpen] = useState(false);
+
+  const config: ItemRoutingConfig = {
+    ...defaultConfig,
+    ...configProp,
+    dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
+    modals: { ...defaultConfig.modals, ...configProp?.modals },
+    processColumns: configProp?.processColumns?.length ? configProp.processColumns : defaultConfig.processColumns,
+    itemDisplayColumns: configProp?.itemDisplayColumns?.length ? configProp.itemDisplayColumns : defaultConfig.itemDisplayColumns,
+    modalDisplayColumns: configProp?.modalDisplayColumns?.length ? configProp.modalDisplayColumns : defaultConfig.modalDisplayColumns,
+    itemFilterConditions: configProp?.itemFilterConditions || [],
+  };
+
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const res = await tableManagementApi.getTableList();
+        if (res.success && res.data) {
+          setTables(res.data.map((t: any) => ({ tableName: t.tableName, displayName: t.displayName || t.tableName })));
+        }
+      } catch { /* ignore */ } finally { setLoadingTables(false); }
+    };
+    loadTables();
+  }, []);
+
+  const dispatchConfigEvent = (newConfig: Partial<ItemRoutingConfig>) => {
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("componentConfigChanged", { detail: { config: { ...config, ...newConfig } } }));
+    }
+  };
+
+  const update = (partial: Partial<ItemRoutingConfig>) => {
+    const merged = { ...configProp, ...partial };
+    onChange(merged);
+    dispatchConfigEvent(partial);
+  };
+
+  const updateDataSource = (field: string, value: string) => {
+    const newDS = { ...config.dataSource, [field]: value };
+    onChange({ ...configProp, dataSource: newDS });
+    dispatchConfigEvent({ dataSource: newDS });
+  };
+
+  const updateModals = (field: string, value?: number) => {
+    const newM = { ...config.modals, [field]: value };
+    onChange({ ...configProp, modals: newM });
+    dispatchConfigEvent({ modals: newM });
+  };
+
+  // 필터 조건 관리
+  const filters = config.itemFilterConditions || [];
+  const addFilter = () => update({ itemFilterConditions: [...filters, { column: "", operator: "equals", value: "" }] });
+  const removeFilter = (idx: number) => update({ itemFilterConditions: filters.filter((_, i) => i !== idx) });
+  const updateFilter = (idx: number, field: keyof ItemFilterCondition, val: string) => {
+    const next = [...filters];
+    next[idx] = { ...next[idx], [field]: val };
+    update({ itemFilterConditions: next });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 품목 목록 모드 ─── */}
+      <div className="rounded-lg border p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <List className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">품목 목록 모드</span>
+        </div>
+        <p className="text-[10px] text-muted-foreground">좌측 품목 목록에 표시할 방식을 선택하세요</p>
+        <div className="grid grid-cols-2 gap-2">
+          <button type="button"
+            className={cn("flex flex-col items-center gap-1 rounded-md border px-3 py-2.5 text-xs transition-colors",
+              (config.itemListMode || "all") === "all" ? "border-primary bg-primary/5 text-primary" : "border-input hover:bg-muted/50")}
+            onClick={() => update({ itemListMode: "all" })}>
+            <span className="font-medium">전체 품목</span>
+            <span className="text-[10px] text-muted-foreground">모든 품목 표시</span>
+          </button>
+          <button type="button"
+            className={cn("flex flex-col items-center gap-1 rounded-md border px-3 py-2.5 text-xs transition-colors",
+              config.itemListMode === "registered" ? "border-primary bg-primary/5 text-primary" : "border-input hover:bg-muted/50")}
+            onClick={() => update({ itemListMode: "registered" })}>
+            <span className="font-medium">등록 품목만</span>
+            <span className="text-[10px] text-muted-foreground">선택한 품목만 표시</span>
+          </button>
+        </div>
+        {config.itemListMode === "registered" && (
+          <p className="text-[10px] text-muted-foreground pt-1">
+            현재 화면 ID를 기준으로 품목 목록이 자동 관리됩니다.
+          </p>
+        )}
+      </div>
+
+      {/* ─── 품목 표시 컬럼 ─── */}
+      <ColumnEditor
+        columns={config.itemDisplayColumns || []}
+        onChange={(cols) => update({ itemDisplayColumns: cols })}
+        tableName={config.dataSource.itemTable}
+        title="품목 목록 컬럼"
+        icon={<Eye className="h-4 w-4 text-muted-foreground" />}
+      />
+
+      {/* ─── 모달 표시 컬럼 (등록 모드에서만 의미 있지만 항상 설정 가능) ─── */}
+      <ColumnEditor
+        columns={config.modalDisplayColumns || []}
+        onChange={(cols) => update({ modalDisplayColumns: cols })}
+        tableName={config.dataSource.itemTable}
+        title="품목 추가 모달 컬럼"
+        icon={<Columns className="h-4 w-4 text-muted-foreground" />}
+      />
+
+      {/* ─── 품목 필터 조건 ─── */}
+      <Collapsible open={filterOpen} onOpenChange={setFilterOpen}>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-2">
+              <Filter className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">품목 필터 조건</span>
+              {filters.length > 0 && <Badge variant="secondary" className="text-[10px] h-5">{filters.length}건</Badge>}
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+            <p className="text-[10px] text-muted-foreground">품목 조회 시 자동으로 적용되는 필터 조건입니다</p>
+            {filters.map((f, idx) => (
+              <div key={idx} className="flex items-end gap-1.5 rounded-md border p-2">
+                <div className="flex-1 space-y-0.5">
+                  <span className="text-[10px] text-muted-foreground">컬럼</span>
+                  <ColumnCombobox value={f.column} onChange={(v) => updateFilter(idx, "column", v)}
+                    tableName={config.dataSource.itemTable} placeholder="필터 컬럼" />
+                </div>
+                <div className="w-[90px] space-y-0.5">
+                  <span className="text-[10px] text-muted-foreground">조건</span>
+                  <Select value={f.operator} onValueChange={(v) => updateFilter(idx, "operator", v)}>
+                    <SelectTrigger className="h-7 text-xs"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="equals">같음</SelectItem>
+                      <SelectItem value="contains">포함</SelectItem>
+                      <SelectItem value="not_equals">다름</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex-1 space-y-0.5">
+                  <span className="text-[10px] text-muted-foreground">값</span>
+                  <Input value={f.value} onChange={(e) => updateFilter(idx, "value", e.target.value)}
+                    placeholder="필터값" className="h-7 text-xs" />
+                </div>
+                <Button type="button" variant="ghost" size="sm"
+                  onClick={() => removeFilter(idx)}
+                  className="h-7 w-7 p-0 text-muted-foreground hover:text-destructive shrink-0">
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+            <Button variant="outline" size="sm" className="h-7 w-full gap-1 text-xs border-dashed" onClick={addFilter}>
+              <Plus className="h-3 w-3" /> 필터 추가
+            </Button>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 모달 연동 ─── */}
+      <Collapsible open={modalOpen} onOpenChange={setModalOpen}>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-2">
+              <Monitor className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">모달 연동</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {[config.modals.versionAddScreenId, config.modals.processAddScreenId, config.modals.processEditScreenId].filter(Boolean).length}개
+              </Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", modalOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+            <p className="text-[10px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면</p>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">버전 추가</span>
+                <ScreenCombobox value={config.modals.versionAddScreenId} onChange={(v) => updateModals("versionAddScreenId", v)} />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">공정 추가</span>
+                <ScreenCombobox value={config.modals.processAddScreenId} onChange={(v) => updateModals("processAddScreenId", v)} />
+              </div>
+              <div className="space-y-1">
+                <span className="text-[10px] text-muted-foreground">공정 수정</span>
+                <ScreenCombobox value={config.modals.processEditScreenId} onChange={(v) => updateModals("processEditScreenId", v)} />
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 공정 테이블 컬럼 ─── */}
+      <ColumnEditor
+        columns={config.processColumns}
+        onChange={(cols) => update({ processColumns: cols })}
+        tableName={config.dataSource.routingDetailTable}
+        title="공정 테이블 컬럼"
+        icon={<Columns className="h-4 w-4 text-muted-foreground" />}
+      />
+
+      {/* ─── 데이터 소스 ─── */}
+      <Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-2">
+              <Database className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">데이터 소스 설정</span>
+              {config.dataSource.itemTable && (
+                <Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">{config.dataSource.itemTable}</Badge>
+              )}
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", dataSourceOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">품목 테이블</span>
+              <TableCombobox value={config.dataSource.itemTable} onChange={(v) => updateDataSource("itemTable", v)} tables={tables} loading={loadingTables} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">품목명 컬럼</span>
+              <ColumnCombobox value={config.dataSource.itemNameColumn} onChange={(v) => updateDataSource("itemNameColumn", v)} tableName={config.dataSource.itemTable} placeholder="품목명" />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">품목코드 컬럼</span>
+              <ColumnCombobox value={config.dataSource.itemCodeColumn} onChange={(v) => updateDataSource("itemCodeColumn", v)} tableName={config.dataSource.itemTable} placeholder="품목코드" />
+            </div>
+            <div className="space-y-1 pt-2">
+              <span className="text-xs text-muted-foreground">라우팅 버전 테이블</span>
+              <TableCombobox value={config.dataSource.routingVersionTable} onChange={(v) => updateDataSource("routingVersionTable", v)} tables={tables} loading={loadingTables} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">품목 FK 컬럼</span>
+              <ColumnCombobox value={config.dataSource.routingVersionFkColumn} onChange={(v) => updateDataSource("routingVersionFkColumn", v)} tableName={config.dataSource.routingVersionTable} placeholder="FK 컬럼" />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">버전명 컬럼</span>
+              <ColumnCombobox value={config.dataSource.routingVersionNameColumn} onChange={(v) => updateDataSource("routingVersionNameColumn", v)} tableName={config.dataSource.routingVersionTable} placeholder="버전명" />
+            </div>
+            <div className="space-y-1 pt-2">
+              <span className="text-xs text-muted-foreground">라우팅 상세 테이블</span>
+              <TableCombobox value={config.dataSource.routingDetailTable} onChange={(v) => updateDataSource("routingDetailTable", v)} tables={tables} loading={loadingTables} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">버전 FK 컬럼</span>
+              <ColumnCombobox value={config.dataSource.routingDetailFkColumn} onChange={(v) => updateDataSource("routingDetailFkColumn", v)} tableName={config.dataSource.routingDetailTable} placeholder="FK 컬럼" />
+            </div>
+            <div className="space-y-1 pt-2">
+              <span className="text-xs text-muted-foreground">공정 마스터 테이블</span>
+              <TableCombobox value={config.dataSource.processTable} onChange={(v) => updateDataSource("processTable", v)} tables={tables} loading={loadingTables} />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">공정명 컬럼</span>
+              <ColumnCombobox value={config.dataSource.processNameColumn} onChange={(v) => updateDataSource("processNameColumn", v)} tableName={config.dataSource.processTable} placeholder="공정명" />
+            </div>
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground">공정코드 컬럼</span>
+              <ColumnCombobox value={config.dataSource.processCodeColumn} onChange={(v) => updateDataSource("processCodeColumn", v)} tableName={config.dataSource.processTable} placeholder="공정코드" />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 레이아웃 & 기타 ─── */}
+      <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
+        <CollapsibleTrigger asChild>
+          <button type="button" className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">레이아웃 & 기타</span>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
+                <p className="text-[10px] text-muted-foreground mt-0.5">품목 목록 패널의 너비</p>
+              </div>
+              <Input type="number" min={20} max={60} value={config.splitRatio || 40}
+                onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 40 })} className="h-7 w-[80px] text-xs" />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">좌측 패널 제목</span>
+              <Input value={config.leftPanelTitle || ""} onChange={(e) => update({ leftPanelTitle: e.target.value })} placeholder="품목 목록" className="h-7 w-[140px] text-xs" />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">우측 패널 제목</span>
+              <Input value={config.rightPanelTitle || ""} onChange={(e) => update({ rightPanelTitle: e.target.value })} placeholder="공정 순서" className="h-7 w-[140px] text-xs" />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">버전 추가 버튼 텍스트</span>
+              <Input value={config.versionAddButtonText || ""} onChange={(e) => update({ versionAddButtonText: e.target.value })} placeholder="+ 라우팅 버전 추가" className="h-7 w-[140px] text-xs" />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">공정 추가 버튼 텍스트</span>
+              <Input value={config.processAddButtonText || ""} onChange={(e) => update({ processAddButtonText: e.target.value })} placeholder="+ 공정 추가" className="h-7 w-[140px] text-xs" />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">첫 번째 버전 자동 선택</p>
+                <p className="text-[11px] text-muted-foreground">품목 선택 시 첫 버전을 자동으로 선택해요</p>
+              </div>
+              <Switch checked={config.autoSelectFirstVersion !== false} onCheckedChange={(checked) => update({ autoSelectFirstVersion: checked })} />
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">읽기 전용</p>
+                <p className="text-[11px] text-muted-foreground">추가/수정/삭제 버튼을 숨겨요</p>
+              </div>
+              <Switch checked={config.readonly || false} onCheckedChange={(checked) => update({ readonly: checked })} />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2ItemRoutingConfigPanel.displayName = "V2ItemRoutingConfigPanel";
+export default V2ItemRoutingConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx b/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx
index d160e3fb..26f287b5 100644
--- a/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2LayoutConfigPanel.tsx
@@ -2,15 +2,68 @@
 
 /**
  * V2Layout 설정 패널
- * 통합 레이아웃 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 레이아웃 타입 카드 선택 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
-import React from "react";
-import { Label } from "@/components/ui/label";
+import React, { useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  LayoutGrid,
+  PanelLeftClose,
+  MoveHorizontal,
+  Minus,
+  MonitorPlay,
+  Settings,
+  ChevronDown,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 레이아웃 타입 카드 정의 ───
+const LAYOUT_TYPE_CARDS = [
+  {
+    value: "grid",
+    icon: LayoutGrid,
+    title: "그리드",
+    description: "행과 열로 배치해요",
+  },
+  {
+    value: "split",
+    icon: PanelLeftClose,
+    title: "분할 패널",
+    description: "영역을 나눠서 배치해요",
+  },
+  {
+    value: "flex",
+    icon: MoveHorizontal,
+    title: "플렉스",
+    description: "유연하게 배치해요",
+  },
+  {
+    value: "divider",
+    icon: Minus,
+    title: "구분선",
+    description: "영역을 구분해요",
+  },
+  {
+    value: "screen-embed",
+    icon: MonitorPlay,
+    title: "화면 임베드",
+    description: "다른 화면을 불러와요",
+  },
+] as const;
 
 interface V2LayoutConfigPanelProps {
   config: Record<string, any>;
@@ -21,166 +74,208 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 설정 업데이트 핸들러
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
+  const currentLayoutType = config.layoutType || config.type || "grid";
+  const isGridType = currentLayoutType === "grid";
+  const isSplitType = currentLayoutType === "split";
+  const isFlexType = currentLayoutType === "flex";
+  const isScreenEmbedType = currentLayoutType === "screen-embed";
+
   return (
     <div className="space-y-4">
-      {/* 레이아웃 타입 */}
+      {/* ─── 1단계: 레이아웃 타입 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">레이아웃 타입</Label>
-        <Select
-          value={config.layoutType || config.type || "grid"}
-          onValueChange={(value) => updateConfig("layoutType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="grid">그리드</SelectItem>
-            <SelectItem value="split">분할 패널</SelectItem>
-            <SelectItem value="flex">플렉스</SelectItem>
-            <SelectItem value="divider">구분선</SelectItem>
-            <SelectItem value="screen-embed">화면 임베드</SelectItem>
-          </SelectContent>
-        </Select>
+        <p className="text-sm font-medium">어떤 레이아웃을 사용하나요?</p>
+        <div className="grid grid-cols-3 gap-2">
+          {LAYOUT_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = currentLayoutType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("layoutType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50",
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      <Separator />
+      {/* ─── 2단계: 타입별 설정 ─── */}
 
-      {/* 그리드 설정 */}
-      {(config.layoutType === "grid" || !config.layoutType) && (
+      {/* 그리드 타입 설정 */}
+      {isGridType && (
         <div className="space-y-3">
-          <Label className="text-xs font-medium">그리드 설정</Label>
-          
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="use12Column"
-              checked={config.use12Column !== false}
-              onCheckedChange={(checked) => updateConfig("use12Column", checked)}
-            />
-            <label htmlFor="use12Column" className="text-xs">12컬럼 그리드 시스템 사용</label>
-          </div>
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <LayoutGrid className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">그리드 설정</span>
+            </div>
 
-          <div className="grid grid-cols-2 gap-2">
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">컬럼 수</Label>
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">컬럼 수</span>
               <Select
                 value={String(config.columns || 12)}
                 onValueChange={(value) => updateConfig("columns", Number(value))}
               >
-                <SelectTrigger className="h-8 text-xs">
+                <SelectTrigger className="h-8 w-[180px] text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="1">1</SelectItem>
-                  <SelectItem value="2">2</SelectItem>
-                  <SelectItem value="3">3</SelectItem>
-                  <SelectItem value="4">4</SelectItem>
-                  <SelectItem value="6">6</SelectItem>
-                  <SelectItem value="12">12</SelectItem>
+                  <SelectItem value="1">1 컬럼</SelectItem>
+                  <SelectItem value="2">2 컬럼</SelectItem>
+                  <SelectItem value="3">3 컬럼</SelectItem>
+                  <SelectItem value="4">4 컬럼</SelectItem>
+                  <SelectItem value="6">6 컬럼</SelectItem>
+                  <SelectItem value="12">12 컬럼</SelectItem>
                 </SelectContent>
               </Select>
             </div>
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">간격 (px)</Label>
+
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">간격 (px)</span>
               <Input
                 value={config.gap || "16"}
                 onChange={(e) => updateConfig("gap", e.target.value)}
                 placeholder="16"
-                className="h-8 text-xs"
+                className="h-8 w-[180px] text-sm"
               />
             </div>
           </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">12컬럼 그리드</p>
+              <p className="text-[11px] text-muted-foreground">
+                표준 12컬럼 그리드 시스템을 사용해요
+              </p>
+            </div>
+            <Switch
+              checked={config.use12Column !== false}
+              onCheckedChange={(checked) => updateConfig("use12Column", checked)}
+            />
+          </div>
         </div>
       )}
 
-      {/* 분할 패널 설정 */}
-      {config.layoutType === "split" && (
+      {/* 분할 패널 타입 설정 */}
+      {isSplitType && (
         <div className="space-y-3">
-          <Label className="text-xs font-medium">분할 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">분할 방향</Label>
-            <Select
-              value={config.direction || "horizontal"}
-              onValueChange={(value) => updateConfig("direction", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="horizontal">가로</SelectItem>
-                <SelectItem value="vertical">세로</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <PanelLeftClose className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">분할 설정</span>
+            </div>
 
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">비율 (%)</Label>
-            <div className="grid grid-cols-2 gap-2">
-              <Input
-                type="number"
-                value={config.splitRatio?.[0] || 50}
-                onChange={(e) => updateConfig("splitRatio", [Number(e.target.value), 100 - Number(e.target.value)])}
-                placeholder="50"
-                min="10"
-                max="90"
-                className="h-8 text-xs"
-              />
-              <Input
-                type="number"
-                value={config.splitRatio?.[1] || 50}
-                disabled
-                className="h-8 text-xs bg-muted"
-              />
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">분할 방향</span>
+              <Select
+                value={config.direction || "horizontal"}
+                onValueChange={(value) => updateConfig("direction", value)}
+              >
+                <SelectTrigger className="h-8 w-[180px] text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="horizontal">가로</SelectItem>
+                  <SelectItem value="vertical">세로</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <span className="text-xs text-muted-foreground">비율 (%)</span>
+                <Input
+                  type="number"
+                  value={config.splitRatio?.[0] || 50}
+                  onChange={(e) => updateConfig("splitRatio", [Number(e.target.value), 100 - Number(e.target.value)])}
+                  placeholder="50"
+                  min="10"
+                  max="90"
+                  className="mt-1 h-8 text-sm"
+                />
+              </div>
+              <div className="flex-1">
+                <span className="text-xs text-muted-foreground">나머지</span>
+                <Input
+                  type="number"
+                  value={config.splitRatio?.[1] || 50}
+                  disabled
+                  className="mt-1 h-8 text-sm bg-muted"
+                />
+              </div>
             </div>
           </div>
 
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="resizable"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">크기 조절</p>
+              <p className="text-[11px] text-muted-foreground">
+                사용자가 패널 크기를 드래그해서 조절할 수 있어요
+              </p>
+            </div>
+            <Switch
               checked={config.resizable !== false}
               onCheckedChange={(checked) => updateConfig("resizable", checked)}
             />
-            <label htmlFor="resizable" className="text-xs">크기 조절 가능</label>
           </div>
         </div>
       )}
 
-      {/* 플렉스 설정 */}
-      {config.layoutType === "flex" && (
+      {/* 플렉스 타입 설정 */}
+      {isFlexType && (
         <div className="space-y-3">
-          <Label className="text-xs font-medium">플렉스 설정</Label>
-          
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">방향</Label>
-            <Select
-              value={config.direction || "row"}
-              onValueChange={(value) => updateConfig("direction", value)}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="row">가로</SelectItem>
-                <SelectItem value="column">세로</SelectItem>
-                <SelectItem value="row-reverse">가로 (역순)</SelectItem>
-                <SelectItem value="column-reverse">세로 (역순)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <MoveHorizontal className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">플렉스 설정</span>
+            </div>
 
-          <div className="grid grid-cols-2 gap-2">
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">정렬</Label>
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">방향</span>
+              <Select
+                value={config.direction || "row"}
+                onValueChange={(value) => updateConfig("direction", value)}
+              >
+                <SelectTrigger className="h-8 w-[180px] text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="row">가로</SelectItem>
+                  <SelectItem value="column">세로</SelectItem>
+                  <SelectItem value="row-reverse">가로 (역순)</SelectItem>
+                  <SelectItem value="column-reverse">세로 (역순)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">정렬</span>
               <Select
                 value={config.justifyContent || "flex-start"}
                 onValueChange={(value) => updateConfig("justifyContent", value)}
               >
-                <SelectTrigger className="h-8 text-xs">
+                <SelectTrigger className="h-8 w-[180px] text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -192,13 +287,14 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
                 </SelectContent>
               </Select>
             </div>
-            <div className="space-y-2">
-              <Label className="text-[10px] text-muted-foreground">교차축 정렬</Label>
+
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">교차축 정렬</span>
               <Select
                 value={config.alignItems || "stretch"}
                 onValueChange={(value) => updateConfig("alignItems", value)}
               >
-                <SelectTrigger className="h-8 text-xs">
+                <SelectTrigger className="h-8 w-[180px] text-sm">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -209,42 +305,128 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
                 </SelectContent>
               </Select>
             </div>
+
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">간격 (px)</span>
+              <Input
+                value={config.gap || "16"}
+                onChange={(e) => updateConfig("gap", e.target.value)}
+                placeholder="16"
+                className="h-8 w-[180px] text-sm"
+              />
+            </div>
           </div>
 
-          <div className="space-y-2">
-            <Label className="text-[10px] text-muted-foreground">간격 (px)</Label>
-            <Input
-              value={config.gap || "16"}
-              onChange={(e) => updateConfig("gap", e.target.value)}
-              placeholder="16"
-              className="h-8 text-xs"
-            />
-          </div>
-
-          <div className="flex items-center space-x-2">
-            <Checkbox
-              id="wrap"
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">줄바꿈 허용</p>
+              <p className="text-[11px] text-muted-foreground">
+                공간이 부족하면 다음 줄로 넘겨요
+              </p>
+            </div>
+            <Switch
               checked={config.wrap || false}
               onCheckedChange={(checked) => updateConfig("wrap", checked)}
             />
-            <label htmlFor="wrap" className="text-xs">줄바꿈 허용</label>
           </div>
         </div>
       )}
 
-      {/* 화면 임베드 설정 */}
-      {config.layoutType === "screen-embed" && (
-        <div className="space-y-2">
-          <Label className="text-xs font-medium">임베드할 화면 ID</Label>
-          <Input
-            type="number"
-            value={config.screenId || ""}
-            onChange={(e) => updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)}
-            placeholder="화면 ID"
-            className="h-8 text-xs"
-          />
+      {/* 화면 임베드 타입 설정 */}
+      {isScreenEmbedType && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <MonitorPlay className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">임베드 설정</span>
+          </div>
+
+          <div className="flex items-center justify-between py-1.5">
+            <span className="text-xs text-muted-foreground">화면 ID</span>
+            <Input
+              type="number"
+              value={config.screenId || ""}
+              onChange={(e) => updateConfig("screenId", e.target.value ? Number(e.target.value) : undefined)}
+              placeholder="화면 ID 입력"
+              className="h-8 w-[180px] text-sm"
+            />
+          </div>
         </div>
       )}
+
+      {/* 구분선 타입: 별도 설정 없음 - 빈 상태 표시 */}
+      {currentLayoutType === "divider" && (
+        <div className="text-center py-6 text-muted-foreground">
+          <Minus className="mx-auto mb-2 h-8 w-8 opacity-30" />
+          <p className="text-sm">추가 설정이 없어요</p>
+          <p className="text-xs mt-0.5">구분선은 기본 스타일로 표시돼요</p>
+        </div>
+      )}
+
+      {/* ─── 3단계: 고급 설정 (그리드/플렉스 타입에서만) ─── */}
+      {(isGridType || isFlexType || isSplitType) && (
+        <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-2">
+                <Settings className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">고급 설정</span>
+              </div>
+              <ChevronDown
+                className={cn(
+                  "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                  advancedOpen && "rotate-180",
+                )}
+              />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+              {isGridType && (
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">반응형 그리드</p>
+                    <p className="text-[11px] text-muted-foreground">
+                      화면 크기에 따라 컬럼 수가 자동 조정돼요
+                    </p>
+                  </div>
+                  <Switch
+                    checked={config.responsive !== false}
+                    onCheckedChange={(checked) => updateConfig("responsive", checked)}
+                  />
+                </div>
+              )}
+
+              {isFlexType && (
+                <div className="flex items-center justify-between py-1.5">
+                  <span className="text-xs text-muted-foreground">최소 아이템 너비</span>
+                  <Input
+                    value={config.minItemWidth || ""}
+                    onChange={(e) => updateConfig("minItemWidth", e.target.value)}
+                    placeholder="자동"
+                    className="h-8 w-[180px] text-sm"
+                  />
+                </div>
+              )}
+
+              {isSplitType && (
+                <div className="flex items-center justify-between py-1.5">
+                  <span className="text-xs text-muted-foreground">최소 패널 크기 (px)</span>
+                  <Input
+                    type="number"
+                    value={config.minPanelSize || ""}
+                    onChange={(e) => updateConfig("minPanelSize", e.target.value ? Number(e.target.value) : undefined)}
+                    placeholder="자동"
+                    className="h-8 w-[180px] text-sm"
+                  />
+                </div>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
     </div>
   );
 };
@@ -252,5 +434,3 @@ export const V2LayoutConfigPanel: React.FC<V2LayoutConfigPanelProps> = ({
 V2LayoutConfigPanel.displayName = "V2LayoutConfigPanel";
 
 export default V2LayoutConfigPanel;
-
-
diff --git a/frontend/components/v2/config-panels/V2ListConfigPanel.tsx b/frontend/components/v2/config-panels/V2ListConfigPanel.tsx
index e60d0387..56ab3950 100644
--- a/frontend/components/v2/config-panels/V2ListConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2ListConfigPanel.tsx
@@ -2,33 +2,51 @@
 
 /**
  * V2List 설정 패널
- * TableListConfigPanel을 래핑하여 동일한 설정 기능을 제공합니다.
- * 카드 표시는 별도의 card-display 컴포넌트를 사용합니다.
+ * 토스식 단계별 UX: 테이블 정보 표시 -> 기본 옵션(Switch) -> 상세 설정(Collapsible)
+ * 컬럼/필터 등 복잡한 설정은 TableListConfigPanel에 위임하여 기능 누락 방지
  */
 
-import React, { useMemo } from "react";
+import React, { useState, useMemo } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Table2, Settings, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { TableListConfigPanel } from "@/lib/registry/components/table-list/TableListConfigPanel";
 import { TableListConfig } from "@/lib/registry/components/table-list/types";
 
 interface V2ListConfigPanelProps {
   config: Record<string, any>;
   onChange: (config: Record<string, any>) => void;
-  /** 현재 화면의 테이블명 */
   currentTableName?: string;
 }
 
-/**
- * V2List 설정 패널
- * TableListConfigPanel과 동일한 기능을 제공
- */
 export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
   config,
   onChange,
   currentTableName,
 }) => {
-  // V2List config를 TableListConfig 형식으로 변환
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const updateConfig = (field: string, value: any) => {
+    onChange({ ...config, [field]: value });
+  };
+
+  const tableName = config.tableName || config.dataSource?.table || currentTableName || "";
+  const columnCount = (config.columns || []).length;
+
+  // ─── V2List config → TableListConfig 변환 (기존 로직 100% 유지) ───
   const tableListConfig: TableListConfig = useMemo(() => {
-    // 컬럼 형식 변환: V2List columns -> TableList columns
     const columns = (config.columns || []).map((col: any, index: number) => ({
       columnName: col.key || col.columnName || col.field || "",
       displayName: col.title || col.header || col.displayName || col.key || col.columnName || col.field || "",
@@ -50,27 +68,44 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
       columns,
       useCustomTable: config.useCustomTable,
       customTableName: config.customTableName,
-      isReadOnly: config.isReadOnly !== false, // V2List는 기본적으로 읽기 전용
-      displayMode: "table", // 테이블 모드 고정 (카드는 card-display 컴포넌트 사용)
+      isReadOnly: config.isReadOnly !== false,
+      displayMode: "table",
+      showHeader: true,
+      showFooter: false,
       pagination: config.pagination !== false ? {
         enabled: true,
         pageSize: config.pageSize || 10,
-        position: "bottom",
-        showPageSize: true,
+        showSizeSelector: true,
+        showPageInfo: true,
         pageSizeOptions: [5, 10, 20, 50, 100],
       } : {
         enabled: false,
         pageSize: 10,
-        position: "bottom",
-        showPageSize: false,
+        showSizeSelector: false,
+        showPageInfo: false,
         pageSizeOptions: [10],
       },
-      filter: config.filter,
+      filter: config.filter || { enabled: false, filters: [] },
       dataFilter: config.dataFilter,
+      actions: config.actions || {
+        showActions: false,
+        actions: [],
+        bulkActions: false,
+        bulkActionList: [],
+      },
+      tableStyle: config.tableStyle || {
+        theme: "default",
+        headerStyle: "default",
+        rowHeight: "normal",
+        alternateRows: false,
+        hoverEffect: true,
+        borderStyle: "light",
+      },
       checkbox: {
         enabled: true,
+        multiple: true,
         position: "left",
-        showHeader: true,
+        selectAll: true,
       },
       height: "auto",
       autoWidth: true,
@@ -81,31 +116,30 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
         minColumnWidth: 100,
         maxColumnWidth: 300,
       },
+      toolbar: config.toolbar,
+      linkedFilters: config.linkedFilters,
+      excludeFilter: config.excludeFilter,
+      defaultSort: config.defaultSort,
     };
   }, [config, currentTableName]);
 
-  // TableListConfig 변경을 V2List config 형식으로 변환
+  // ─── TableListConfig 변경 → V2List config 변환 (기존 로직 100% 유지) ───
   const handleConfigChange = (partialConfig: Partial<TableListConfig>) => {
     const newConfig: Record<string, any> = { ...config };
 
-    // 테이블 설정 변환
     if (partialConfig.selectedTable !== undefined) {
       newConfig.tableName = partialConfig.selectedTable;
-      if (!newConfig.dataSource) {
-        newConfig.dataSource = {};
-      }
+      if (!newConfig.dataSource) newConfig.dataSource = {};
       newConfig.dataSource.table = partialConfig.selectedTable;
     }
     if (partialConfig.tableName !== undefined) {
       newConfig.tableName = partialConfig.tableName;
-      if (!newConfig.dataSource) {
-        newConfig.dataSource = {};
-      }
+      if (!newConfig.dataSource) newConfig.dataSource = {};
       newConfig.dataSource.table = partialConfig.tableName;
     }
     if (partialConfig.useCustomTable !== undefined) {
       newConfig.useCustomTable = partialConfig.useCustomTable;
-      }
+    }
     if (partialConfig.customTableName !== undefined) {
       newConfig.customTableName = partialConfig.customTableName;
     }
@@ -113,7 +147,6 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
       newConfig.isReadOnly = partialConfig.isReadOnly;
     }
 
-    // 컬럼 형식 변환: TableList columns -> V2List columns
     if (partialConfig.columns !== undefined) {
       newConfig.columns = partialConfig.columns.map((col: any) => ({
         key: col.columnName,
@@ -133,32 +166,165 @@ export const V2ListConfigPanel: React.FC<V2ListConfigPanelProps> = ({
       }));
     }
 
-    // 페이지네이션 변환
     if (partialConfig.pagination !== undefined) {
       newConfig.pagination = partialConfig.pagination?.enabled;
       newConfig.pageSize = partialConfig.pagination?.pageSize || 10;
     }
 
-    // 필터 변환
     if (partialConfig.filter !== undefined) {
       newConfig.filter = partialConfig.filter;
     }
 
-    // 데이터 필터 변환
     if (partialConfig.dataFilter !== undefined) {
       newConfig.dataFilter = partialConfig.dataFilter;
     }
 
-    console.log("⚙️ V2ListConfigPanel handleConfigChange:", { partialConfig, newConfig });
+    if (partialConfig.actions !== undefined) {
+      newConfig.actions = partialConfig.actions;
+    }
+
+    if (partialConfig.tableStyle !== undefined) {
+      newConfig.tableStyle = partialConfig.tableStyle;
+    }
+
+    if (partialConfig.toolbar !== undefined) {
+      newConfig.toolbar = partialConfig.toolbar;
+    }
+
+    if (partialConfig.linkedFilters !== undefined) {
+      newConfig.linkedFilters = partialConfig.linkedFilters;
+    }
+
+    if (partialConfig.excludeFilter !== undefined) {
+      newConfig.excludeFilter = partialConfig.excludeFilter;
+    }
+
+    if (partialConfig.defaultSort !== undefined) {
+      newConfig.defaultSort = partialConfig.defaultSort;
+    }
+
     onChange(newConfig);
   };
 
   return (
-    <TableListConfigPanel
-      config={tableListConfig}
-      onChange={handleConfigChange}
-      screenTableName={currentTableName}
-    />
+    <div className="space-y-4">
+      {/* ─── 1단계: 테이블 정보 ─── */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Table2 className="h-4 w-4 text-primary" />
+          <span className="text-sm font-medium">데이터 소스</span>
+        </div>
+
+        {tableName ? (
+          <div className="rounded-md border bg-background p-3">
+            <p className="text-xs text-muted-foreground">연결된 테이블</p>
+            <p className="mt-0.5 text-sm font-medium">{tableName}</p>
+            {columnCount > 0 && (
+              <p className="mt-1 text-[11px] text-muted-foreground">
+                {columnCount}개의 컬럼이 설정되어 있어요
+              </p>
+            )}
+          </div>
+        ) : (
+          <div className="rounded-md border-2 border-dashed p-4 text-center">
+            <Table2 className="mx-auto mb-2 h-8 w-8 opacity-30 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">
+              아직 테이블이 연결되지 않았어요
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              아래 상세 설정에서 테이블을 선택해주세요
+            </p>
+          </div>
+        )}
+      </div>
+
+      {/* ─── 2단계: 기본 옵션 (Switch + 설명) ─── */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">읽기 전용</p>
+            <p className="text-[11px] text-muted-foreground">
+              데이터 조회만 가능하고 수정할 수 없어요
+            </p>
+          </div>
+          <Switch
+            checked={config.isReadOnly !== false}
+            onCheckedChange={(checked) => updateConfig("isReadOnly", checked)}
+          />
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">페이지네이션</p>
+            <p className="text-[11px] text-muted-foreground">
+              데이터를 페이지 단위로 나눠서 보여줘요
+            </p>
+          </div>
+          <Switch
+            checked={config.pagination !== false}
+            onCheckedChange={(checked) => {
+              updateConfig("pagination", checked);
+            }}
+          />
+        </div>
+
+        {config.pagination !== false && (
+          <div className="ml-4 border-l-2 border-primary/20 pl-3">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">페이지당 행 수</span>
+              <Select
+                value={String(config.pageSize || 10)}
+                onValueChange={(v) => updateConfig("pageSize", Number(v))}
+              >
+                <SelectTrigger className="h-8 w-[180px] text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="5">5개</SelectItem>
+                  <SelectItem value="10">10개</SelectItem>
+                  <SelectItem value="20">20개</SelectItem>
+                  <SelectItem value="50">50개</SelectItem>
+                  <SelectItem value="100">100개</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ─── 3단계: 상세 설정 (컬럼, 필터, 테이블 선택 등) ─── */}
+      <Collapsible open={detailOpen} onOpenChange={setDetailOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">컬럼 및 상세 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                detailOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-2">
+            <p className="text-xs text-muted-foreground px-2 pb-2">
+              테이블 선택, 컬럼 구성, 필터 조건 등을 설정할 수 있어요
+            </p>
+            <TableListConfigPanel
+              config={tableListConfig}
+              onChange={handleConfigChange}
+              screenTableName={currentTableName}
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
   );
 };
 
diff --git a/frontend/components/v2/config-panels/V2LocationSwapSelectorConfigPanel.tsx b/frontend/components/v2/config-panels/V2LocationSwapSelectorConfigPanel.tsx
new file mode 100644
index 00000000..54fc9f82
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2LocationSwapSelectorConfigPanel.tsx
@@ -0,0 +1,573 @@
+"use client";
+
+/**
+ * V2 출발지/도착지 선택 설정 패널
+ * 토스식 단계별 UX: 데이터 소스 -> 필드 매핑 -> UI 설정 -> DB 초기값(접힘)
+ */
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Settings, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { apiClient } from "@/lib/api/client";
+
+interface V2LocationSwapSelectorConfigPanelProps {
+  config: any;
+  onChange: (config: any) => void;
+  tableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>;
+  screenTableName?: string;
+}
+
+export const V2LocationSwapSelectorConfigPanel: React.FC<V2LocationSwapSelectorConfigPanelProps> = ({
+  config,
+  onChange,
+  tableColumns = [],
+  screenTableName,
+}) => {
+  const [tables, setTables] = useState<Array<{ name: string; label: string }>>([]);
+  const [columns, setColumns] = useState<Array<{ name: string; label: string }>>([]);
+  const [codeCategories, setCodeCategories] = useState<Array<{ value: string; label: string }>>([]);
+  const [dbSettingsOpen, setDbSettingsOpen] = useState(false);
+
+  useEffect(() => {
+    const loadTables = async () => {
+      try {
+        const response = await apiClient.get("/table-management/tables");
+        if (response.data.success && response.data.data) {
+          setTables(
+            response.data.data.map((t: any) => ({
+              name: t.tableName || t.table_name,
+              label: t.displayName || t.tableLabel || t.table_label || t.tableName || t.table_name,
+            }))
+          );
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      }
+    };
+    loadTables();
+  }, []);
+
+  useEffect(() => {
+    const loadColumns = async () => {
+      const tableName = config?.dataSource?.tableName;
+      if (!tableName) {
+        setColumns([]);
+        return;
+      }
+      try {
+        const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
+        if (response.data.success) {
+          let columnData = response.data.data;
+          if (!Array.isArray(columnData) && columnData?.columns) {
+            columnData = columnData.columns;
+          }
+          if (Array.isArray(columnData)) {
+            setColumns(
+              columnData.map((c: any) => ({
+                name: c.columnName || c.column_name || c.name,
+                label: c.displayName || c.columnLabel || c.column_label || c.columnName || c.column_name || c.name,
+              }))
+            );
+          }
+        }
+      } catch (error) {
+        console.error("컬럼 목록 로드 실패:", error);
+      }
+    };
+    if (config?.dataSource?.type === "table") {
+      loadColumns();
+    }
+  }, [config?.dataSource?.tableName, config?.dataSource?.type]);
+
+  useEffect(() => {
+    const loadCodeCategories = async () => {
+      try {
+        const response = await apiClient.get("/code-management/categories");
+        if (response.data.success && response.data.data) {
+          setCodeCategories(
+            response.data.data.map((c: any) => ({
+              value: c.category_code || c.categoryCode || c.code,
+              label: c.category_name || c.categoryName || c.name,
+            }))
+          );
+        }
+      } catch (error: any) {
+        if (error?.response?.status !== 404) {
+          console.error("코드 카테고리 로드 실패:", error);
+        }
+      }
+    };
+    loadCodeCategories();
+  }, []);
+
+  const handleChange = (path: string, value: any) => {
+    const keys = path.split(".");
+    const newConfig = { ...config };
+    let current: any = newConfig;
+    for (let i = 0; i < keys.length - 1; i++) {
+      if (!current[keys[i]]) {
+        current[keys[i]] = {};
+      }
+      current[keys[i]] = { ...current[keys[i]] };
+      current = current[keys[i]];
+    }
+    current[keys[keys.length - 1]] = value;
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  const dataSourceType = config?.dataSource?.type || "static";
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 데이터 소스 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">데이터 소스</p>
+        <p className="text-[11px] text-muted-foreground">장소 목록을 어디서 가져올지 선택해요</p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        {/* 소스 타입 카드 선택 */}
+        <div className="grid grid-cols-3 gap-2">
+          {[
+            { value: "static", label: "고정 옵션" },
+            { value: "table", label: "테이블" },
+            { value: "code", label: "코드 관리" },
+          ].map(({ value, label }) => (
+            <button
+              key={value}
+              type="button"
+              onClick={() => handleChange("dataSource.type", value)}
+              className={cn(
+                "rounded-md border p-2 text-xs transition-colors text-center",
+                dataSourceType === value
+                  ? "border-primary bg-primary/5 text-primary"
+                  : "border-border bg-background text-muted-foreground hover:bg-muted/50"
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* 고정 옵션 설정 */}
+        {dataSourceType === "static" && (
+          <div className="space-y-2 pt-1">
+            <div className="rounded-md border border-primary/20 bg-primary/5 p-2">
+              <p className="text-[10px] text-primary">고정된 2개 장소만 사용할 때 설정해요 (예: 포항 / 광양)</p>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">옵션 1 값</Label>
+                <Input
+                  value={config?.dataSource?.staticOptions?.[0]?.value || ""}
+                  onChange={(e) => {
+                    const options = config?.dataSource?.staticOptions || [];
+                    const newOptions = [...options];
+                    newOptions[0] = { ...newOptions[0], value: e.target.value };
+                    handleChange("dataSource.staticOptions", newOptions);
+                  }}
+                  placeholder="포항"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">옵션 1 표시명</Label>
+                <Input
+                  value={config?.dataSource?.staticOptions?.[0]?.label || ""}
+                  onChange={(e) => {
+                    const options = config?.dataSource?.staticOptions || [];
+                    const newOptions = [...options];
+                    newOptions[0] = { ...newOptions[0], label: e.target.value };
+                    handleChange("dataSource.staticOptions", newOptions);
+                  }}
+                  placeholder="포항"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">옵션 2 값</Label>
+                <Input
+                  value={config?.dataSource?.staticOptions?.[1]?.value || ""}
+                  onChange={(e) => {
+                    const options = config?.dataSource?.staticOptions || [];
+                    const newOptions = [...options];
+                    newOptions[1] = { ...newOptions[1], value: e.target.value };
+                    handleChange("dataSource.staticOptions", newOptions);
+                  }}
+                  placeholder="광양"
+                  className="h-7 text-xs"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-[10px] text-muted-foreground">옵션 2 표시명</Label>
+                <Input
+                  value={config?.dataSource?.staticOptions?.[1]?.label || ""}
+                  onChange={(e) => {
+                    const options = config?.dataSource?.staticOptions || [];
+                    const newOptions = [...options];
+                    newOptions[1] = { ...newOptions[1], label: e.target.value };
+                    handleChange("dataSource.staticOptions", newOptions);
+                  }}
+                  placeholder="광양"
+                  className="h-7 text-xs"
+                />
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* 테이블 설정 */}
+        {dataSourceType === "table" && (
+          <div className="space-y-2 pt-1">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">테이블</span>
+              <Select
+                value={config?.dataSource?.tableName || ""}
+                onValueChange={(value) => handleChange("dataSource.tableName", value)}
+              >
+                <SelectTrigger className="h-7 w-[160px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((table) => (
+                    <SelectItem key={table.name} value={table.name}>
+                      {table.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">값 필드</span>
+              <Select
+                value={config?.dataSource?.valueField || ""}
+                onValueChange={(value) => handleChange("dataSource.valueField", value)}
+              >
+                <SelectTrigger className="h-7 w-[160px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {columns.map((col) => (
+                    <SelectItem key={col.name} value={col.name}>{col.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">표시 필드</span>
+              <Select
+                value={config?.dataSource?.labelField || ""}
+                onValueChange={(value) => handleChange("dataSource.labelField", value)}
+              >
+                <SelectTrigger className="h-7 w-[160px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {columns.map((col) => (
+                    <SelectItem key={col.name} value={col.name}>{col.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+
+        {/* 코드 카테고리 설정 */}
+        {dataSourceType === "code" && (
+          <div className="pt-1">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">코드 카테고리</span>
+              <Select
+                value={config?.dataSource?.codeCategory || ""}
+                onValueChange={(value) => handleChange("dataSource.codeCategory", value)}
+              >
+                <SelectTrigger className="h-7 w-[160px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {codeCategories.map((cat) => (
+                    <SelectItem key={cat.value} value={cat.value}>{cat.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ─── 2단계: 필드 매핑 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">필드 매핑</p>
+        <p className="text-[11px] text-muted-foreground">
+          출발지/도착지 값이 저장될 컬럼을 지정해요
+          {screenTableName && (
+            <span className="ml-1">(화면 테이블: <strong>{screenTableName}</strong>)</span>
+          )}
+        </p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">출발지 저장 컬럼</span>
+          {tableColumns.length > 0 ? (
+            <Select
+              value={config?.departureField || ""}
+              onValueChange={(value) => handleChange("departureField", value)}
+            >
+              <SelectTrigger className="h-7 w-[140px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {tableColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.columnLabel || col.columnName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              value={config?.departureField || "departure"}
+              onChange={(e) => handleChange("departureField", e.target.value)}
+              className="h-7 w-[140px] text-xs"
+            />
+          )}
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">도착지 저장 컬럼</span>
+          {tableColumns.length > 0 ? (
+            <Select
+              value={config?.destinationField || ""}
+              onValueChange={(value) => handleChange("destinationField", value)}
+            >
+              <SelectTrigger className="h-7 w-[140px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {tableColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.columnLabel || col.columnName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              value={config?.destinationField || "destination"}
+              onChange={(e) => handleChange("destinationField", e.target.value)}
+              className="h-7 w-[140px] text-xs"
+            />
+          )}
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <span className="text-xs text-muted-foreground">출발지명 컬럼</span>
+            <p className="text-[10px] text-muted-foreground mt-0.5">라벨 저장용 (선택)</p>
+          </div>
+          {tableColumns.length > 0 ? (
+            <Select
+              value={config?.departureLabelField || "__none__"}
+              onValueChange={(value) => handleChange("departureLabelField", value === "__none__" ? "" : value)}
+            >
+              <SelectTrigger className="h-7 w-[140px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">없음</SelectItem>
+                {tableColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.columnLabel || col.columnName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              value={config?.departureLabelField || ""}
+              onChange={(e) => handleChange("departureLabelField", e.target.value)}
+              placeholder="departure_name"
+              className="h-7 w-[140px] text-xs"
+            />
+          )}
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <span className="text-xs text-muted-foreground">도착지명 컬럼</span>
+            <p className="text-[10px] text-muted-foreground mt-0.5">라벨 저장용 (선택)</p>
+          </div>
+          {tableColumns.length > 0 ? (
+            <Select
+              value={config?.destinationLabelField || "__none__"}
+              onValueChange={(value) => handleChange("destinationLabelField", value === "__none__" ? "" : value)}
+            >
+              <SelectTrigger className="h-7 w-[140px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__">없음</SelectItem>
+                {tableColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.columnLabel || col.columnName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              value={config?.destinationLabelField || ""}
+              onChange={(e) => handleChange("destinationLabelField", e.target.value)}
+              placeholder="destination_name"
+              className="h-7 w-[140px] text-xs"
+            />
+          )}
+        </div>
+      </div>
+
+      {/* ─── 3단계: UI 설정 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">UI 설정</p>
+        <p className="text-[11px] text-muted-foreground">라벨과 스타일을 설정해요</p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">출발지 라벨</span>
+          <Input
+            value={config?.departureLabel || "출발지"}
+            onChange={(e) => handleChange("departureLabel", e.target.value)}
+            className="h-7 w-[120px] text-xs"
+          />
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">도착지 라벨</span>
+          <Input
+            value={config?.destinationLabel || "도착지"}
+            onChange={(e) => handleChange("destinationLabel", e.target.value)}
+            className="h-7 w-[120px] text-xs"
+          />
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">스타일</span>
+          <Select
+            value={config?.variant || "card"}
+            onValueChange={(value) => handleChange("variant", value)}
+          >
+            <SelectTrigger className="h-7 w-[120px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="card">카드</SelectItem>
+              <SelectItem value="inline">인라인</SelectItem>
+              <SelectItem value="minimal">미니멀</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">교환 버튼</p>
+            <p className="text-[11px] text-muted-foreground">출발지와 도착지를 바꿀 수 있어요</p>
+          </div>
+          <Switch
+            checked={config?.showSwapButton !== false}
+            onCheckedChange={(checked) => handleChange("showSwapButton", checked)}
+          />
+        </div>
+      </div>
+
+      {/* ─── 4단계: DB 초기값 로드 (Collapsible) ─── */}
+      <Collapsible open={dbSettingsOpen} onOpenChange={setDbSettingsOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">DB 초기값 로드</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                dbSettingsOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">DB에서 초기값 로드</p>
+                <p className="text-[11px] text-muted-foreground">새로고침 후에도 DB에 저장된 값을 자동으로 불러와요</p>
+              </div>
+              <Switch
+                checked={config?.loadFromDb !== false}
+                onCheckedChange={(checked) => handleChange("loadFromDb", checked)}
+              />
+            </div>
+
+            {config?.loadFromDb !== false && (
+              <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-3">
+                <div className="flex items-center justify-between py-1">
+                  <span className="text-xs text-muted-foreground">조회 테이블</span>
+                  <Select
+                    value={config?.dbTableName || "vehicles"}
+                    onValueChange={(value) => handleChange("dbTableName", value)}
+                  >
+                    <SelectTrigger className="h-7 w-[140px] text-xs">
+                      <SelectValue placeholder="선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="vehicles">vehicles (기본)</SelectItem>
+                      {tables.map((table) => (
+                        <SelectItem key={table.name} value={table.name}>
+                          {table.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <span className="text-xs text-muted-foreground">키 필드</span>
+                    <p className="text-[10px] text-muted-foreground mt-0.5">현재 사용자 ID로 조회할 필드</p>
+                  </div>
+                  <Input
+                    value={config?.dbKeyField || "user_id"}
+                    onChange={(e) => handleChange("dbKeyField", e.target.value)}
+                    placeholder="user_id"
+                    className="h-7 w-[120px] text-xs"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2LocationSwapSelectorConfigPanel.displayName = "V2LocationSwapSelectorConfigPanel";
+
+export default V2LocationSwapSelectorConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx b/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx
index ee63803c..1a13de92 100644
--- a/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2MediaConfigPanel.tsx
@@ -2,15 +2,54 @@
 
 /**
  * V2Media 설정 패널
- * 통합 미디어 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 미디어 타입 카드 선택 -> 기본 설정 -> 타입별 설정 -> 고급 설정(접힘)
  */
 
-import React from "react";
-import { Label } from "@/components/ui/label";
+import React, { useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  FileText,
+  Image,
+  Video,
+  Music,
+  Settings,
+  ChevronDown,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 미디어 타입 카드 정의 ───
+const MEDIA_TYPE_CARDS = [
+  {
+    value: "file",
+    icon: FileText,
+    title: "파일",
+    description: "일반 파일을 업로드해요",
+  },
+  {
+    value: "image",
+    icon: Image,
+    title: "이미지",
+    description: "사진이나 그림을 올려요",
+  },
+  {
+    value: "video",
+    icon: Video,
+    title: "비디오",
+    description: "동영상을 업로드해요",
+  },
+  {
+    value: "audio",
+    icon: Music,
+    title: "오디오",
+    description: "음악이나 녹음을 올려요",
+  },
+] as const;
 
 interface V2MediaConfigPanelProps {
   config: Record<string, any>;
@@ -21,186 +60,259 @@ export const V2MediaConfigPanel: React.FC<V2MediaConfigPanelProps> = ({
   config,
   onChange,
 }) => {
-  // 설정 업데이트 핸들러
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
+  const currentMediaType = config.mediaType || config.type || "image";
+  const isImageType = currentMediaType === "image";
+  const isPlayerType = currentMediaType === "video" || currentMediaType === "audio";
+
   return (
     <div className="space-y-4">
-      {/* 미디어 타입 */}
+      {/* ─── 1단계: 미디어 타입 선택 (카드) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">미디어 타입</Label>
-        <Select
-          value={config.mediaType || config.type || "image"}
-          onValueChange={(value) => updateConfig("mediaType", value)}
-        >
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="타입 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="file">파일</SelectItem>
-            <SelectItem value="image">이미지</SelectItem>
-            <SelectItem value="video">비디오</SelectItem>
-            <SelectItem value="audio">오디오</SelectItem>
-          </SelectContent>
-        </Select>
+        <p className="text-sm font-medium">어떤 미디어를 업로드하나요?</p>
+        <div className="grid grid-cols-2 gap-2">
+          {MEDIA_TYPE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = currentMediaType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("mediaType", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50",
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
       </div>
 
-      <Separator />
+      {/* ─── 2단계: 기본 설정 ─── */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <span className="text-sm font-medium">파일 설정</span>
 
-      {/* 허용 파일 형식 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">허용 파일 형식</Label>
-        <Input
-          value={config.accept || ""}
-          onChange={(e) => updateConfig("accept", e.target.value)}
-          placeholder="예: .jpg,.png,.pdf"
-          className="h-8 text-xs"
-        />
-        <p className="text-[10px] text-muted-foreground">
-          쉼표로 구분. 예: .jpg,.png,.gif 또는 image/*
-        </p>
+        <div className="flex items-center justify-between py-1.5">
+          <span className="text-xs text-muted-foreground">허용 형식</span>
+          <Input
+            value={config.accept || ""}
+            onChange={(e) => updateConfig("accept", e.target.value)}
+            placeholder=".jpg,.png,.pdf"
+            className="h-8 w-[180px] text-sm"
+          />
+        </div>
       </div>
 
-      {/* 최대 파일 크기 */}
+      {/* ─── 3단계: 업로드 옵션 (Switch + 설명) ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">최대 파일 크기 (MB)</Label>
-        <Input
-          type="number"
-          value={config.maxSize || ""}
-          onChange={(e) => updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)}
-          placeholder="10"
-          min="1"
-          className="h-8 text-xs"
-        />
-      </div>
-
-      {/* 최대 파일 수 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">최대 파일 수</Label>
-        <Input
-          type="number"
-          value={config.maxFiles || ""}
-          onChange={(e) => updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)}
-          placeholder="제한 없음"
-          min="1"
-          className="h-8 text-xs"
-        />
-      </div>
-
-      <Separator />
-
-      {/* 옵션 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">옵션</Label>
-        
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="multiple"
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">여러 파일 업로드</p>
+            <p className="text-[11px] text-muted-foreground">
+              한 번에 여러 파일을 선택할 수 있어요
+            </p>
+          </div>
+          <Switch
             checked={config.multiple || false}
             onCheckedChange={(checked) => updateConfig("multiple", checked)}
           />
-          <label htmlFor="multiple" className="text-xs">다중 파일 업로드</label>
         </div>
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="preview"
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">미리보기</p>
+            <p className="text-[11px] text-muted-foreground">
+              업로드한 파일의 미리보기가 표시돼요
+            </p>
+          </div>
+          <Switch
             checked={config.preview !== false}
             onCheckedChange={(checked) => updateConfig("preview", checked)}
           />
-          <label htmlFor="preview" className="text-xs">미리보기 표시</label>
         </div>
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="dragDrop"
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-sm">드래그 앤 드롭</p>
+            <p className="text-[11px] text-muted-foreground">
+              파일을 끌어다 놓아서 업로드할 수 있어요
+            </p>
+          </div>
+          <Switch
             checked={config.dragDrop !== false}
             onCheckedChange={(checked) => updateConfig("dragDrop", checked)}
           />
-          <label htmlFor="dragDrop" className="text-xs">드래그 앤 드롭</label>
         </div>
       </div>
 
-      {/* 이미지 전용 설정 */}
-      {config.mediaType === "image" && (
-        <>
-          <Separator />
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">이미지 설정</Label>
-            
-            <div className="grid grid-cols-2 gap-2">
-              <div className="space-y-2">
-                <Label className="text-[10px] text-muted-foreground">최대 너비 (px)</Label>
+      {/* ─── 4단계: 타입별 설정 ─── */}
+
+      {/* 이미지 타입: 크기 제한 + 자르기 */}
+      {isImageType && (
+        <div className="space-y-3">
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center gap-2">
+              <Image className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">이미지 설정</span>
+            </div>
+
+            <div className="flex gap-2">
+              <div className="flex-1">
+                <span className="text-xs text-muted-foreground">최대 너비 (px)</span>
                 <Input
                   type="number"
                   value={config.maxWidth || ""}
                   onChange={(e) => updateConfig("maxWidth", e.target.value ? Number(e.target.value) : undefined)}
                   placeholder="자동"
-                  className="h-8 text-xs"
+                  className="mt-1 h-8 text-sm"
                 />
               </div>
-              <div className="space-y-2">
-                <Label className="text-[10px] text-muted-foreground">최대 높이 (px)</Label>
+              <div className="flex-1">
+                <span className="text-xs text-muted-foreground">최대 높이 (px)</span>
                 <Input
                   type="number"
                   value={config.maxHeight || ""}
                   onChange={(e) => updateConfig("maxHeight", e.target.value ? Number(e.target.value) : undefined)}
                   placeholder="자동"
-                  className="h-8 text-xs"
+                  className="mt-1 h-8 text-sm"
                 />
               </div>
             </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="crop"
-                checked={config.crop || false}
-                onCheckedChange={(checked) => updateConfig("crop", checked)}
-              />
-              <label htmlFor="crop" className="text-xs">자르기 기능</label>
-            </div>
           </div>
-        </>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">자르기 기능</p>
+              <p className="text-[11px] text-muted-foreground">
+                이미지를 원하는 크기로 잘라서 올릴 수 있어요
+              </p>
+            </div>
+            <Switch
+              checked={config.crop || false}
+              onCheckedChange={(checked) => updateConfig("crop", checked)}
+            />
+          </div>
+        </div>
       )}
 
-      {/* 비디오/오디오 전용 설정 */}
-      {(config.mediaType === "video" || config.mediaType === "audio") && (
-        <>
-          <Separator />
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">플레이어 설정</Label>
-            
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="autoplay"
-                checked={config.autoplay || false}
-                onCheckedChange={(checked) => updateConfig("autoplay", checked)}
-              />
-              <label htmlFor="autoplay" className="text-xs">자동 재생</label>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="controls"
-                checked={config.controls !== false}
-                onCheckedChange={(checked) => updateConfig("controls", checked)}
-              />
-              <label htmlFor="controls" className="text-xs">컨트롤 표시</label>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="loop"
-                checked={config.loop || false}
-                onCheckedChange={(checked) => updateConfig("loop", checked)}
-              />
-              <label htmlFor="loop" className="text-xs">반복 재생</label>
+      {/* 비디오/오디오 타입: 플레이어 설정 */}
+      {isPlayerType && (
+        <div className="space-y-2">
+          <div className="rounded-lg border bg-muted/30 p-4">
+            <div className="flex items-center gap-2">
+              {currentMediaType === "video" ? (
+                <Video className="h-4 w-4 text-primary" />
+              ) : (
+                <Music className="h-4 w-4 text-primary" />
+              )}
+              <span className="text-sm font-medium">플레이어 설정</span>
             </div>
           </div>
-        </>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">자동 재생</p>
+              <p className="text-[11px] text-muted-foreground">
+                페이지를 열면 자동으로 재생돼요
+              </p>
+            </div>
+            <Switch
+              checked={config.autoplay || false}
+              onCheckedChange={(checked) => updateConfig("autoplay", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">컨트롤 표시</p>
+              <p className="text-[11px] text-muted-foreground">
+                재생, 정지, 볼륨 등 조작 버튼이 보여요
+              </p>
+            </div>
+            <Switch
+              checked={config.controls !== false}
+              onCheckedChange={(checked) => updateConfig("controls", checked)}
+            />
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">반복 재생</p>
+              <p className="text-[11px] text-muted-foreground">
+                끝나면 처음부터 다시 재생해요
+              </p>
+            </div>
+            <Switch
+              checked={config.loop || false}
+              onCheckedChange={(checked) => updateConfig("loop", checked)}
+            />
+          </div>
+        </div>
       )}
+
+      {/* ─── 5단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">최대 크기 (MB)</span>
+              <Input
+                type="number"
+                value={config.maxSize || ""}
+                onChange={(e) => updateConfig("maxSize", e.target.value ? Number(e.target.value) : undefined)}
+                placeholder="10"
+                min="1"
+                className="h-8 w-[180px] text-sm"
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1.5">
+              <span className="text-xs text-muted-foreground">최대 파일 수</span>
+              <Input
+                type="number"
+                value={config.maxFiles || ""}
+                onChange={(e) => updateConfig("maxFiles", e.target.value ? Number(e.target.value) : undefined)}
+                placeholder="제한 없음"
+                min="1"
+                className="h-8 w-[180px] text-sm"
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 };
@@ -208,5 +320,3 @@ export const V2MediaConfigPanel: React.FC<V2MediaConfigPanelProps> = ({
 V2MediaConfigPanel.displayName = "V2MediaConfigPanel";
 
 export default V2MediaConfigPanel;
-
-
diff --git a/frontend/components/v2/config-panels/V2NumberingRuleConfigPanel.tsx b/frontend/components/v2/config-panels/V2NumberingRuleConfigPanel.tsx
new file mode 100644
index 00000000..84983fc9
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2NumberingRuleConfigPanel.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+/**
+ * V2NumberingRule 설정 패널
+ * 토스식 단계별 UX: 최대 규칙 수(카드선택) -> 카드 레이아웃(카드선택) -> 표시/동작(Switch) -> 고급(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Settings, ChevronDown, LayoutList, LayoutGrid } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { NumberingRuleComponentConfig } from "@/lib/registry/components/v2-numbering-rule/types";
+
+const MAX_RULES_CARDS = [
+  { value: 3, label: "3개", desc: "간단한 코드" },
+  { value: 6, label: "6개", desc: "기본 (권장)" },
+  { value: 8, label: "8개", desc: "복잡한 코드" },
+  { value: 10, label: "10개", desc: "최대" },
+] as const;
+
+const LAYOUT_CARDS = [
+  { value: "vertical", label: "세로", desc: "위에서 아래로", icon: LayoutList },
+  { value: "horizontal", label: "가로", desc: "왼쪽에서 오른쪽으로", icon: LayoutGrid },
+] as const;
+
+interface V2NumberingRuleConfigPanelProps {
+  config: NumberingRuleComponentConfig;
+  onChange: (config: NumberingRuleComponentConfig) => void;
+}
+
+export const V2NumberingRuleConfigPanel: React.FC<V2NumberingRuleConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: keyof NumberingRuleComponentConfig, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 최대 규칙 수 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">최대 파트 수</p>
+        <div className="grid grid-cols-4 gap-2">
+          {MAX_RULES_CARDS.map((card) => {
+            const isSelected = (config.maxRules || 6) === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("maxRules", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span className="text-xs font-medium">{card.label}</span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.desc}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          하나의 채번 규칙에 추가할 수 있는 최대 파트 개수에요
+        </p>
+      </div>
+
+      {/* ─── 2단계: 카드 레이아웃 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">파트 배치 방향</p>
+        <div className="grid grid-cols-2 gap-2">
+          {LAYOUT_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = (config.cardLayout || "vertical") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("cardLayout", card.value)}
+                className={cn(
+                  "flex items-center gap-2 rounded-lg border p-3 text-left transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 shrink-0 text-muted-foreground" />
+                <div>
+                  <span className="text-xs font-medium block">{card.label}</span>
+                  <span className="text-[10px] text-muted-foreground block">
+                    {card.desc}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 3단계: 표시 설정 (Switch) ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">표시 설정</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">미리보기 표시</p>
+              <p className="text-[11px] text-muted-foreground">
+                코드 미리보기를 항상 보여줘요
+              </p>
+            </div>
+            <Switch
+              checked={config.showPreview !== false}
+              onCheckedChange={(checked) => updateConfig("showPreview", checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">규칙 목록 표시</p>
+              <p className="text-[11px] text-muted-foreground">
+                저장된 규칙 목록을 보여줘요
+              </p>
+            </div>
+            <Switch
+              checked={config.showRuleList !== false}
+              onCheckedChange={(checked) => updateConfig("showRuleList", checked)}
+            />
+          </div>
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <p className="text-sm">파트 순서 변경</p>
+              <p className="text-[11px] text-muted-foreground">
+                파트 드래그로 순서를 바꿀 수 있어요
+              </p>
+            </div>
+            <Switch
+              checked={config.enableReorder !== false}
+              onCheckedChange={(checked) => updateConfig("enableReorder", checked)}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">읽기 전용</p>
+                <p className="text-[11px] text-muted-foreground">
+                  편집 기능을 비활성화해요
+                </p>
+              </div>
+              <Switch
+                checked={config.readonly || false}
+                onCheckedChange={(checked) => updateConfig("readonly", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2NumberingRuleConfigPanel.displayName = "V2NumberingRuleConfigPanel";
+
+export default V2NumberingRuleConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2PivotGridConfigPanel.tsx b/frontend/components/v2/config-panels/V2PivotGridConfigPanel.tsx
new file mode 100644
index 00000000..efbc2d36
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2PivotGridConfigPanel.tsx
@@ -0,0 +1,804 @@
+"use client";
+
+/**
+ * V2 피벗 그리드 설정 패널
+ * 토스식 단계별 UX: 테이블 선택(Combobox) -> 필드 배치(AreaDropZone) -> 고급 설정(Collapsible)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import {
+  Rows, Columns, Calculator, X, Plus, GripVertical,
+  Check, ChevronsUpDown, ChevronDown, ChevronUp,
+  Settings, Database, Info,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import type {
+  PivotGridComponentConfig,
+  PivotFieldConfig,
+  PivotAreaType,
+  AggregationType,
+  FieldDataType,
+  ConditionalFormatRule,
+} from "@/lib/registry/components/v2-pivot-grid/types";
+
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+interface ColumnInfo {
+  column_name: string;
+  data_type: string;
+  column_comment?: string;
+}
+
+interface V2PivotGridConfigPanelProps {
+  config: PivotGridComponentConfig;
+  onChange: (config: PivotGridComponentConfig) => void;
+}
+
+function mapDbTypeToFieldType(dbType: string): FieldDataType {
+  const type = dbType.toLowerCase();
+  if (type.includes("int") || type.includes("numeric") || type.includes("decimal") || type.includes("float")) return "number";
+  if (type.includes("date") || type.includes("time") || type.includes("timestamp")) return "date";
+  if (type.includes("bool")) return "boolean";
+  return "string";
+}
+
+/* ─── 영역 드롭존 서브 컴포넌트 ─── */
+
+interface AreaDropZoneProps {
+  area: PivotAreaType;
+  label: string;
+  description: string;
+  icon: React.ReactNode;
+  fields: PivotFieldConfig[];
+  columns: ColumnInfo[];
+  onAddField: (column: ColumnInfo) => void;
+  onRemoveField: (index: number) => void;
+  onUpdateField: (index: number, updates: Partial<PivotFieldConfig>) => void;
+  color: string;
+}
+
+const AreaDropZone: React.FC<AreaDropZoneProps> = ({
+  area,
+  label,
+  description,
+  icon,
+  fields,
+  columns,
+  onAddField,
+  onRemoveField,
+  onUpdateField,
+  color,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const availableColumns = columns.filter(
+    (col) => !fields.some((f) => f.field === col.column_name)
+  );
+
+  return (
+    <div className={cn("rounded-lg border-2 p-3", color)}>
+      <div
+        className="flex cursor-pointer items-center justify-between"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex items-center gap-2">
+          {icon}
+          <span className="text-sm font-medium">{label}</span>
+          <Badge variant="secondary" className="text-xs">{fields.length}</Badge>
+        </div>
+        {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+      </div>
+      <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+
+      {isExpanded && (
+        <div className="mt-3 space-y-2">
+          {fields.length > 0 ? (
+            <div className="space-y-1">
+              {fields.map((field, idx) => (
+                <div
+                  key={`${field.field}-${idx}`}
+                  className="flex items-center gap-2 rounded-md border bg-background px-2 py-1.5"
+                >
+                  <GripVertical className="h-3 w-3 text-muted-foreground" />
+                  <span className="flex-1 truncate text-xs font-medium">
+                    {field.caption || field.field}
+                  </span>
+                  {area === "data" && (
+                    <Select
+                      value={field.summaryType || "sum"}
+                      onValueChange={(v) => onUpdateField(idx, { summaryType: v as AggregationType })}
+                    >
+                      <SelectTrigger className="h-6 w-20 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="sum">합계</SelectItem>
+                        <SelectItem value="count">개수</SelectItem>
+                        <SelectItem value="avg">평균</SelectItem>
+                        <SelectItem value="min">최소</SelectItem>
+                        <SelectItem value="max">최대</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-5 w-5"
+                    onClick={() => onRemoveField(idx)}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-md border border-dashed py-2 text-center text-xs text-muted-foreground">
+              아래에서 컬럼을 선택하세요
+            </div>
+          )}
+
+          {availableColumns.length > 0 && (
+            <Select
+              onValueChange={(v) => {
+                const col = columns.find((c) => c.column_name === v);
+                if (col) onAddField(col);
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <Plus className="mr-1 h-3 w-3" />
+                <span>컬럼 추가</span>
+              </SelectTrigger>
+              <SelectContent>
+                {availableColumns.map((col) => (
+                  <SelectItem key={col.column_name} value={col.column_name}>
+                    <div className="flex items-center gap-2">
+                      <span>{col.column_comment || col.column_name}</span>
+                      <span className="text-xs text-muted-foreground">
+                        ({mapDbTypeToFieldType(col.data_type)})
+                      </span>
+                    </div>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const STYLE_DEFAULTS: { theme: "default"; headerStyle: "default"; cellPadding: "normal"; borderStyle: "light" } = {
+  theme: "default",
+  headerStyle: "default",
+  cellPadding: "normal",
+  borderStyle: "light",
+};
+
+/* ─── 메인 컴포넌트 ─── */
+
+export const V2PivotGridConfigPanel: React.FC<V2PivotGridConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [tableOpen, setTableOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        setTables(
+          tableList.map((t: any) => ({
+            tableName: t.tableName,
+            displayName: t.tableLabel || t.displayName || t.tableName,
+          }))
+        );
+      } catch {
+        /* ignore */
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  useEffect(() => {
+    if (!config.dataSource?.tableName) {
+      setColumns([]);
+      return;
+    }
+    const loadColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const columnList = await tableTypeApi.getColumns(config.dataSource!.tableName!);
+        setColumns(
+          columnList.map((c: any) => ({
+            column_name: c.columnName || c.column_name,
+            data_type: c.dataType || c.data_type || "text",
+            column_comment: c.columnLabel || c.column_label || c.columnName || c.column_name,
+          }))
+        );
+      } catch {
+        /* ignore */
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+  }, [config.dataSource?.tableName]);
+
+  const updateConfig = useCallback(
+    (updates: Partial<PivotGridComponentConfig>) => {
+      const newConfig = { ...config, ...updates };
+      onChange(newConfig);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent("componentConfigChanged", {
+            detail: { config: newConfig },
+          })
+        );
+      }
+    },
+    [config, onChange]
+  );
+
+  const handleAddField = (area: PivotAreaType, column: ColumnInfo) => {
+    const currentFields = config.fields || [];
+    const areaFields = currentFields.filter((f) => f.area === area);
+    const newField: PivotFieldConfig = {
+      field: column.column_name,
+      caption: column.column_comment || column.column_name,
+      area,
+      areaIndex: areaFields.length,
+      dataType: mapDbTypeToFieldType(column.data_type),
+      visible: true,
+    };
+    if (area === "data") newField.summaryType = "sum";
+    updateConfig({ fields: [...currentFields, newField] });
+  };
+
+  const handleRemoveField = (area: PivotAreaType, index: number) => {
+    const currentFields = config.fields || [];
+    const newFields = currentFields.filter(
+      (f) => !(f.area === area && f.areaIndex === index)
+    );
+    let idx = 0;
+    newFields.forEach((f) => {
+      if (f.area === area) f.areaIndex = idx++;
+    });
+    updateConfig({ fields: newFields });
+  };
+
+  const handleUpdateField = (area: PivotAreaType, index: number, updates: Partial<PivotFieldConfig>) => {
+    const currentFields = config.fields || [];
+    const newFields = currentFields.map((f) =>
+      f.area === area && f.areaIndex === index ? { ...f, ...updates } : f
+    );
+    updateConfig({ fields: newFields });
+  };
+
+  const getFieldsByArea = (area: PivotAreaType) =>
+    (config.fields || []).filter((f) => f.area === area).sort((a, b) => (a.areaIndex || 0) - (b.areaIndex || 0));
+
+  const handleTableChange = (tableName: string) => {
+    updateConfig({
+      dataSource: { ...config.dataSource, type: "table", tableName },
+      fields: [],
+    });
+    setTableOpen(false);
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 안내 ─── */}
+      <div className="rounded-lg border border-primary/20 bg-primary/5 p-3">
+        <div className="flex items-start gap-2">
+          <Info className="mt-0.5 h-4 w-4 text-primary" />
+          <div className="text-xs text-primary">
+            <p className="mb-1 font-medium">피벗 테이블 설정 방법</p>
+            <ol className="list-inside list-decimal space-y-0.5">
+              <li>데이터를 가져올 <strong>테이블</strong>을 선택</li>
+              <li><strong>행 그룹</strong>에 그룹화 컬럼 추가 (예: 지역, 부서)</li>
+              <li><strong>열 그룹</strong>에 가로 펼칠 컬럼 추가 (예: 월, 분기)</li>
+              <li><strong>값</strong>에 집계할 숫자 컬럼 추가 (예: 매출, 수량)</li>
+            </ol>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 1단계: 테이블 선택 ─── */}
+      <div className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Database className="h-4 w-4 text-muted-foreground" />
+          <p className="text-sm font-medium">테이블 선택</p>
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          피벗 분석에 사용할 데이터 테이블을 골라요
+        </p>
+      </div>
+
+      <Popover open={tableOpen} onOpenChange={setTableOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={tableOpen}
+            className="h-8 w-full justify-between text-xs"
+            disabled={loadingTables}
+          >
+            {loadingTables
+              ? "로딩 중..."
+              : config.dataSource?.tableName
+                ? tables.find((t) => t.tableName === config.dataSource?.tableName)?.displayName ||
+                  config.dataSource.tableName
+                : "테이블 선택"}
+            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          style={{ width: "var(--radix-popover-trigger-width)" }}
+          align="start"
+        >
+          <Command>
+            <CommandInput placeholder="테이블 검색..." className="text-xs" />
+            <CommandList>
+              <CommandEmpty className="py-4 text-center text-xs">
+                테이블을 찾을 수 없습니다.
+              </CommandEmpty>
+              <CommandGroup className="max-h-[200px] overflow-auto">
+                {tables.map((table) => (
+                  <CommandItem
+                    key={table.tableName}
+                    value={`${table.tableName} ${table.displayName}`}
+                    onSelect={() => handleTableChange(table.tableName)}
+                    className="text-xs"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-3 w-3",
+                        config.dataSource?.tableName === table.tableName ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <div className="flex flex-col">
+                      <span className="font-medium">{table.displayName}</span>
+                      {table.displayName !== table.tableName && (
+                        <span className="text-[10px] text-muted-foreground">{table.tableName}</span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* ─── 2단계: 필드 배치 ─── */}
+      {config.dataSource?.tableName && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Rows className="h-4 w-4 text-muted-foreground" />
+            <p className="text-sm font-medium truncate">필드 배치</p>
+            {loadingColumns && (
+              <span className="text-[11px] text-muted-foreground">(컬럼 로딩 중...)</span>
+            )}
+          </div>
+          <p className="text-[11px] text-muted-foreground">
+            각 영역에 컬럼을 추가하여 피벗 구조를 만들어요
+          </p>
+
+          <div className="grid gap-3">
+            <AreaDropZone
+              area="row"
+              label="행 그룹"
+              description="세로로 그룹화할 항목 (예: 지역, 부서, 제품)"
+              icon={<Rows className="h-4 w-4 text-emerald-600" />}
+              fields={getFieldsByArea("row")}
+              columns={columns}
+              onAddField={(col) => handleAddField("row", col)}
+              onRemoveField={(idx) => handleRemoveField("row", idx)}
+              onUpdateField={(idx, updates) => handleUpdateField("row", idx, updates)}
+              color="border-emerald-200 bg-emerald-50/50"
+            />
+            <AreaDropZone
+              area="column"
+              label="열 그룹"
+              description="가로로 펼칠 항목 (예: 월, 분기, 연도)"
+              icon={<Columns className="h-4 w-4 text-primary" />}
+              fields={getFieldsByArea("column")}
+              columns={columns}
+              onAddField={(col) => handleAddField("column", col)}
+              onRemoveField={(idx) => handleRemoveField("column", idx)}
+              onUpdateField={(idx, updates) => handleUpdateField("column", idx, updates)}
+              color="border-primary/20 bg-primary/5"
+            />
+            <AreaDropZone
+              area="data"
+              label="값 (집계)"
+              description="합계, 평균 등을 계산할 숫자 항목 (예: 매출, 수량)"
+              icon={<Calculator className="h-4 w-4 text-amber-600" />}
+              fields={getFieldsByArea("data")}
+              columns={columns}
+              onAddField={(col) => handleAddField("data", col)}
+              onRemoveField={(idx) => handleRemoveField("data", idx)}
+              onUpdateField={(idx, updates) => handleUpdateField("data", idx, updates)}
+              color="border-amber-200 bg-amber-50/50"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* ─── 3단계: 고급 설정 (Collapsible) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">고급 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">12개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-4 rounded-b-lg border border-t-0 p-4">
+            {/* 총계 설정 */}
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground truncate">총계 설정</p>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
+                  <span className="text-xs truncate">행 총계</span>
+                  <Switch
+                    checked={config.totals?.showRowGrandTotals !== false}
+                    onCheckedChange={(v) =>
+                      updateConfig({ totals: { ...config.totals, showRowGrandTotals: v } })
+                    }
+                  />
+                </div>
+                <div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
+                  <span className="text-xs truncate">열 총계</span>
+                  <Switch
+                    checked={config.totals?.showColumnGrandTotals !== false}
+                    onCheckedChange={(v) =>
+                      updateConfig({ totals: { ...config.totals, showColumnGrandTotals: v } })
+                    }
+                  />
+                </div>
+                <div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
+                  <span className="text-xs truncate">행 총계 위치</span>
+                  <Select
+                    value={config.totals?.rowGrandTotalPosition || "bottom"}
+                    onValueChange={(v) =>
+                      updateConfig({ totals: { ...config.totals, rowGrandTotalPosition: v as "top" | "bottom" } })
+                    }
+                  >
+                    <SelectTrigger className="h-6 w-16 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="top">상단</SelectItem>
+                      <SelectItem value="bottom">하단</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
+                  <span className="text-xs truncate">열 총계 위치</span>
+                  <Select
+                    value={config.totals?.columnGrandTotalPosition || "right"}
+                    onValueChange={(v) =>
+                      updateConfig({ totals: { ...config.totals, columnGrandTotalPosition: v as "left" | "right" } })
+                    }
+                  >
+                    <SelectTrigger className="h-6 w-16 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="left">좌측</SelectItem>
+                      <SelectItem value="right">우측</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
+                  <span className="text-xs truncate">행 소계</span>
+                  <Switch
+                    checked={config.totals?.showRowTotals !== false}
+                    onCheckedChange={(v) =>
+                      updateConfig({ totals: { ...config.totals, showRowTotals: v } })
+                    }
+                  />
+                </div>
+                <div className="flex items-center justify-between rounded-md bg-muted/30 p-2">
+                  <span className="text-xs truncate">열 소계</span>
+                  <Switch
+                    checked={config.totals?.showColumnTotals !== false}
+                    onCheckedChange={(v) =>
+                      updateConfig({ totals: { ...config.totals, showColumnTotals: v } })
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 스타일 설정 */}
+            <div className="space-y-3">
+              <p className="text-xs font-medium text-muted-foreground truncate">스타일 설정</p>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">줄무늬 배경</p>
+                  <p className="text-[11px] text-muted-foreground">행마다 번갈아 배경색을 적용해요</p>
+                </div>
+                <Switch
+                  checked={config.style?.alternateRowColors !== false}
+                  onCheckedChange={(v) =>
+                    updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, alternateRowColors: v } })
+                  }
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">셀 병합</p>
+                  <p className="text-[11px] text-muted-foreground">같은 값을 가진 인접 셀을 병합해요</p>
+                </div>
+                <Switch
+                  checked={config.style?.mergeCells === true}
+                  onCheckedChange={(v) =>
+                    updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, mergeCells: v } })
+                  }
+                />
+              </div>
+            </div>
+
+            {/* 크기 설정 */}
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground truncate">크기 설정</p>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="space-y-1">
+                  <span className="text-[11px] text-muted-foreground">높이</span>
+                  <Input
+                    value={config.height || ""}
+                    onChange={(e) => updateConfig({ height: e.target.value })}
+                    placeholder="400px"
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <span className="text-[11px] text-muted-foreground">최대 높이</span>
+                  <Input
+                    value={config.maxHeight || ""}
+                    onChange={(e) => updateConfig({ maxHeight: e.target.value })}
+                    placeholder="600px"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 기능 설정 */}
+            <div className="space-y-3">
+              <p className="text-xs font-medium text-muted-foreground truncate">기능 설정</p>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">CSV 내보내기</p>
+                  <p className="text-[11px] text-muted-foreground">데이터를 CSV 파일로 내보낼 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.exportConfig?.excel === true}
+                  onCheckedChange={(v) =>
+                    updateConfig({ exportConfig: { ...config.exportConfig, excel: v } })
+                  }
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">전체 확장/축소</p>
+                  <p className="text-[11px] text-muted-foreground">모든 그룹을 한번에 열거나 닫을 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.allowExpandAll !== false}
+                  onCheckedChange={(v) => updateConfig({ allowExpandAll: v })}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">필터링</p>
+                  <p className="text-[11px] text-muted-foreground">필드별 필터를 사용할 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.allowFiltering !== false}
+                  onCheckedChange={(v) => updateConfig({ allowFiltering: v })}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">요약값 기준 정렬</p>
+                  <p className="text-[11px] text-muted-foreground">집계 결과를 클릭해서 정렬할 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.allowSortingBySummary !== false}
+                  onCheckedChange={(v) => updateConfig({ allowSortingBySummary: v })}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">텍스트 줄바꿈</p>
+                  <p className="text-[11px] text-muted-foreground">긴 텍스트를 셀 안에서 줄바꿈해요</p>
+                </div>
+                <Switch
+                  checked={config.wordWrapEnabled === true}
+                  onCheckedChange={(v) => updateConfig({ wordWrapEnabled: v })}
+                />
+              </div>
+            </div>
+
+            {/* 조건부 서식 */}
+            <div className="space-y-2">
+              <p className="text-xs font-medium text-muted-foreground truncate">조건부 서식</p>
+              <div className="space-y-2">
+                {(config.style?.conditionalFormats || []).map((rule, index) => (
+                  <div key={rule.id} className="flex items-center gap-2 rounded-md bg-muted/30 p-2">
+                    <Select
+                      value={rule.type}
+                      onValueChange={(v) => {
+                        const newFormats = [...(config.style?.conditionalFormats || [])];
+                        newFormats[index] = { ...rule, type: v as ConditionalFormatRule["type"] };
+                        updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                      }}
+                    >
+                      <SelectTrigger className="h-7 w-24 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="colorScale">색상 스케일</SelectItem>
+                        <SelectItem value="dataBar">데이터 바</SelectItem>
+                        <SelectItem value="iconSet">아이콘 세트</SelectItem>
+                        <SelectItem value="cellValue">셀 값 조건</SelectItem>
+                      </SelectContent>
+                    </Select>
+
+                    {rule.type === "colorScale" && (
+                      <div className="flex items-center gap-1">
+                        <input
+                          type="color"
+                          value={rule.colorScale?.minColor || "#ff0000"}
+                          onChange={(e) => {
+                            const newFormats = [...(config.style?.conditionalFormats || [])];
+                            newFormats[index] = {
+                              ...rule,
+                              colorScale: {
+                                ...rule.colorScale,
+                                minColor: e.target.value,
+                                maxColor: rule.colorScale?.maxColor || "#00ff00",
+                              },
+                            };
+                            updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                          }}
+                          className="h-6 w-6 cursor-pointer rounded"
+                          title="최소값 색상"
+                        />
+                        <span className="text-xs">→</span>
+                        <input
+                          type="color"
+                          value={rule.colorScale?.maxColor || "#00ff00"}
+                          onChange={(e) => {
+                            const newFormats = [...(config.style?.conditionalFormats || [])];
+                            newFormats[index] = {
+                              ...rule,
+                              colorScale: {
+                                ...rule.colorScale,
+                                minColor: rule.colorScale?.minColor || "#ff0000",
+                                maxColor: e.target.value,
+                              },
+                            };
+                            updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                          }}
+                          className="h-6 w-6 cursor-pointer rounded"
+                          title="최대값 색상"
+                        />
+                      </div>
+                    )}
+
+                    {rule.type === "dataBar" && (
+                      <input
+                        type="color"
+                        value={rule.dataBar?.color || "#3b82f6"}
+                        onChange={(e) => {
+                          const newFormats = [...(config.style?.conditionalFormats || [])];
+                          newFormats[index] = { ...rule, dataBar: { color: e.target.value } };
+                          updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                        }}
+                        className="h-6 w-6 cursor-pointer rounded"
+                        title="바 색상"
+                      />
+                    )}
+
+                    {rule.type === "iconSet" && (
+                      <Select
+                        value={rule.iconSet?.type || "traffic"}
+                        onValueChange={(v) => {
+                          const newFormats = [...(config.style?.conditionalFormats || [])];
+                          newFormats[index] = { ...rule, iconSet: { type: v as "arrows" | "traffic" | "rating" | "flags", thresholds: [33, 67] } };
+                          updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                        }}
+                      >
+                        <SelectTrigger className="h-7 w-20 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="arrows">화살표</SelectItem>
+                          <SelectItem value="traffic">신호등</SelectItem>
+                          <SelectItem value="rating">별점</SelectItem>
+                          <SelectItem value="flags">깃발</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    )}
+
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="ml-auto h-6 w-6"
+                      onClick={() => {
+                        const newFormats = (config.style?.conditionalFormats || []).filter((_, i) => i !== index);
+                        updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-full"
+                  onClick={() => {
+                    const newFormats = [
+                      ...(config.style?.conditionalFormats || []),
+                      {
+                        id: `cf_${Date.now()}`,
+                        type: "colorScale" as const,
+                        colorScale: { minColor: "#ff0000", maxColor: "#00ff00" },
+                      },
+                    ];
+                    updateConfig({ style: { ...STYLE_DEFAULTS, ...config.style, conditionalFormats: newFormats } });
+                  }}
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  조건부 서식 추가
+                </Button>
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+export default V2PivotGridConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx b/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx
new file mode 100644
index 00000000..33a7ae33
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx
@@ -0,0 +1,467 @@
+"use client";
+
+/**
+ * V2 공정 작업기준 설정 패널
+ * Progressive Disclosure: 작업 단계 -> 상세 유형 -> 고급 설정(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
+import { Settings, ChevronDown, ChevronRight, Plus, Trash2, Database, Layers, List } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type {
+  ProcessWorkStandardConfig,
+  WorkPhaseDefinition,
+  DetailTypeDefinition,
+} from "@/lib/registry/components/v2-process-work-standard/types";
+import { defaultConfig } from "@/lib/registry/components/v2-process-work-standard/config";
+
+interface V2ProcessWorkStandardConfigPanelProps {
+  config: Partial<ProcessWorkStandardConfig>;
+  onChange: (config: Partial<ProcessWorkStandardConfig>) => void;
+}
+
+export const V2ProcessWorkStandardConfigPanel: React.FC<V2ProcessWorkStandardConfigPanelProps> = ({
+  config: configProp,
+  onChange,
+}) => {
+  const [phasesOpen, setPhasesOpen] = useState(false);
+  const [detailTypesOpen, setDetailTypesOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [dataSourceOpen, setDataSourceOpen] = useState(false);
+
+  const config: ProcessWorkStandardConfig = {
+    ...defaultConfig,
+    ...configProp,
+    dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
+    phases: configProp?.phases?.length ? configProp.phases : defaultConfig.phases,
+    detailTypes: configProp?.detailTypes?.length ? configProp.detailTypes : defaultConfig.detailTypes,
+  };
+
+  const update = (partial: Partial<ProcessWorkStandardConfig>) => {
+    onChange({ ...configProp, ...partial });
+  };
+
+  const updateDataSource = (field: string, value: string) => {
+    update({ dataSource: { ...config.dataSource, [field]: value } });
+  };
+
+  // ─── 작업 단계 관리 ───
+  const addPhase = () => {
+    const nextOrder = config.phases.length + 1;
+    update({
+      phases: [
+        ...config.phases,
+        { key: `PHASE_${nextOrder}`, label: `단계 ${nextOrder}`, sortOrder: nextOrder },
+      ],
+    });
+  };
+
+  const removePhase = (idx: number) => {
+    update({ phases: config.phases.filter((_, i) => i !== idx) });
+  };
+
+  const updatePhase = (idx: number, field: keyof WorkPhaseDefinition, value: string | number) => {
+    const next = [...config.phases];
+    next[idx] = { ...next[idx], [field]: value };
+    update({ phases: next });
+  };
+
+  // ─── 상세 유형 관리 ───
+  const addDetailType = () => {
+    update({
+      detailTypes: [
+        ...config.detailTypes,
+        { value: `TYPE_${config.detailTypes.length + 1}`, label: "신규 유형" },
+      ],
+    });
+  };
+
+  const removeDetailType = (idx: number) => {
+    update({ detailTypes: config.detailTypes.filter((_, i) => i !== idx) });
+  };
+
+  const updateDetailType = (idx: number, field: keyof DetailTypeDefinition, value: string) => {
+    const next = [...config.detailTypes];
+    next[idx] = { ...next[idx], [field]: value };
+    update({ detailTypes: next });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 작업 단계 설정 (Collapsible + 접이식 카드) ─── */}
+      <Collapsible open={phasesOpen} onOpenChange={setPhasesOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Layers className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">작업 단계</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {config.phases.length}개
+              </Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                phasesOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
+            <p className="text-[10px] text-muted-foreground mb-1">공정별 작업 단계(Phase)를 정의</p>
+            <div className="space-y-1">
+              {config.phases.map((phase, idx) => (
+                <Collapsible key={idx}>
+                  <div className="rounded-md border">
+                    <CollapsibleTrigger asChild>
+                      <button
+                        type="button"
+                        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
+                      >
+                        <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
+                        <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
+                        <span className="text-xs font-medium truncate flex-1 min-w-0">{phase.label}</span>
+                        <Badge variant="outline" className="text-[9px] h-4 shrink-0">{phase.key}</Badge>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => { e.stopPropagation(); removePhase(idx); }}
+                          className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                          disabled={config.phases.length <= 1}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="grid grid-cols-3 gap-1.5 border-t px-2.5 py-2">
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">키</span>
+                          <Input
+                            value={phase.key}
+                            onChange={(e) => updatePhase(idx, "key", e.target.value)}
+                            className="h-7 text-xs"
+                            placeholder="키"
+                          />
+                        </div>
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">표시명</span>
+                          <Input
+                            value={phase.label}
+                            onChange={(e) => updatePhase(idx, "label", e.target.value)}
+                            className="h-7 text-xs"
+                            placeholder="표시명"
+                          />
+                        </div>
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">순서</span>
+                          <Input
+                            type="number"
+                            min={1}
+                            value={phase.sortOrder}
+                            onChange={(e) => updatePhase(idx, "sortOrder", parseInt(e.target.value) || 1)}
+                            className="h-7 text-xs text-center"
+                            placeholder="1"
+                          />
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </div>
+                </Collapsible>
+              ))}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 w-full gap-1 text-xs border-dashed"
+              onClick={addPhase}
+            >
+              <Plus className="h-3 w-3" />
+              단계 추가
+            </Button>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 2단계: 상세 유형 옵션 (Collapsible + 접이식 카드) ─── */}
+      <Collapsible open={detailTypesOpen} onOpenChange={setDetailTypesOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <List className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">상세 유형</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {config.detailTypes.length}개
+              </Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                detailTypesOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
+            <p className="text-[10px] text-muted-foreground mb-1">작업 항목의 상세 유형 드롭다운 옵션</p>
+            <div className="space-y-1">
+              {config.detailTypes.map((dt, idx) => (
+                <Collapsible key={idx}>
+                  <div className="rounded-md border">
+                    <CollapsibleTrigger asChild>
+                      <button
+                        type="button"
+                        className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
+                      >
+                        <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
+                        <span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
+                        <span className="text-xs font-medium truncate flex-1 min-w-0">{dt.label}</span>
+                        <Badge variant="outline" className="text-[9px] h-4 shrink-0">{dt.value}</Badge>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={(e) => { e.stopPropagation(); removeDetailType(idx); }}
+                          className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                          disabled={config.detailTypes.length <= 1}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </button>
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">값</span>
+                          <Input
+                            value={dt.value}
+                            onChange={(e) => updateDetailType(idx, "value", e.target.value)}
+                            className="h-7 text-xs"
+                            placeholder="값"
+                          />
+                        </div>
+                        <div className="space-y-0.5">
+                          <span className="text-[10px] text-muted-foreground">표시명</span>
+                          <Input
+                            value={dt.label}
+                            onChange={(e) => updateDetailType(idx, "label", e.target.value)}
+                            className="h-7 text-xs"
+                            placeholder="표시명"
+                          />
+                        </div>
+                      </div>
+                    </CollapsibleContent>
+                  </div>
+                </Collapsible>
+              ))}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 w-full gap-1 text-xs border-dashed"
+              onClick={addDetailType}
+            >
+              <Plus className="h-3 w-3" />
+              유형 추가
+            </Button>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 3단계: 고급 설정 (데이터 소스 + 레이아웃 통합) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
+
+            {/* 레이아웃 기본 설정 */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
+                  <p className="text-[10px] text-muted-foreground mt-0.5">품목/공정 선택 패널의 너비</p>
+                </div>
+                <Input
+                  type="number"
+                  min={15}
+                  max={50}
+                  value={config.splitRatio || 30}
+                  onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 30 })}
+                  className="h-7 w-[80px] text-xs"
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">좌측 패널 제목</span>
+                <Input
+                  value={config.leftPanelTitle || ""}
+                  onChange={(e) => update({ leftPanelTitle: e.target.value })}
+                  placeholder="품목 및 공정 선택"
+                  className="h-7 w-[140px] text-xs"
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-xs">읽기 전용</p>
+                  <p className="text-[10px] text-muted-foreground">수정/삭제 버튼을 숨겨요</p>
+                </div>
+                <Switch
+                  checked={config.readonly || false}
+                  onCheckedChange={(checked) => update({ readonly: checked })}
+                />
+              </div>
+            </div>
+
+            {/* 데이터 소스 (서브 Collapsible) */}
+            <Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border px-3 py-2 transition-colors hover:bg-muted/30"
+                >
+                  <div className="flex items-center gap-2">
+                    <Database className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">데이터 소스</span>
+                    {config.dataSource.itemTable && (
+                      <Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">
+                        {config.dataSource.itemTable}
+                      </Badge>
+                    )}
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-3.5 w-3.5 text-muted-foreground transition-transform",
+                      dataSourceOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="space-y-2 pt-2">
+                <div className="space-y-1">
+                  <span className="text-[10px] text-muted-foreground">품목 테이블</span>
+                  <Input
+                    value={config.dataSource.itemTable}
+                    onChange={(e) => updateDataSource("itemTable", e.target.value)}
+                    className="h-7 w-full text-xs"
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">품목명 컬럼</span>
+                    <Input
+                      value={config.dataSource.itemNameColumn}
+                      onChange={(e) => updateDataSource("itemNameColumn", e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">품목코드 컬럼</span>
+                    <Input
+                      value={config.dataSource.itemCodeColumn}
+                      onChange={(e) => updateDataSource("itemCodeColumn", e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1 pt-1">
+                  <span className="text-[10px] text-muted-foreground">라우팅 버전 테이블</span>
+                  <Input
+                    value={config.dataSource.routingVersionTable}
+                    onChange={(e) => updateDataSource("routingVersionTable", e.target.value)}
+                    className="h-7 w-full text-xs"
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">품목 연결 FK</span>
+                    <Input
+                      value={config.dataSource.routingFkColumn}
+                      onChange={(e) => updateDataSource("routingFkColumn", e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">버전명 컬럼</span>
+                    <Input
+                      value={config.dataSource.routingVersionNameColumn}
+                      onChange={(e) => updateDataSource("routingVersionNameColumn", e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                </div>
+                <div className="space-y-1 pt-1">
+                  <span className="text-[10px] text-muted-foreground">라우팅 상세 테이블</span>
+                  <Input
+                    value={config.dataSource.routingDetailTable}
+                    onChange={(e) => updateDataSource("routingDetailTable", e.target.value)}
+                    className="h-7 w-full text-xs"
+                  />
+                </div>
+                <div className="space-y-1 pt-1">
+                  <span className="text-[10px] text-muted-foreground">공정 마스터 테이블</span>
+                  <Input
+                    value={config.dataSource.processTable}
+                    onChange={(e) => updateDataSource("processTable", e.target.value)}
+                    className="h-7 w-full text-xs"
+                  />
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">공정명 컬럼</span>
+                    <Input
+                      value={config.dataSource.processNameColumn}
+                      onChange={(e) => updateDataSource("processNameColumn", e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <span className="text-[10px] text-muted-foreground">공정코드 컬럼</span>
+                    <Input
+                      value={config.dataSource.processCodeColumn}
+                      onChange={(e) => updateDataSource("processCodeColumn", e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2ProcessWorkStandardConfigPanel.displayName = "V2ProcessWorkStandardConfigPanel";
+
+export default V2ProcessWorkStandardConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx b/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx
new file mode 100644
index 00000000..633702c8
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+/**
+ * V2 렉 구조 설정 패널
+ * 토스식 단계별 UX: 필드 매핑 -> 제한 설정 -> UI 설정(접힘)
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Badge } from "@/components/ui/badge";
+import { Database, SlidersHorizontal, Settings, ChevronDown, CheckCircle2, Circle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { RackStructureComponentConfig, FieldMapping } from "@/lib/registry/components/v2-rack-structure/types";
+
+interface V2RackStructureConfigPanelProps {
+  config: RackStructureComponentConfig;
+  onChange: (config: RackStructureComponentConfig) => void;
+  tables?: Array<{
+    tableName: string;
+    tableLabel?: string;
+    columns: Array<{
+      columnName: string;
+      columnLabel?: string;
+      dataType?: string;
+    }>;
+  }>;
+}
+
+export const V2RackStructureConfigPanel: React.FC<V2RackStructureConfigPanelProps> = ({
+  config,
+  onChange,
+  tables = [],
+}) => {
+  const [availableColumns, setAvailableColumns] = useState<
+    Array<{ value: string; label: string }>
+  >([]);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  useEffect(() => {
+    const columns: Array<{ value: string; label: string }> = [];
+    tables.forEach((table) => {
+      table.columns.forEach((col) => {
+        columns.push({
+          value: col.columnName,
+          label: col.columnLabel || col.columnName,
+        });
+      });
+    });
+    setAvailableColumns(columns);
+  }, [tables]);
+
+  const handleChange = (key: keyof RackStructureComponentConfig, value: any) => {
+    onChange({ ...config, [key]: value });
+  };
+
+  const handleFieldMappingChange = (field: keyof FieldMapping, value: string) => {
+    const currentMapping = config.fieldMapping || {};
+    onChange({
+      ...config,
+      fieldMapping: {
+        ...currentMapping,
+        [field]: value === "__none__" ? undefined : value,
+      },
+    });
+  };
+
+  const fieldMapping = config.fieldMapping || {};
+
+  const fieldMappingItems: Array<{
+    key: keyof FieldMapping;
+    label: string;
+    description: string;
+  }> = [
+    { key: "warehouseCodeField", label: "창고 코드", description: "창고를 식별하는 코드 필드예요" },
+    { key: "warehouseNameField", label: "창고명", description: "창고 이름을 표시하는 필드예요" },
+    { key: "floorField", label: "층", description: "몇 층인지 나타내는 필드예요" },
+    { key: "zoneField", label: "구역", description: "구역 정보를 가져올 필드예요" },
+    { key: "locationTypeField", label: "위치 유형", description: "위치의 유형(선반, 바닥 등)을 나타내요" },
+    { key: "statusField", label: "사용 여부", description: "사용/미사용 상태를 나타내는 필드예요" },
+  ];
+
+  const mappedCount = useMemo(
+    () => fieldMappingItems.filter((item) => fieldMapping[item.key]).length,
+    [fieldMapping]
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 필드 매핑 ─── */}
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <Database className="h-4 w-4 text-primary" />
+          <p className="text-sm font-medium">필드 매핑</p>
+          <Badge variant="secondary" className="ml-auto text-[10px] px-1.5 py-0">
+            {mappedCount}/{fieldMappingItems.length}
+          </Badge>
+        </div>
+        <p className="text-[11px] text-muted-foreground pl-6">
+          상위 폼의 필드 중 렉 생성에 사용할 필드를 선택해요
+        </p>
+      </div>
+
+      <div className="space-y-1.5">
+        {fieldMappingItems.map((item) => {
+          const isMapped = !!fieldMapping[item.key];
+          return (
+            <div
+              key={item.key}
+              className={cn(
+                "flex items-center gap-3 rounded-lg border px-3 py-2 transition-colors",
+                isMapped ? "border-primary/30 bg-primary/5" : "bg-muted/30"
+              )}
+            >
+              {isMapped ? (
+                <CheckCircle2 className="h-3.5 w-3.5 shrink-0 text-primary" />
+              ) : (
+                <Circle className="h-3.5 w-3.5 shrink-0 text-muted-foreground/40" />
+              )}
+              <div className="min-w-0 flex-1">
+                <p className="text-xs font-medium truncate">{item.label}</p>
+                <p className="text-[10px] text-muted-foreground truncate">{item.description}</p>
+              </div>
+              <Select
+                value={fieldMapping[item.key] || "__none__"}
+                onValueChange={(v) => handleFieldMappingChange(item.key, v)}
+              >
+                <SelectTrigger className="h-7 w-[120px] shrink-0 text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">선택 안함</SelectItem>
+                  {availableColumns.map((col) => (
+                    <SelectItem key={col.value} value={col.value}>
+                      {col.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* ─── 2단계: 제한 설정 ─── */}
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <SlidersHorizontal className="h-4 w-4 text-primary" />
+          <p className="text-sm font-medium">제한 설정</p>
+        </div>
+        <p className="text-[11px] text-muted-foreground pl-6">
+          렉 조건의 최대값을 설정해요
+        </p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        <div className="rounded-lg border bg-muted/30 p-3 text-center space-y-1.5">
+          <p className="text-[10px] text-muted-foreground">최대 조건</p>
+          <Input
+            type="number"
+            min={1}
+            max={20}
+            value={config.maxConditions || 10}
+            onChange={(e) => handleChange("maxConditions", parseInt(e.target.value) || 10)}
+            className="h-7 text-xs text-center"
+          />
+        </div>
+        <div className="rounded-lg border bg-muted/30 p-3 text-center space-y-1.5">
+          <p className="text-[10px] text-muted-foreground">최대 열</p>
+          <Input
+            type="number"
+            min={1}
+            max={999}
+            value={config.maxRows || 99}
+            onChange={(e) => handleChange("maxRows", parseInt(e.target.value) || 99)}
+            className="h-7 text-xs text-center"
+          />
+        </div>
+        <div className="rounded-lg border bg-muted/30 p-3 text-center space-y-1.5">
+          <p className="text-[10px] text-muted-foreground">최대 단</p>
+          <Input
+            type="number"
+            min={1}
+            max={99}
+            value={config.maxLevels || 20}
+            onChange={(e) => handleChange("maxLevels", parseInt(e.target.value) || 20)}
+            className="h-7 text-xs text-center"
+          />
+        </div>
+      </div>
+
+      {/* ─── 3단계: 고급 설정 (Collapsible) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">UI 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div className="min-w-0 flex-1 mr-3">
+                <p className="text-xs font-medium">템플릿 기능</p>
+                <p className="text-[10px] text-muted-foreground">조건을 템플릿으로 저장/불러오기할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.showTemplates ?? true}
+                onCheckedChange={(checked) => handleChange("showTemplates", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div className="min-w-0 flex-1 mr-3">
+                <p className="text-xs font-medium">미리보기</p>
+                <p className="text-[10px] text-muted-foreground">생성될 위치를 미리 확인할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.showPreview ?? true}
+                onCheckedChange={(checked) => handleChange("showPreview", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div className="min-w-0 flex-1 mr-3">
+                <p className="text-xs font-medium">통계 카드</p>
+                <p className="text-[10px] text-muted-foreground">총 위치 수 등 통계를 카드로 표시해요</p>
+              </div>
+              <Switch
+                checked={config.showStatistics ?? true}
+                onCheckedChange={(checked) => handleChange("showStatistics", checked)}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div className="min-w-0 flex-1 mr-3">
+                <p className="text-xs font-medium">읽기 전용</p>
+                <p className="text-[10px] text-muted-foreground">조건을 수정할 수 없게 해요</p>
+              </div>
+              <Switch
+                checked={config.readonly ?? false}
+                onCheckedChange={(checked) => handleChange("readonly", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2RackStructureConfigPanel.displayName = "V2RackStructureConfigPanel";
+
+export default V2RackStructureConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2RepeatContainerConfigPanel.tsx b/frontend/components/v2/config-panels/V2RepeatContainerConfigPanel.tsx
new file mode 100644
index 00000000..aa3d7c93
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2RepeatContainerConfigPanel.tsx
@@ -0,0 +1,1266 @@
+"use client";
+
+/**
+ * V2 리피터 컨테이너 설정 패널
+ * 토스식 단계별 UX: 데이터 소스 -> 레이아웃 -> 슬롯 필드 -> 고급 설정(접힘)
+ */
+
+import React, { useState, useEffect, useMemo } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import {
+  Database,
+  Table2,
+  ChevronsUpDown,
+  Check,
+  LayoutGrid,
+  LayoutList,
+  Rows3,
+  Plus,
+  X,
+  Type,
+  Settings2,
+  ChevronDown,
+  ChevronUp,
+  Settings,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { RepeatContainerConfig, SlotComponentConfig } from "@/lib/registry/components/v2-repeat-container/types";
+import { tableTypeApi } from "@/lib/api/screen";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { DynamicComponentConfigPanel, hasComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
+
+interface V2RepeatContainerConfigPanelProps {
+  config: RepeatContainerConfig;
+  onChange: (config: Partial<RepeatContainerConfig>) => void;
+  screenTableName?: string;
+}
+
+export const V2RepeatContainerConfigPanel: React.FC<V2RepeatContainerConfigPanelProps> = ({
+  config,
+  onChange,
+  screenTableName,
+}) => {
+  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+
+  const [availableColumns, setAvailableColumns] = useState<Array<{ columnName: string; displayName?: string }>>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+
+  const [titleColumnOpen, setTitleColumnOpen] = useState(false);
+  const [descriptionColumnOpen, setDescriptionColumnOpen] = useState(false);
+
+  const [titleDescOpen, setTitleDescOpen] = useState(true);
+  const [styleOpen, setStyleOpen] = useState(false);
+  const [interactionOpen, setInteractionOpen] = useState(false);
+
+  const targetTableName = useMemo(() => {
+    if (config.useCustomTable && config.customTableName) {
+      return config.customTableName;
+    }
+    return config.tableName || screenTableName;
+  }, [config.useCustomTable, config.customTableName, config.tableName, screenTableName]);
+
+  useEffect(() => {
+    if (screenTableName && !config.tableName && !config.customTableName) {
+      onChange({ tableName: screenTableName });
+    }
+  }, [screenTableName, config.tableName, config.customTableName, onChange]);
+
+  useEffect(() => {
+    const fetchTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableTypeApi.getTables();
+        setAvailableTables(
+          response.map((table: any) => ({
+            tableName: table.tableName,
+            displayName: table.displayName || table.tableName,
+          }))
+        );
+      } catch (error) {
+        console.error("테이블 목록 가져오기 실패:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    fetchTables();
+  }, []);
+
+  useEffect(() => {
+    if (!targetTableName) {
+      setAvailableColumns([]);
+      return;
+    }
+
+    const fetchColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const response = await tableManagementApi.getColumnList(targetTableName);
+        const columnsData = response.data?.columns || response.data;
+        if (response.success && columnsData && Array.isArray(columnsData)) {
+          const columns = columnsData.map((col: any) => ({
+            columnName: col.columnName,
+            displayName: col.displayName || col.columnLabel || col.columnName,
+          }));
+          setAvailableColumns(columns);
+        }
+      } catch (error) {
+        console.error("컬럼 목록 가져오기 실패:", error);
+        setAvailableColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    fetchColumns();
+  }, [targetTableName, config.tableName, screenTableName, config.useCustomTable, config.customTableName]);
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 데이터 소스 테이블 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">데이터 소스</p>
+        <p className="text-[11px] text-muted-foreground">
+          반복 렌더링할 데이터의 테이블을 선택해요
+        </p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        {/* 현재 선택된 테이블 카드 */}
+        <div className="flex items-center gap-2 rounded-md border bg-background p-2">
+          <Database className="h-4 w-4 text-primary" />
+          <div className="flex-1">
+            <div className="text-xs font-medium">
+              {config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
+            </div>
+            <div className="text-[10px] text-muted-foreground">
+              {config.useCustomTable ? "커스텀 테이블" : "화면 기본 테이블"}
+            </div>
+          </div>
+        </div>
+
+        {/* 테이블 변경 Combobox */}
+        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={tableComboboxOpen}
+              className="h-7 w-full justify-between text-xs"
+              disabled={loadingTables}
+            >
+              테이블 변경...
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-full p-0" align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+              <CommandList>
+                <CommandEmpty className="py-2 text-xs">테이블을 찾을 수 없습니다</CommandEmpty>
+
+                {screenTableName && (
+                  <CommandGroup heading="기본 (화면 테이블)">
+                    <CommandItem
+                      key={`default-${screenTableName}`}
+                      value={screenTableName}
+                      onSelect={() => {
+                        onChange({
+                          useCustomTable: false,
+                          customTableName: undefined,
+                          tableName: screenTableName,
+                        });
+                        setTableComboboxOpen(false);
+                      }}
+                      className="text-xs cursor-pointer"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3 w-3",
+                          !config.useCustomTable ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                      <Database className="mr-2 h-3 w-3 text-primary" />
+                      {screenTableName}
+                    </CommandItem>
+                  </CommandGroup>
+                )}
+
+                <CommandGroup heading="전체 테이블">
+                  {availableTables
+                    .filter((table) => table.tableName !== screenTableName)
+                    .map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={`${table.tableName} ${table.displayName || ""}`}
+                        onSelect={() => {
+                          onChange({
+                            useCustomTable: true,
+                            customTableName: table.tableName,
+                            tableName: table.tableName,
+                          });
+                          setTableComboboxOpen(false);
+                        }}
+                        className="text-xs cursor-pointer"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <Table2 className="mr-2 h-3 w-3 text-muted-foreground" />
+                        {table.displayName || table.tableName}
+                      </CommandItem>
+                    ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        {/* 데이터 수신 방식 */}
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">데이터 수신 방식</span>
+          <Select
+            value={config.dataSourceType || "manual"}
+            onValueChange={(value) => onChange({ dataSourceType: value as any })}
+          >
+            <SelectTrigger className="h-7 w-[160px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="manual">수동 (API 직접 조회)</SelectItem>
+              <SelectItem value="table-list">테이블 리스트 연동</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {config.dataSourceType === "table-list" && (
+          <div className="flex items-center justify-between py-1">
+            <div>
+              <span className="text-xs text-muted-foreground">연동 컴포넌트 ID</span>
+              <p className="text-[10px] text-muted-foreground mt-0.5">비우면 테이블명으로 자동 매칭</p>
+            </div>
+            <Input
+              value={config.dataSourceComponentId || ""}
+              onChange={(e) => onChange({ dataSourceComponentId: e.target.value })}
+              placeholder="자동 매칭"
+              className="h-7 w-[140px] text-xs"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* ─── 2단계: 레이아웃 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">레이아웃</p>
+        <p className="text-[11px] text-muted-foreground">
+          아이템의 배치 방식과 간격을 설정해요
+        </p>
+      </div>
+
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        {/* 배치 방식 카드 선택 */}
+        <div className="grid grid-cols-3 gap-2">
+          {[
+            { value: "vertical", label: "세로", icon: Rows3 },
+            { value: "horizontal", label: "가로", icon: LayoutList },
+            { value: "grid", label: "그리드", icon: LayoutGrid },
+          ].map(({ value, label, icon: Icon }) => (
+            <button
+              key={value}
+              type="button"
+              onClick={() => onChange({ layout: value as any })}
+              className={cn(
+                "flex flex-col items-center gap-1 rounded-md border p-2 text-xs transition-colors",
+                config.layout === value
+                  ? "border-primary bg-primary/5 text-primary"
+                  : "border-border bg-background text-muted-foreground hover:bg-muted/50"
+              )}
+            >
+              <Icon className={cn("h-4 w-4", value === "horizontal" && "rotate-90")} />
+              <span>{label}</span>
+            </button>
+          ))}
+        </div>
+
+        {config.layout === "grid" && (
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground">그리드 컬럼 수</span>
+            <Select
+              value={String(config.gridColumns || 2)}
+              onValueChange={(value) => onChange({ gridColumns: Number(value) })}
+            >
+              <SelectTrigger className="h-7 w-[100px] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="2">2열</SelectItem>
+                <SelectItem value="3">3열</SelectItem>
+                <SelectItem value="4">4열</SelectItem>
+                <SelectItem value="5">5열</SelectItem>
+                <SelectItem value="6">6열</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">아이템 간격</span>
+          <Input
+            value={config.gap || "16px"}
+            onChange={(e) => onChange({ gap: e.target.value })}
+            placeholder="16px"
+            className="h-7 w-[100px] text-xs"
+          />
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">최소 너비</span>
+          <Input
+            value={config.itemMinWidth || ""}
+            onChange={(e) => onChange({ itemMinWidth: e.target.value || undefined })}
+            placeholder="auto"
+            className="h-7 w-[100px] text-xs"
+          />
+        </div>
+
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground">최대 너비</span>
+          <Input
+            value={config.itemMaxWidth || ""}
+            onChange={(e) => onChange({ itemMaxWidth: e.target.value || undefined })}
+            placeholder="auto"
+            className="h-7 w-[100px] text-xs"
+          />
+        </div>
+      </div>
+
+      {/* ─── 3단계: 반복 표시 필드 (슬롯) ─── */}
+      <SlotChildrenSection
+        config={config}
+        onChange={onChange}
+        availableColumns={availableColumns}
+        loadingColumns={loadingColumns}
+        screenTableName={screenTableName}
+      />
+
+      {/* ─── 4단계: 아이템 제목/설명 ─── */}
+      <Collapsible open={titleDescOpen} onOpenChange={setTitleDescOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Type className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">아이템 제목/설명</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {config.showItemTitle ? "ON" : "OFF"}
+              </Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", titleDescOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">제목/설명 표시</p>
+                <p className="text-[11px] text-muted-foreground">각 아이템에 제목과 설명을 표시할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.showItemTitle ?? false}
+                onCheckedChange={(checked) => onChange({ showItemTitle: checked })}
+              />
+            </div>
+
+            {config.showItemTitle && (
+              <>
+                {/* 제목 컬럼 Combobox */}
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">제목 컬럼</span>
+                  <Popover open={titleColumnOpen} onOpenChange={setTitleColumnOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={titleColumnOpen}
+                        className="h-7 w-full justify-between text-xs font-normal"
+                        disabled={loadingColumns || availableColumns.length === 0}
+                      >
+                        {loadingColumns
+                          ? "로딩 중..."
+                          : config.titleColumn
+                            ? availableColumns.find(c => c.columnName === config.titleColumn)?.displayName || config.titleColumn
+                            : "제목 컬럼 선택..."}
+                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[280px] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                        <CommandList>
+                          <CommandEmpty className="py-2 text-xs text-center">컬럼을 찾을 수 없습니다</CommandEmpty>
+                          <CommandGroup>
+                            <CommandItem
+                              value="__none__"
+                              onSelect={() => {
+                                onChange({ titleColumn: "" });
+                                setTitleColumnOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check className={cn("mr-2 h-3 w-3", !config.titleColumn ? "opacity-100" : "opacity-0")} />
+                              선택 안함
+                            </CommandItem>
+                            {availableColumns.map((col) => (
+                              <CommandItem
+                                key={col.columnName}
+                                value={col.columnName}
+                                onSelect={() => {
+                                  onChange({ titleColumn: col.columnName });
+                                  setTitleColumnOpen(false);
+                                }}
+                                className="text-xs"
+                              >
+                                <Check className={cn("mr-2 h-3 w-3", config.titleColumn === col.columnName ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="truncate">{col.displayName || col.columnName}</span>
+                                  {col.displayName && col.displayName !== col.columnName && (
+                                    <span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
+                                  )}
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                {/* 설명 컬럼 Combobox */}
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">설명 컬럼 (선택)</span>
+                  <Popover open={descriptionColumnOpen} onOpenChange={setDescriptionColumnOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        aria-expanded={descriptionColumnOpen}
+                        className="h-7 w-full justify-between text-xs font-normal"
+                        disabled={loadingColumns || availableColumns.length === 0}
+                      >
+                        {loadingColumns
+                          ? "로딩 중..."
+                          : config.descriptionColumn
+                            ? availableColumns.find(c => c.columnName === config.descriptionColumn)?.displayName || config.descriptionColumn
+                            : "설명 컬럼 선택..."}
+                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-[280px] p-0" align="start">
+                      <Command>
+                        <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                        <CommandList>
+                          <CommandEmpty className="py-2 text-xs text-center">컬럼을 찾을 수 없습니다</CommandEmpty>
+                          <CommandGroup>
+                            <CommandItem
+                              value="__none__"
+                              onSelect={() => {
+                                onChange({ descriptionColumn: "" });
+                                setDescriptionColumnOpen(false);
+                              }}
+                              className="text-xs"
+                            >
+                              <Check className={cn("mr-2 h-3 w-3", !config.descriptionColumn ? "opacity-100" : "opacity-0")} />
+                              선택 안함
+                            </CommandItem>
+                            {availableColumns.map((col) => (
+                              <CommandItem
+                                key={col.columnName}
+                                value={col.columnName}
+                                onSelect={() => {
+                                  onChange({ descriptionColumn: col.columnName });
+                                  setDescriptionColumnOpen(false);
+                                }}
+                                className="text-xs"
+                              >
+                                <Check className={cn("mr-2 h-3 w-3", config.descriptionColumn === col.columnName ? "opacity-100" : "opacity-0")} />
+                                <div className="flex flex-col">
+                                  <span className="truncate">{col.displayName || col.columnName}</span>
+                                  {col.displayName && col.displayName !== col.columnName && (
+                                    <span className="truncate text-[10px] text-muted-foreground">{col.columnName}</span>
+                                  )}
+                                </div>
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
+
+                {/* 제목 템플릿 (titleColumn 미사용 시 대체) */}
+                <div className="space-y-1">
+                  <span className="text-xs text-muted-foreground">제목 템플릿 (레거시)</span>
+                  <Input
+                    value={config.itemTitleTemplate || ""}
+                    onChange={(e) => onChange({ itemTitleTemplate: e.target.value })}
+                    placeholder="{field_name} - {field_code}"
+                    className="h-7 text-xs"
+                  />
+                  <p className="text-[10px] text-muted-foreground">
+                    제목 컬럼 미선택 시 사용. 중괄호로 필드 참조
+                  </p>
+                </div>
+
+                {/* 제목 스타일 */}
+                <div className="space-y-2 pt-1">
+                  <span className="text-[10px] text-muted-foreground">제목 스타일</span>
+                  <div className="grid grid-cols-3 gap-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">크기</Label>
+                      <Select
+                        value={config.titleFontSize || "14px"}
+                        onValueChange={(value) => onChange({ titleFontSize: value })}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="12px">12px</SelectItem>
+                          <SelectItem value="14px">14px</SelectItem>
+                          <SelectItem value="16px">16px</SelectItem>
+                          <SelectItem value="18px">18px</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">색상</Label>
+                      <Input
+                        type="color"
+                        value={config.titleColor || "#374151"}
+                        onChange={(e) => onChange({ titleColor: e.target.value })}
+                        className="h-7"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">굵기</Label>
+                      <Select
+                        value={config.titleFontWeight || "600"}
+                        onValueChange={(value) => onChange({ titleFontWeight: value })}
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="400">보통</SelectItem>
+                          <SelectItem value="500">중간</SelectItem>
+                          <SelectItem value="600">굵게</SelectItem>
+                          <SelectItem value="700">아주 굵게</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </div>
+
+                {config.descriptionColumn && (
+                  <div className="space-y-2">
+                    <span className="text-[10px] text-muted-foreground">설명 스타일</span>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">크기</Label>
+                        <Select
+                          value={config.descriptionFontSize || "12px"}
+                          onValueChange={(value) => onChange({ descriptionFontSize: value })}
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="10px">10px</SelectItem>
+                            <SelectItem value="12px">12px</SelectItem>
+                            <SelectItem value="14px">14px</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">색상</Label>
+                        <Input
+                          type="color"
+                          value={config.descriptionColor || "#6b7280"}
+                          onChange={(e) => onChange({ descriptionColor: e.target.value })}
+                          className="h-7"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 5단계: 카드 스타일 (Collapsible) ─── */}
+      <Collapsible open={styleOpen} onOpenChange={setStyleOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">카드 스타일</span>
+              <Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                styleOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="flex items-center justify-between py-1">
+                <span className="truncate text-xs text-muted-foreground">배경색</span>
+                <Input
+                  type="color"
+                  value={config.backgroundColor || "#ffffff"}
+                  onChange={(e) => onChange({ backgroundColor: e.target.value })}
+                  className="h-7 w-[60px]"
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <span className="truncate text-xs text-muted-foreground">둥글기</span>
+                <Input
+                  value={config.borderRadius || "8px"}
+                  onChange={(e) => onChange({ borderRadius: e.target.value })}
+                  className="h-7 w-[60px] text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div className="flex items-center justify-between py-1">
+                <span className="truncate text-xs text-muted-foreground">내부 패딩</span>
+                <Input
+                  value={config.padding || "16px"}
+                  onChange={(e) => onChange({ padding: e.target.value })}
+                  className="h-7 w-[60px] text-xs"
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <span className="truncate text-xs text-muted-foreground">아이템 높이</span>
+                <Input
+                  value={config.itemHeight || "auto"}
+                  onChange={(e) => onChange({ itemHeight: e.target.value })}
+                  className="h-7 w-[60px] text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">테두리 표시</p>
+                <p className="text-[11px] text-muted-foreground">각 아이템에 테두리를 표시해요</p>
+              </div>
+              <Switch
+                checked={config.showBorder ?? true}
+                onCheckedChange={(checked) => onChange({ showBorder: checked })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">그림자 표시</p>
+                <p className="text-[11px] text-muted-foreground">각 아이템에 그림자를 적용해요</p>
+              </div>
+              <Switch
+                checked={config.showShadow ?? false}
+                onCheckedChange={(checked) => onChange({ showShadow: checked })}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 6단계: 상호작용 & 페이징 (Collapsible) ─── */}
+      <Collapsible open={interactionOpen} onOpenChange={setInteractionOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">상호작용 & 페이징</span>
+              <Badge variant="secondary" className="text-[10px] h-5">7개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                interactionOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">클릭 가능</p>
+                <p className="text-[11px] text-muted-foreground">아이템을 클릭해서 선택할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.clickable ?? false}
+                onCheckedChange={(checked) => onChange({ clickable: checked })}
+              />
+            </div>
+
+            {config.clickable && (
+              <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-3">
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">선택 상태 표시</p>
+                    <p className="text-[11px] text-muted-foreground">선택된 아이템을 시각적으로 구분해요</p>
+                  </div>
+                  <Switch
+                    checked={config.showSelectedState ?? true}
+                    onCheckedChange={(checked) => onChange({ showSelectedState: checked })}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between py-1">
+                  <span className="text-xs text-muted-foreground">선택 모드</span>
+                  <Select
+                    value={config.selectionMode || "single"}
+                    onValueChange={(value) => onChange({ selectionMode: value as "single" | "multiple" })}
+                  >
+                    <SelectTrigger className="h-7 w-[100px] text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="single">단일</SelectItem>
+                      <SelectItem value="multiple">다중</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">페이징 사용</p>
+                <p className="text-[11px] text-muted-foreground">많은 데이터를 페이지로 나눠 표시해요</p>
+              </div>
+              <Switch
+                checked={config.usePaging ?? false}
+                onCheckedChange={(checked) => onChange({ usePaging: checked })}
+              />
+            </div>
+
+            {config.usePaging && (
+              <div className="ml-1 border-l-2 border-primary/20 pl-3">
+                <div className="flex items-center justify-between py-1">
+                  <span className="text-xs text-muted-foreground">페이지당 아이템 수</span>
+                  <Select
+                    value={String(config.pageSize || 10)}
+                    onValueChange={(value) => onChange({ pageSize: Number(value) })}
+                  >
+                    <SelectTrigger className="h-7 w-[100px] text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="5">5개</SelectItem>
+                      <SelectItem value="10">10개</SelectItem>
+                      <SelectItem value="20">20개</SelectItem>
+                      <SelectItem value="50">50개</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            )}
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">빈 상태 메시지</span>
+              <Input
+                value={config.emptyMessage || "데이터가 없습니다"}
+                onChange={(e) => onChange({ emptyMessage: e.target.value })}
+                placeholder="데이터가 없습니다"
+                className="h-7 w-[160px] text-xs"
+              />
+            </div>
+
+            {/* 데이터 필터링 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">필터 필드</p>
+                <p className="text-[11px] text-muted-foreground">formData에서 필터 값을 가져올 키</p>
+              </div>
+              <Input
+                value={config.filterField || ""}
+                onChange={(e) => onChange({ filterField: e.target.value || undefined })}
+                placeholder="미사용"
+                className="h-7 w-[120px] text-xs"
+              />
+            </div>
+
+            {config.filterField && (
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">필터 컬럼</p>
+                  <p className="text-[11px] text-muted-foreground">테이블에서 필터링할 컬럼</p>
+                </div>
+                <Input
+                  value={config.filterColumn || ""}
+                  onChange={(e) => onChange({ filterColumn: e.target.value || undefined })}
+                  placeholder="컬럼명"
+                  className="h-7 w-[120px] text-xs"
+                />
+              </div>
+            )}
+
+            {/* 그룹핑 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">그룹핑 사용</p>
+                <p className="text-[11px] text-muted-foreground">특정 필드로 아이템을 그룹화해요</p>
+              </div>
+              <Switch
+                checked={config.useGrouping ?? false}
+                onCheckedChange={(checked) => onChange({ useGrouping: checked })}
+              />
+            </div>
+
+            {config.useGrouping && (
+              <div className="ml-1 border-l-2 border-primary/20 pl-3">
+                <div className="flex items-center justify-between py-1">
+                  <span className="text-xs text-muted-foreground">그룹핑 기준 필드</span>
+                  <Input
+                    value={config.groupByField || ""}
+                    onChange={(e) => onChange({ groupByField: e.target.value || undefined })}
+                    placeholder="필드명"
+                    className="h-7 w-[120px] text-xs"
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2RepeatContainerConfigPanel.displayName = "V2RepeatContainerConfigPanel";
+
+// ============================================================
+// 슬롯 자식 컴포넌트 관리 섹션 (기존 기능 100% 유지)
+// ============================================================
+
+interface SlotChildrenSectionProps {
+  config: RepeatContainerConfig;
+  onChange: (config: Partial<RepeatContainerConfig>) => void;
+  availableColumns: Array<{ columnName: string; displayName?: string }>;
+  loadingColumns: boolean;
+  screenTableName?: string;
+}
+
+function SlotChildrenSection({
+  config,
+  onChange,
+  availableColumns,
+  loadingColumns,
+  screenTableName,
+}: SlotChildrenSectionProps) {
+  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
+  const [slotFieldsOpen, setSlotFieldsOpen] = useState(true);
+
+  const children = config.children || [];
+
+  const toggleExpanded = (id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  const addComponent = (columnName: string, displayName: string) => {
+    const newChild: SlotComponentConfig = {
+      id: `slot_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      componentType: "text-display",
+      label: displayName,
+      fieldName: columnName,
+      position: { x: 0, y: children.length * 40 },
+      size: { width: 200, height: 32 },
+      componentConfig: {},
+      style: {},
+    };
+    onChange({ children: [...children, newChild] });
+    setColumnComboboxOpen(false);
+  };
+
+  const removeComponent = (id: string) => {
+    onChange({ children: children.filter((c) => c.id !== id) });
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  };
+
+  const updateComponentLabel = (id: string, label: string) => {
+    onChange({ children: children.map((c) => (c.id === id ? { ...c, label } : c)) });
+  };
+
+  const updateComponentStyle = (id: string, key: string, value: any) => {
+    onChange({
+      children: children.map((c) =>
+        c.id === id ? { ...c, style: { ...c.style, [key]: value } } : c
+      ),
+    });
+  };
+
+  const updateComponentSize = (id: string, width: number | undefined, height: number | undefined) => {
+    onChange({
+      children: children.map((c) =>
+        c.id === id
+          ? { ...c, size: { width: width ?? c.size?.width ?? 200, height: height ?? c.size?.height ?? 32 } }
+          : c
+      ),
+    });
+  };
+
+  return (
+    <Collapsible open={slotFieldsOpen} onOpenChange={setSlotFieldsOpen}>
+      <CollapsibleTrigger asChild>
+        <button
+          type="button"
+          className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+        >
+          <div className="flex items-center gap-2">
+            <Type className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium">반복 표시 필드</span>
+            <Badge variant="secondary" className="text-[10px] h-5">
+              {children.length}개 필드
+            </Badge>
+          </div>
+          <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", slotFieldsOpen && "rotate-180")} />
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
+          <p className="text-[11px] text-muted-foreground">
+            데이터의 어떤 컬럼을 각 아이템에 표시할지 선택해요
+          </p>
+
+          {children.length > 0 ? (
+            <div className="space-y-2">
+              {children.map((child, index) => {
+            const isExpanded = expandedIds.has(child.id);
+            return (
+              <div
+                key={child.id}
+                className="rounded-lg border overflow-hidden"
+              >
+                <div className="flex items-center gap-2 bg-muted/30 p-2">
+                  <div className="flex h-5 w-5 items-center justify-center rounded bg-primary/10 text-xs font-medium text-primary">
+                    {index + 1}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="truncate text-xs font-medium">
+                      {child.label || child.fieldName}
+                    </div>
+                    <div className="truncate text-[10px] text-muted-foreground">
+                      필드: {child.fieldName}
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 w-5 p-0 text-primary hover:text-primary"
+                    onClick={() => toggleExpanded(child.id)}
+                    title="상세 설정"
+                  >
+                    {isExpanded ? (
+                      <ChevronUp className="h-3 w-3" />
+                    ) : (
+                      <Settings2 className="h-3 w-3" />
+                    )}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
+                    onClick={() => removeComponent(child.id)}
+                  >
+                    <X className="h-3 w-3" />
+                  </Button>
+                </div>
+
+                {isExpanded && (
+                  <div className="border-t bg-background p-3 space-y-3">
+                    {hasComponentConfigPanel(child.componentType) ? (
+                      <SlotComponentDetailPanel
+                        child={child}
+                        screenTableName={screenTableName}
+                        onConfigChange={(newConfig) => {
+                          onChange({
+                            children: children.map((c) =>
+                              c.id === child.id
+                                ? { ...c, componentConfig: { ...c.componentConfig, ...newConfig } }
+                                : c
+                            ),
+                          });
+                        }}
+                        onLabelChange={(label) => updateComponentLabel(child.id, label)}
+                      />
+                    ) : (
+                      <>
+                        {child.fieldName && (
+                          <div className="rounded-md border border-primary/20 bg-primary/5 p-2">
+                            <div className="flex items-center gap-1.5">
+                              <Database className="h-3 w-3 text-primary" />
+                              <span className="text-[10px] text-primary font-medium">
+                                바인딩: {child.fieldName}
+                              </span>
+                            </div>
+                            <p className="text-[9px] text-primary/80 mt-0.5">
+                              각 아이템의 "{child.fieldName}" 값이 자동으로 표시돼요
+                            </p>
+                          </div>
+                        )}
+
+                        <div className="flex items-center justify-between py-1">
+                          <span className="text-xs text-muted-foreground">표시 라벨</span>
+                          <Input
+                            value={child.label || ""}
+                            onChange={(e) => updateComponentLabel(child.id, e.target.value)}
+                            placeholder="표시할 라벨"
+                            className="h-7 w-[140px] text-xs"
+                          />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-2">
+                          <div className="space-y-1">
+                            <Label className="text-[10px] text-muted-foreground">너비 (px)</Label>
+                            <Input
+                              type="number"
+                              value={child.size?.width || 200}
+                              onChange={(e) =>
+                                updateComponentSize(child.id, parseInt(e.target.value) || 200, undefined)
+                              }
+                              className="h-7 text-xs"
+                            />
+                          </div>
+                          <div className="space-y-1">
+                            <Label className="text-[10px] text-muted-foreground">높이 (px)</Label>
+                            <Input
+                              type="number"
+                              value={child.size?.height || 32}
+                              onChange={(e) =>
+                                updateComponentSize(child.id, undefined, parseInt(e.target.value) || 32)
+                              }
+                              className="h-7 text-xs"
+                            />
+                          </div>
+                        </div>
+
+                        <div className="space-y-2">
+                          <span className="text-[10px] text-muted-foreground">스타일</span>
+                          <div className="grid grid-cols-2 gap-2">
+                            <div className="space-y-1">
+                              <Label className="text-[10px]">글자 크기</Label>
+                              <Select
+                                value={child.style?.fontSize || "14px"}
+                                onValueChange={(value) => updateComponentStyle(child.id, "fontSize", value)}
+                              >
+                                <SelectTrigger className="h-7 text-xs">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="10px">10px</SelectItem>
+                                  <SelectItem value="12px">12px</SelectItem>
+                                  <SelectItem value="14px">14px</SelectItem>
+                                  <SelectItem value="16px">16px</SelectItem>
+                                  <SelectItem value="18px">18px</SelectItem>
+                                </SelectContent>
+                              </Select>
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-[10px]">글자 색상</Label>
+                              <Input
+                                type="color"
+                                value={child.style?.color || "#000000"}
+                                onChange={(e) => updateComponentStyle(child.id, "color", e.target.value)}
+                                className="h-7"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+          ) : (
+            <div className="rounded-lg border border-dashed border-border bg-muted/20 p-4 text-center">
+              <Type className="mx-auto h-6 w-6 text-muted-foreground/50" />
+              <div className="mt-2 text-xs text-muted-foreground">표시할 필드가 없어요</div>
+              <div className="text-[10px] text-muted-foreground">
+                아래에서 컬럼을 선택하세요
+              </div>
+            </div>
+          )}
+
+          {/* 컬럼 추가 Combobox */}
+          <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={columnComboboxOpen}
+                className="h-8 w-full justify-between text-xs"
+                disabled={loadingColumns || availableColumns.length === 0}
+              >
+                {loadingColumns
+                  ? "로딩 중..."
+                  : availableColumns.length === 0
+                    ? "테이블을 먼저 선택하세요"
+                    : "컬럼 추가..."}
+                <Plus className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-full p-0" align="start">
+              <Command>
+                <CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
+                <CommandList>
+                  <CommandEmpty className="py-2 text-xs">컬럼을 찾을 수 없습니다</CommandEmpty>
+                  <CommandGroup heading="사용 가능한 컬럼">
+                    {availableColumns.map((col) => {
+                      const isAdded = children.some((c) => c.fieldName === col.columnName);
+                      return (
+                        <CommandItem
+                          key={col.columnName}
+                          value={`${col.columnName} ${col.displayName || ""}`}
+                          onSelect={() => {
+                            if (!isAdded) {
+                              addComponent(col.columnName, col.displayName || col.columnName);
+                            }
+                          }}
+                          disabled={isAdded}
+                          className={cn(
+                            "text-xs cursor-pointer",
+                            isAdded && "opacity-50 cursor-not-allowed"
+                          )}
+                        >
+                          <Plus
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              isAdded ? "text-primary" : "text-muted-foreground"
+                            )}
+                          />
+                          <div className="flex-1">
+                            <div className="truncate font-medium">{col.displayName || col.columnName}</div>
+                            <div className="truncate text-[10px] text-muted-foreground">
+                              {col.columnName}
+                            </div>
+                          </div>
+                          {isAdded && (
+                            <Check className="h-3 w-3 text-primary" />
+                          )}
+                        </CommandItem>
+                      );
+                    })}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// 슬롯 컴포넌트 상세 설정 패널
+interface SlotComponentDetailPanelProps {
+  child: SlotComponentConfig;
+  screenTableName?: string;
+  onConfigChange: (newConfig: Record<string, any>) => void;
+  onLabelChange: (label: string) => void;
+}
+
+function SlotComponentDetailPanel({
+  child,
+  screenTableName,
+  onConfigChange,
+  onLabelChange,
+}: SlotComponentDetailPanelProps) {
+  return (
+    <div className="space-y-3">
+      {child.fieldName && (
+        <div className="rounded-md border border-primary/20 bg-primary/5 p-2">
+          <div className="flex items-center gap-1.5">
+            <Database className="h-3 w-3 text-primary" />
+            <span className="text-[10px] text-primary font-medium">
+              바인딩: {child.fieldName}
+            </span>
+          </div>
+          <p className="text-[9px] text-primary/80 mt-0.5">
+            각 아이템의 "{child.fieldName}" 값이 자동으로 표시돼요
+          </p>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between py-1">
+        <span className="text-xs text-muted-foreground">표시 라벨</span>
+        <Input
+          value={child.label || ""}
+          onChange={(e) => onLabelChange(e.target.value)}
+          placeholder="표시할 라벨"
+          className="h-7 w-[140px] text-xs"
+        />
+      </div>
+
+      <div className="border-t pt-2">
+        <div className="text-[10px] font-medium text-muted-foreground mb-2">
+          {child.componentType} 상세 설정
+        </div>
+        <DynamicComponentConfigPanel
+          componentId={child.componentType}
+          config={child.componentConfig || {}}
+          onChange={onConfigChange}
+          screenTableName={screenTableName}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default V2RepeatContainerConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
index 92efdcd8..4266e8e0 100644
--- a/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RepeaterConfigPanel.tsx
@@ -11,11 +11,13 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
   Database,
   Link2,
@@ -31,42 +33,27 @@ import {
   Wand2,
   Check,
   ChevronsUpDown,
-  ListTree,
+  Settings,
+  Rows3,
+  Columns3,
+  MousePointerClick,
 } from "lucide-react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { tableTypeApi } from "@/lib/api/screen";
 import { tableManagementApi } from "@/lib/api/tableManagement";
 import { entityJoinApi } from "@/lib/api/entityJoin";
 import { getAvailableNumberingRules, getAvailableNumberingRulesForScreen } from "@/lib/api/numberingRule";
 import { NumberingRuleConfig } from "@/types/numbering-rule";
 import { cn } from "@/lib/utils";
-import {
-  V2RepeaterConfig,
-  RepeaterColumnConfig,
-  RepeaterEntityJoin,
-  DEFAULT_REPEATER_CONFIG,
-  RENDER_MODE_OPTIONS,
-  MODAL_SIZE_OPTIONS,
-} from "@/types/v2-repeater";
+import { V2RepeaterConfig, RepeaterColumnConfig, DEFAULT_REPEATER_CONFIG } from "@/types/v2-repeater";
 
 // 테이블 엔티티 관계 정보
 interface TableRelation {
   tableName: string;
   tableLabel: string;
-  foreignKeyColumn: string;  // 저장 테이블의 FK 컬럼
-  referenceColumn: string;   // 마스터 테이블의 PK 컬럼
+  foreignKeyColumn: string; // 저장 테이블의 FK 컬럼
+  referenceColumn: string; // 마스터 테이블의 PK 컬럼
 }
 
 interface V2RepeaterConfigPanelProps {
@@ -114,45 +101,46 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
   menuObjid,
 }) => {
   const currentTableName = screenTableName || propCurrentTableName;
-  
+
   // config 안전하게 초기화
-  const config: V2RepeaterConfig = useMemo(() => ({
-    ...DEFAULT_REPEATER_CONFIG,
-    ...propConfig,
-    renderMode: propConfig?.renderMode || DEFAULT_REPEATER_CONFIG.renderMode,
-    dataSource: {
-      ...DEFAULT_REPEATER_CONFIG.dataSource,
-      ...propConfig?.dataSource,
-    },
-    columns: propConfig?.columns || [],
-    modal: {
-      ...DEFAULT_REPEATER_CONFIG.modal,
-      ...propConfig?.modal,
-    },
-    features: {
-      ...DEFAULT_REPEATER_CONFIG.features,
-      ...propConfig?.features,
-    },
-  }), [propConfig]);
+  const config: V2RepeaterConfig = useMemo(() => {
+    const merged = {
+      ...DEFAULT_REPEATER_CONFIG,
+      ...propConfig,
+      renderMode: propConfig?.renderMode || DEFAULT_REPEATER_CONFIG.renderMode,
+      dataSource: {
+        ...DEFAULT_REPEATER_CONFIG.dataSource,
+        ...propConfig?.dataSource,
+      },
+      columns: propConfig?.columns || [],
+      modal: {
+        ...DEFAULT_REPEATER_CONFIG.modal,
+        ...propConfig?.modal,
+      } as V2RepeaterConfig["modal"],
+      features: {
+        ...DEFAULT_REPEATER_CONFIG.features,
+        ...propConfig?.features,
+      } as V2RepeaterConfig["features"],
+    };
+    return merged as V2RepeaterConfig;
+  }, [propConfig]);
 
   // 상태 관리
   const [currentTableColumns, setCurrentTableColumns] = useState<ColumnOption[]>([]); // 현재 테이블 컬럼
   const [entityColumns, setEntityColumns] = useState<EntityColumnOption[]>([]); // 엔티티 타입 컬럼
   const [sourceTableColumns, setSourceTableColumns] = useState<ColumnOption[]>([]); // 소스(엔티티) 테이블 컬럼
-  const [calculationRules, setCalculationRules] = useState<CalculationRule[]>(
-    config.calculationRules || []
-  );
+  const [calculationRules, setCalculationRules] = useState<CalculationRule[]>(config.calculationRules || []);
 
   const [loadingColumns, setLoadingColumns] = useState(false);
   const [loadingSourceColumns, setLoadingSourceColumns] = useState(false);
-  
+
   // 저장 테이블 관련 상태
   const [allTables, setAllTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
   const [loadingTables, setLoadingTables] = useState(false);
   const [relatedTables, setRelatedTables] = useState<TableRelation[]>([]); // 현재 테이블과 연관된 테이블 목록
   const [loadingRelations, setLoadingRelations] = useState(false);
   const [tableComboboxOpen, setTableComboboxOpen] = useState(false); // 테이블 Combobox 열림 상태
-  
+
   // Entity 조인 관련 상태
   const [entityJoinData, setEntityJoinData] = useState<{
     joinTables: Array<{
@@ -177,22 +165,32 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
   // 🆕 확장된 컬럼 (상세 설정 표시용)
   const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
-  
+
+  // Collapsible 상태
+  const [featureOptionsOpen, setFeatureOptionsOpen] = useState(true);
+  const [columnSelectOpen, setColumnSelectOpen] = useState(true);
+  const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(true);
+  const [calcRulesOpen, setCalcRulesOpen] = useState(false);
+  const [entityJoinSubOpen, setEntityJoinSubOpen] = useState<Record<number, boolean>>({});
+  const [configuredJoinsOpen, setConfiguredJoinsOpen] = useState(false);
+
   // 🆕 채번 규칙 목록
   const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
   const [loadingNumberingRules, setLoadingNumberingRules] = useState(false);
-  
+
   // 🆕 대상 메뉴 목록 (채번 규칙 선택용)
   const [parentMenus, setParentMenus] = useState<any[]>([]);
   const [loadingMenus, setLoadingMenus] = useState(false);
-  
+
   // 🆕 선택된 메뉴 OBJID (컬럼별로 저장, 한 번 선택하면 공유)
   const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | undefined>(() => {
     // 기존 config에서 저장된 값이 있으면 복원
-    const existingAutoFill = config.columns.find(c => c.autoFill?.type === "numbering" && c.autoFill.selectedMenuObjid);
+    const existingAutoFill = config.columns.find(
+      (c) => c.autoFill?.type === "numbering" && c.autoFill.selectedMenuObjid,
+    );
     return existingAutoFill?.autoFill?.selectedMenuObjid || (menuObjid ? Number(menuObjid) : undefined);
   });
-  
+
   // 자동 입력 타입 옵션
   const autoFillOptions = [
     { value: "none", label: "없음" },
@@ -204,7 +202,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
     { value: "fixed", label: "고정값" },
     { value: "parentSequence", label: "부모채번+순번 (예: WO-001-01)" },
   ];
-  
+
   // 🆕 대상 메뉴 목록 로드 (사용자 메뉴의 레벨 2)
   useEffect(() => {
     const loadMenus = async () => {
@@ -212,15 +210,13 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
       try {
         const { apiClient } = await import("@/lib/api/client");
         const response = await apiClient.get("/admin/menus");
-        
+
         if (response.data.success && response.data.data) {
           const allMenus = response.data.data;
-          
+
           // 사용자 메뉴(menu_type='1')의 레벨 2만 필터링
-          const level2UserMenus = allMenus.filter((menu: any) => 
-            menu.menu_type === '1' && menu.lev === 2
-          );
-          
+          const level2UserMenus = allMenus.filter((menu: any) => menu.menu_type === "1" && menu.lev === 2);
+
           setParentMenus(level2UserMenus);
         }
       } catch (error) {
@@ -231,7 +227,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
     };
     loadMenus();
   }, []);
-  
+
   // 🆕 채번 규칙 로드 (선택된 메뉴 기준)
   useEffect(() => {
     const loadNumberingRules = async () => {
@@ -240,11 +236,11 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
         setNumberingRules([]);
         return;
       }
-      
+
       setLoadingNumberingRules(true);
       try {
         const result = await getAvailableNumberingRules(selectedMenuObjid);
-        
+
         if (result?.success && result.data) {
           setNumberingRules(result.data);
         }
@@ -265,10 +261,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
       try {
         const response = await tableManagementApi.getTableList();
         if (response.success && response.data) {
-          setAllTables(response.data.map((t: any) => ({
-            tableName: t.tableName || t.table_name,
-            displayName: t.displayName || t.table_label || t.tableName || t.table_name,
-          })));
+          setAllTables(
+            response.data.map((t: any) => ({
+              tableName: t.tableName || t.table_name,
+              displayName: t.displayName || t.table_label || t.tableName || t.table_name,
+            })),
+          );
         }
       } catch (error) {
         console.error("테이블 목록 로드 실패:", error);
@@ -295,7 +293,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
       try {
         const { apiClient } = await import("@/lib/api/client");
         const allRelations: TableRelation[] = [];
-        
+
         // 1. 화면 메인 테이블을 참조하는 테이블 조회 (자식 테이블)
         if (currentTableName) {
           const response = await apiClient.get(`/table-management/columns/${currentTableName}/referenced-by`);
@@ -309,7 +307,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             allRelations.push(...relations);
           }
         }
-        
+
         // 2. 저장 테이블이 화면 메인 테이블과 다르면, 저장 테이블을 참조하는 테이블도 조회
         if (config.mainTableName && config.mainTableName !== currentTableName) {
           const response2 = await apiClient.get(`/table-management/columns/${config.mainTableName}/referenced-by`);
@@ -321,14 +319,14 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
               referenceColumn: rel.referenceColumn || rel.reference_column || "id",
             }));
             // 중복 제거 후 추가
-            relations2.forEach(rel => {
-              if (!allRelations.some(r => r.tableName === rel.tableName)) {
+            relations2.forEach((rel) => {
+              if (!allRelations.some((r) => r.tableName === rel.tableName)) {
                 allRelations.push(rel);
               }
             });
           }
         }
-        
+
         setRelatedTables(allRelations);
       } catch (error) {
         console.error("연관 테이블 로드 실패:", error);
@@ -341,9 +339,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
   }, [currentTableName, config.mainTableName]);
 
   // Entity 조인 컬럼 정보 로드 (저장 테이블 기준)
-  const entityJoinTargetTable = config.useCustomTable && config.mainTableName
-    ? config.mainTableName
-    : currentTableName;
+  const entityJoinTargetTable = config.useCustomTable && config.mainTableName ? config.mainTableName : currentTableName;
 
   useEffect(() => {
     const fetchEntityJoinColumns = async () => {
@@ -375,7 +371,14 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
   // Entity 조인 컬럼 토글 (추가/제거)
   const toggleEntityJoinColumn = useCallback(
-    (joinTableName: string, sourceColumn: string, refColumnName: string, refColumnLabel: string, displayField: string, columnType?: string) => {
+    (
+      joinTableName: string,
+      sourceColumn: string,
+      refColumnName: string,
+      refColumnLabel: string,
+      displayField: string,
+      columnType?: string,
+    ) => {
       const currentJoins = config.entityJoins || [];
       const existingJoinIdx = currentJoins.findIndex(
         (j) => j.sourceColumn === sourceColumn && j.referenceTable === joinTableName,
@@ -396,7 +399,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             newEntityJoins[existingJoinIdx] = { ...existingJoin, columns: updatedColumns };
           }
           // config.columns에서도 제거
-          newColumns = newColumns.filter(c => !(c.key === displayField && c.isJoinColumn));
+          newColumns = newColumns.filter((c) => !(c.key === displayField && c.isJoinColumn));
         } else {
           newEntityJoins[existingJoinIdx] = {
             ...existingJoin,
@@ -461,7 +464,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
   const updateModal = useCallback(
     (field: string, value: any) => {
       updateConfig({
-        modal: { ...config.modal, [field]: value },
+        modal: { ...config.modal, [field]: value } as V2RepeaterConfig["modal"],
       });
     },
     [config.modal, updateConfig],
@@ -477,45 +480,46 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
   );
 
   // 저장 테이블 선택 핸들러 - 엔티티 관계에서 FK/PK 자동 설정
-  const handleSaveTableSelect = useCallback((tableName: string) => {
-    // 빈 값 선택 시 (현재 테이블로 복원)
-    if (!tableName || tableName === currentTableName) {
-      updateConfig({
-        useCustomTable: false,
-        mainTableName: undefined,
-        foreignKeyColumn: undefined,
-        foreignKeySourceColumn: undefined,
-      });
-      return;
-    }
+  const handleSaveTableSelect = useCallback(
+    (tableName: string) => {
+      // 빈 값 선택 시 (현재 테이블로 복원)
+      if (!tableName || tableName === currentTableName) {
+        updateConfig({
+          useCustomTable: false,
+          mainTableName: undefined,
+          foreignKeyColumn: undefined,
+          foreignKeySourceColumn: undefined,
+        });
+        return;
+      }
 
-    // 연관 테이블에서 FK 관계 찾기
-    const relation = relatedTables.find(r => r.tableName === tableName);
-    
-    if (relation) {
-      // 엔티티 관계가 있으면 자동으로 FK/PK 설정
-      updateConfig({
-        useCustomTable: true,
-        mainTableName: tableName,
-        foreignKeyColumn: relation.foreignKeyColumn,
-        foreignKeySourceColumn: relation.referenceColumn,
-      });
-    } else {
-      // 엔티티 관계가 없으면 직접 입력 필요
-      updateConfig({
-        useCustomTable: true,
-        mainTableName: tableName,
-        foreignKeyColumn: undefined,
-        foreignKeySourceColumn: "id",
-      });
-    }
-  }, [currentTableName, relatedTables, updateConfig]);
+      // 연관 테이블에서 FK 관계 찾기
+      const relation = relatedTables.find((r) => r.tableName === tableName);
+
+      if (relation) {
+        // 엔티티 관계가 있으면 자동으로 FK/PK 설정
+        updateConfig({
+          useCustomTable: true,
+          mainTableName: tableName,
+          foreignKeyColumn: relation.foreignKeyColumn,
+          foreignKeySourceColumn: relation.referenceColumn,
+        });
+      } else {
+        // 엔티티 관계가 없으면 직접 입력 필요
+        updateConfig({
+          useCustomTable: true,
+          mainTableName: tableName,
+          foreignKeyColumn: undefined,
+          foreignKeySourceColumn: "id",
+        });
+      }
+    },
+    [currentTableName, relatedTables, updateConfig],
+  );
 
   // 저장 테이블 컬럼 로드 (저장 테이블이 설정되면 해당 테이블, 아니면 현재 화면 테이블)
   // 실제 저장할 테이블의 컬럼을 보여줘야 함
-  const targetTableForColumns = config.useCustomTable && config.mainTableName 
-    ? config.mainTableName 
-    : currentTableName;
+  const targetTableForColumns = config.useCustomTable && config.mainTableName ? config.mainTableName : currentTableName;
 
   useEffect(() => {
     const loadCurrentTableColumns = async () => {
@@ -536,9 +540,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
           let detailSettings: any = null;
           if (c.detailSettings) {
             try {
-              detailSettings = typeof c.detailSettings === "string" 
-                ? JSON.parse(c.detailSettings) 
-                : c.detailSettings;
+              detailSettings = typeof c.detailSettings === "string" ? JSON.parse(c.detailSettings) : c.detailSettings;
             } catch (e) {
               console.warn("detailSettings 파싱 실패:", c.detailSettings);
             }
@@ -548,13 +550,15 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             columnName: c.columnName || c.column_name,
             displayName: c.displayName || c.columnLabel || c.columnName || c.column_name,
             inputType: c.inputType || c.input_type,
-            detailSettings: detailSettings ? {
-              codeGroup: detailSettings.codeGroup,
-              referenceTable: detailSettings.referenceTable,
-              referenceColumn: detailSettings.referenceColumn,
-              displayColumn: detailSettings.displayColumn,
-              format: detailSettings.format,
-            } : undefined,
+            detailSettings: detailSettings
+              ? {
+                  codeGroup: detailSettings.codeGroup,
+                  referenceTable: detailSettings.referenceTable,
+                  referenceColumn: detailSettings.referenceColumn,
+                  displayColumn: detailSettings.displayColumn,
+                  format: detailSettings.format,
+                }
+              : undefined,
           };
           cols.push(col);
 
@@ -563,7 +567,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
             const referenceTable = detailSettings?.referenceTable || c.referenceTable;
             const referenceColumn = detailSettings?.referenceColumn || c.referenceColumn || "id";
             const displayColumn = detailSettings?.displayColumn || c.displayColumn;
-            
+
             if (referenceTable) {
               entityCols.push({
                 columnName: col.columnName,
@@ -614,7 +618,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
         setLoadingSourceColumns(false);
       }
     };
-    
+
     if (config.renderMode === "modal") {
       loadSourceTableColumns();
     }
@@ -622,7 +626,9 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
   // 컬럼 토글 (현재 테이블 컬럼 - 입력용)
   const toggleInputColumn = (column: ColumnOption) => {
-    const existingIndex = config.columns.findIndex((c) => c.key === column.columnName && !c.isJoinColumn && !c.isSourceDisplay);
+    const existingIndex = config.columns.findIndex(
+      (c) => c.key === column.columnName && !c.isJoinColumn && !c.isSourceDisplay,
+    );
     if (existingIndex >= 0) {
       const newColumns = config.columns.filter((_, i) => i !== existingIndex);
       updateConfig({ columns: newColumns });
@@ -635,13 +641,15 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
         visible: true,
         editable: true,
         inputType: column.inputType || "text",
-        detailSettings: column.detailSettings ? {
-          codeGroup: column.detailSettings.codeGroup,
-          referenceTable: column.detailSettings.referenceTable,
-          referenceColumn: column.detailSettings.referenceColumn,
-          displayColumn: column.detailSettings.displayColumn,
-          format: column.detailSettings.format,
-        } : undefined,
+        detailSettings: column.detailSettings
+          ? {
+              codeGroup: column.detailSettings.codeGroup,
+              referenceTable: column.detailSettings.referenceTable,
+              referenceColumn: column.detailSettings.referenceColumn,
+              displayColumn: column.detailSettings.displayColumn,
+              format: column.detailSettings.format,
+            }
+          : undefined,
       };
       updateConfig({ columns: [...config.columns, newColumn] });
     }
@@ -650,7 +658,7 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
   // 🆕 소스 컬럼 토글 - columns 배열에 isSourceDisplay: true로 추가
   const toggleSourceDisplayColumn = (column: ColumnOption) => {
     const exists = config.columns.some((c) => c.key === column.columnName && c.isSourceDisplay);
-    
+
     if (exists) {
       // 제거
       updateConfig({ columns: config.columns.filter((c) => c.key !== column.columnName) });
@@ -690,28 +698,23 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
   // 계산 규칙 추가
   const addCalculationRule = () => {
-    const newRules = [
-      ...calculationRules,
-      { id: `calc_${Date.now()}`, targetColumn: "", formula: "" }
-    ];
+    const newRules = [...calculationRules, { id: `calc_${Date.now()}`, targetColumn: "", formula: "" }];
     syncCalculationRules(newRules);
   };
 
   // 계산 규칙 삭제
   const removeCalculationRule = (id: string) => {
-    syncCalculationRules(calculationRules.filter(r => r.id !== id));
+    syncCalculationRules(calculationRules.filter((r) => r.id !== id));
   };
 
   // 계산 규칙 업데이트
   const updateCalculationRule = (id: string, field: keyof CalculationRule, value: string) => {
-    syncCalculationRules(
-      calculationRules.map(r => r.id === id ? { ...r, [field]: value } : r)
-    );
+    syncCalculationRules(calculationRules.map((r) => (r.id === id ? { ...r, [field]: value } : r)));
   };
 
   // 수식 입력 필드에 컬럼명 삽입
   const insertColumnToFormula = (ruleId: string, columnKey: string) => {
-    const rule = calculationRules.find(r => r.id === ruleId);
+    const rule = calculationRules.find((r) => r.id === ruleId);
     if (!rule) return;
     const newFormula = rule.formula ? `${rule.formula} ${columnKey}` : columnKey;
     updateCalculationRule(ruleId, "formula", newFormula);
@@ -734,15 +737,15 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
 
   // 엔티티 컬럼 선택 시 소스 테이블 자동 설정
   const handleEntityColumnSelect = (columnName: string) => {
-    const selectedEntity = entityColumns.find(c => c.columnName === columnName);
-    
+    const selectedEntity = entityColumns.find((c) => c.columnName === columnName);
+
     if (selectedEntity) {
       console.log("엔티티 컬럼 선택:", selectedEntity);
-      
+
       // 소스 테이블 컬럼에서 라벨 정보 찾기
-      const displayColInfo = sourceTableColumns.find(c => c.columnName === selectedEntity.displayColumn);
+      const displayColInfo = sourceTableColumns.find((c) => c.columnName === selectedEntity.displayColumn);
       const displayLabel = displayColInfo?.displayName || selectedEntity.displayColumn || "";
-      
+
       updateConfig({
         dataSource: {
           ...config.dataSource,
@@ -754,11 +757,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
         modal: {
           ...config.modal,
           searchFields: selectedEntity.displayColumn ? [selectedEntity.displayColumn] : [],
-          // 라벨 포함 형식으로 저장
-          sourceDisplayColumns: selectedEntity.displayColumn 
-            ? [{ key: selectedEntity.displayColumn, label: displayLabel }] 
+          sourceDisplayColumns: selectedEntity.displayColumn
+            ? [{ key: selectedEntity.displayColumn, label: displayLabel }]
             : [],
-        },
+        } as V2RepeaterConfig["modal"],
       });
     }
   };
@@ -770,9 +772,10 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
   // 엔티티 컬럼 제외한 입력 가능 컬럼 (FK 컬럼 제외)
   const inputableColumns = useMemo(() => {
     const fkColumn = config.dataSource?.foreignKey;
-    return currentTableColumns.filter(col => 
-      col.columnName !== fkColumn && // FK 컬럼 제외
-      col.inputType !== "entity" // 다른 엔티티 컬럼도 제외 (필요시)
+    return currentTableColumns.filter(
+      (col) =>
+        col.columnName !== fkColumn && // FK 컬럼 제외
+        col.inputType !== "entity", // 다른 엔티티 컬럼도 제외 (필요시)
     );
   }, [currentTableColumns, config.dataSource?.foreignKey]);
 
@@ -780,109 +783,123 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
     <div className="space-y-4">
       <Tabs defaultValue="basic" className="w-full">
         <TabsList className="grid w-full grid-cols-2">
-          <TabsTrigger value="basic" className="text-xs">기본</TabsTrigger>
-          <TabsTrigger value="columns" className="text-xs">컬럼</TabsTrigger>
+          <TabsTrigger value="basic" className="text-xs">
+            기본
+          </TabsTrigger>
+          <TabsTrigger value="columns" className="text-xs">
+            컬럼
+          </TabsTrigger>
         </TabsList>
 
         {/* 기본 설정 탭 */}
         <TabsContent value="basic" className="mt-4 space-y-4">
-          {/* 렌더링 모드 */}
+          {/* 렌더링 모드 - 카드 선택 */}
           <div className="space-y-2">
-            <Label className="text-xs font-medium">렌더링 모드</Label>
-            <Select 
-              value={config.renderMode} 
-              onValueChange={(value) => {
-                const newMode = value as any;
-                const currentMode = config.renderMode;
-                
-                // 모달 → 인라인 모드로 변경 시: isSourceDisplay 컬럼 제거 및 모달 설정 초기화
-                if (currentMode === "modal" && newMode === "inline") {
-                  const filteredColumns = config.columns.filter((col) => !col.isSourceDisplay);
-                  updateConfig({ 
-                    renderMode: newMode,
-                    columns: filteredColumns,
-                    dataSource: {
-                      ...config.dataSource,
-                      sourceTable: undefined,
-                      foreignKey: undefined,
-                      referenceKey: undefined,
-                      displayColumn: undefined,
-                    },
-                    modal: {
-                      ...config.modal,
-                      searchFields: [],
-                      sourceDisplayColumns: [],
-                    },
-                  });
-                } else {
-                  updateConfig({ renderMode: newMode });
-                }
-              }}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue placeholder="모드 선택" />
-              </SelectTrigger>
-              <SelectContent>
-                {RENDER_MODE_OPTIONS.map((opt) => (
-                  <SelectItem key={opt.value} value={opt.value}>
-                    <div className="flex flex-col">
-                      <span>{opt.label}</span>
-                      <span className="text-[10px] text-muted-foreground/70">
-                        {opt.value === "inline" && "현재 테이블 컬럼 직접 입력"}
-                        {opt.value === "modal" && "엔티티 선택 후 추가 정보 입력"}
-                        {opt.value === "button" && "버튼으로 관련 화면 열기"}
-                      </span>
-                    </div>
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <p className="text-sm font-medium">리피터를 어떤 방식으로 사용하나요?</p>
+            <div className="grid grid-cols-3 gap-2">
+              {[
+                { value: "inline", icon: Rows3, title: "직접 입력", description: "테이블 컬럼에 바로 입력해요" },
+                { value: "modal", icon: Columns3, title: "모달 선택", description: "엔티티를 검색해서 추가해요" },
+                {
+                  value: "button",
+                  icon: MousePointerClick,
+                  title: "버튼 연결",
+                  description: "버튼으로 관련 화면을 열어요",
+                },
+              ].map((card) => {
+                const Icon = card.icon;
+                const isSelected = config.renderMode === card.value;
+                return (
+                  <button
+                    key={card.value}
+                    type="button"
+                    onClick={() => {
+                      const newMode = card.value as any;
+                      const currentMode = config.renderMode;
+                      if (currentMode === "modal" && newMode === "inline") {
+                        const filteredColumns = config.columns.filter((col) => !col.isSourceDisplay);
+                        updateConfig({
+                          renderMode: newMode,
+                          columns: filteredColumns,
+                          dataSource: {
+                            ...config.dataSource,
+                            sourceTable: undefined,
+                            foreignKey: undefined,
+                            referenceKey: undefined,
+                            displayColumn: undefined,
+                          },
+                          modal: {
+                            ...config.modal,
+                            searchFields: [],
+                            sourceDisplayColumns: [],
+                          } as V2RepeaterConfig["modal"],
+                        });
+                      } else {
+                        updateConfig({ renderMode: newMode });
+                      }
+                    }}
+                    className={cn(
+                      "flex min-h-[80px] flex-col items-center justify-center rounded-lg border p-3 text-center transition-all",
+                      isSelected
+                        ? "border-primary bg-primary/5 ring-primary/20 ring-1"
+                        : "border-border hover:border-primary/50 hover:bg-muted/50",
+                    )}
+                  >
+                    <Icon className="text-primary mb-1.5 h-5 w-5" />
+                    <span className="text-xs leading-tight font-medium">{card.title}</span>
+                    <span className="text-muted-foreground mt-0.5 text-[10px] leading-tight">{card.description}</span>
+                  </button>
+                );
+              })}
+            </div>
           </div>
 
-          <Separator />
-
           {/* 저장 대상 테이블 */}
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">저장 테이블</Label>
-            
+          <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+            <div className="flex items-center gap-2">
+              <Database className="text-primary h-4 w-4" />
+              <span className="text-sm font-medium">데이터를 어디에 저장하나요?</span>
+            </div>
+
             {/* 현재 선택된 테이블 표시 (기존 테이블 UI와 동일한 스타일) */}
-            <div className={cn(
-              "rounded-lg border p-3",
-              config.useCustomTable && config.mainTableName
-                ? "border-orange-300 bg-amber-50"
-                : "border-primary/40 bg-primary/10"
-            )}>
+            <div
+              className={cn(
+                "rounded-lg border p-3",
+                config.useCustomTable && config.mainTableName
+                  ? "border-orange-300 bg-amber-50"
+                  : "border-primary/40 bg-primary/10",
+              )}
+            >
               <div className="flex items-center gap-2">
-                <Database className={cn(
-                  "h-4 w-4",
-                  config.useCustomTable && config.mainTableName
-                    ? "text-amber-600"
-                    : "text-primary"
-                )} />
+                <Database
+                  className={cn(
+                    "h-4 w-4",
+                    config.useCustomTable && config.mainTableName ? "text-amber-600" : "text-primary",
+                  )}
+                />
                 <div className="flex-1">
-                  <p className={cn(
-                    "text-sm font-medium",
-                    config.useCustomTable && config.mainTableName
-                      ? "text-orange-700"
-                      : "text-primary"
-                  )}>
+                  <p
+                    className={cn(
+                      "text-sm font-medium",
+                      config.useCustomTable && config.mainTableName ? "text-orange-700" : "text-primary",
+                    )}
+                  >
                     {config.useCustomTable && config.mainTableName
-                      ? (allTables.find(t => t.tableName === config.mainTableName)?.displayName || config.mainTableName)
-                      : (currentTableName || "미설정")
-                    }
+                      ? allTables.find((t) => t.tableName === config.mainTableName)?.displayName || config.mainTableName
+                      : currentTableName || "미설정"}
                   </p>
                   {config.useCustomTable && config.mainTableName && config.foreignKeyColumn && (
-                    <p className="text-[10px] text-amber-600 mt-0.5">
+                    <p className="mt-0.5 text-[10px] text-amber-600">
                       FK: {config.foreignKeyColumn} → {currentTableName}.{config.foreignKeySourceColumn || "id"}
                     </p>
                   )}
                   {!config.useCustomTable && currentTableName && (
-                    <p className="text-[10px] text-primary mt-0.5">화면 메인 테이블</p>
+                    <p className="text-primary mt-0.5 text-[10px]">화면 메인 테이블</p>
                   )}
                 </div>
               </div>
             </div>
-            
+
             {/* 테이블 변경 Combobox */}
             <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
               <PopoverTrigger asChild>
@@ -897,18 +914,12 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                   <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent 
-                className="p-0" 
-                style={{ width: "var(--radix-popover-trigger-width)" }} 
-                align="start"
-              >
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
                 <Command>
                   <CommandInput placeholder="테이블 검색..." className="text-xs" />
                   <CommandList className="max-h-60">
-                    <CommandEmpty className="text-xs py-3 text-center">
-                      테이블을 찾을 수 없습니다.
-                    </CommandEmpty>
-                    
+                    <CommandEmpty className="py-3 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+
                     {/* 현재 테이블 (기본) */}
                     {currentTableName && (
                       <CommandGroup heading="기본">
@@ -923,16 +934,16 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                           <Check
                             className={cn(
                               "mr-2 h-3 w-3",
-                              !config.useCustomTable || !config.mainTableName ? "opacity-100" : "opacity-0"
+                              !config.useCustomTable || !config.mainTableName ? "opacity-100" : "opacity-0",
                             )}
                           />
-                          <Database className="mr-2 h-3 w-3 text-primary" />
+                          <Database className="text-primary mr-2 h-3 w-3" />
                           <span>{currentTableName}</span>
-                          <span className="ml-1 text-[10px] text-muted-foreground">(기본)</span>
+                          <span className="text-muted-foreground ml-1 text-[10px]">(기본)</span>
                         </CommandItem>
                       </CommandGroup>
                     )}
-                    
+
                     {/* 연관 테이블 (엔티티 관계) */}
                     {relatedTables.length > 0 && (
                       <CommandGroup heading="연관 테이블 (FK 자동 설정)">
@@ -949,23 +960,24 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             <Check
                               className={cn(
                                 "mr-2 h-3 w-3",
-                                config.mainTableName === rel.tableName ? "opacity-100" : "opacity-0"
+                                config.mainTableName === rel.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
                             <Link2 className="mr-2 h-3 w-3 text-amber-500" />
                             <span>{rel.tableLabel}</span>
-                            <span className="ml-1 text-[10px] text-muted-foreground">
-                              ({rel.foreignKeyColumn})
-                            </span>
+                            <span className="text-muted-foreground ml-1 text-[10px]">({rel.foreignKeyColumn})</span>
                           </CommandItem>
                         ))}
                       </CommandGroup>
                     )}
-                    
+
                     {/* 전체 테이블 목록 */}
                     <CommandGroup heading="전체 테이블 (FK 직접 입력)">
                       {allTables
-                        .filter(t => t.tableName !== currentTableName && !relatedTables.some(r => r.tableName === t.tableName))
+                        .filter(
+                          (t) =>
+                            t.tableName !== currentTableName && !relatedTables.some((r) => r.tableName === t.tableName),
+                        )
                         .map((table) => (
                           <CommandItem
                             key={table.tableName}
@@ -979,102 +991,97 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                             <Check
                               className={cn(
                                 "mr-2 h-3 w-3",
-                                config.mainTableName === table.tableName ? "opacity-100" : "opacity-0"
+                                config.mainTableName === table.tableName ? "opacity-100" : "opacity-0",
                               )}
                             />
-                            <Database className="mr-2 h-3 w-3 text-muted-foreground/70" />
+                            <Database className="text-muted-foreground/70 mr-2 h-3 w-3" />
                             <span>{table.displayName}</span>
                           </CommandItem>
-                        ))
-                      }
+                        ))}
                     </CommandGroup>
                   </CommandList>
                 </Command>
               </PopoverContent>
             </Popover>
-            
+
             {/* FK 직접 입력 - 화면 메인 테이블이 있고 연관 테이블이 아닌 경우만 표시 */}
             {/* 화면 메인 테이블이 없으면 FK 설정 불필요 (독립 저장) */}
-            {config.useCustomTable && config.mainTableName && currentTableName &&
-             !relatedTables.some(r => r.tableName === config.mainTableName) && (
-              <div className="space-y-2 rounded border border-amber-200 bg-amber-50 p-2">
-                <p className="text-[10px] text-amber-700">
-                  화면 테이블({currentTableName})과의 엔티티 관계가 없습니다. FK 컬럼을 직접 입력하세요.
-                </p>
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">FK 컬럼 (저장 테이블)</Label>
-                    <Input
-                      value={config.foreignKeyColumn || ""}
-                      onChange={(e) => updateConfig({ foreignKeyColumn: e.target.value })}
-                      placeholder="예: master_id"
-                      className="h-7 text-xs"
-                    />
-                  </div>
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">PK 컬럼 (화면 테이블)</Label>
-                    <Input
-                      value={config.foreignKeySourceColumn || "id"}
-                      onChange={(e) => updateConfig({ foreignKeySourceColumn: e.target.value })}
-                      placeholder="id"
-                      className="h-7 text-xs"
-                    />
+            {config.useCustomTable &&
+              config.mainTableName &&
+              currentTableName &&
+              !relatedTables.some((r) => r.tableName === config.mainTableName) && (
+                <div className="space-y-2 rounded border border-amber-200 bg-amber-50 p-2">
+                  <p className="text-[10px] text-amber-700">
+                    화면 테이블({currentTableName})과의 엔티티 관계가 없습니다. FK 컬럼을 직접 입력하세요.
+                  </p>
+                  <div className="grid grid-cols-2 gap-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">FK 컬럼 (저장 테이블)</Label>
+                      <Input
+                        value={config.foreignKeyColumn || ""}
+                        onChange={(e) => updateConfig({ foreignKeyColumn: e.target.value })}
+                        placeholder="예: master_id"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">PK 컬럼 (화면 테이블)</Label>
+                      <Input
+                        value={config.foreignKeySourceColumn || "id"}
+                        onChange={(e) => updateConfig({ foreignKeySourceColumn: e.target.value })}
+                        placeholder="id"
+                        className="h-7 text-xs"
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-            )}
-            
+              )}
+
             {/* 화면 메인 테이블이 없을 때 안내 */}
             {config.useCustomTable && config.mainTableName && !currentTableName && (
-              <div className="rounded border border-primary/20 bg-primary/10 p-2">
-                <p className="text-[10px] text-primary">
-                  독립 저장 모드: 화면 테이블 없이 직접 저장합니다.
+              <div className="border-primary/20 bg-primary/10 rounded border p-2">
+                <p className="text-primary text-[10px]">독립 저장 모드: 화면 테이블 없이 직접 저장해요</p>
+              </div>
+            )}
+
+            {/* 현재 화면 정보 (메인 테이블이 설정된 경우에만 표시) */}
+            {currentTableName && (
+              <div className="bg-background rounded-md border p-3">
+                <p className="text-muted-foreground text-xs">화면 메인 테이블</p>
+                <p className="mt-0.5 text-sm font-medium">{currentTableName}</p>
+                <p className="text-muted-foreground mt-0.5 text-[10px]">
+                  컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
                 </p>
               </div>
             )}
           </div>
 
-          <Separator />
-
-          {/* 현재 화면 정보 (메인 테이블이 설정된 경우에만 표시) */}
-          {currentTableName && (
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">메인 화면 테이블 (참고)</Label>
-              <div className="rounded border border-border bg-muted p-2">
-                <p className="text-xs text-foreground font-medium">{currentTableName}</p>
-                <p className="text-[10px] text-muted-foreground">
-                  컬럼 {currentTableColumns.length}개 / 엔티티 {entityColumns.length}개
-                </p>
-              </div>
-            </div>
-          )}
-
           {/* 모달 모드: 엔티티 컬럼 선택 */}
           {isModalMode && (
             <>
-              <Separator />
-              <div className="space-y-2">
-                <Label className="text-xs font-medium">엔티티 선택</Label>
-                <p className="text-[10px] text-muted-foreground">
-                  모달에서 검색할 엔티티를 선택하세요 (FK만 저장됨)
-                </p>
-                
+              <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+                <div className="flex items-center gap-2">
+                  <Link2 className="text-primary h-4 w-4" />
+                  <span className="text-sm font-medium">어떤 엔티티를 검색하나요?</span>
+                </div>
+                <p className="text-muted-foreground text-[11px]">모달에서 검색할 엔티티를 선택하면 FK만 저장돼요</p>
+
                 {entityColumns.length > 0 ? (
                   <Select
                     value={config.dataSource?.foreignKey || ""}
                     onValueChange={handleEntityColumnSelect}
                     disabled={!targetTableForColumns}
                   >
-                    <SelectTrigger className="h-8 text-xs">
+                    <SelectTrigger className="h-7 text-xs">
                       <SelectValue placeholder="엔티티 컬럼 선택" />
                     </SelectTrigger>
                     <SelectContent>
                       {entityColumns.map((col) => (
                         <SelectItem key={col.columnName} value={col.columnName}>
                           <div className="flex items-center gap-2">
-                            <Link2 className="h-3 w-3 text-primary" />
+                            <Link2 className="text-primary h-3 w-3" />
                             <span>{col.displayName}</span>
-                            <ArrowRight className="h-3 w-3 text-muted-foreground/70" />
+                            <ArrowRight className="text-muted-foreground/70 h-3 w-3" />
                             <span className="text-muted-foreground">{col.referenceTable}</span>
                           </div>
                         </SelectItem>
@@ -1082,840 +1089,1170 @@ export const V2RepeaterConfigPanel: React.FC<V2RepeaterConfigPanelProps> = ({
                     </SelectContent>
                   </Select>
                 ) : (
-                  <div className="rounded border border-border bg-muted p-2">
-                    <p className="text-[10px] text-muted-foreground">
-                      {loadingColumns 
-                        ? "로딩 중..." 
-                        : !targetTableForColumns 
-                          ? "저장 테이블을 먼저 선택하세요"
-                          : "엔티티 타입 컬럼이 없습니다"}
+                  <div className="rounded-md border-2 border-dashed p-4 text-center">
+                    <p className="text-muted-foreground text-sm">
+                      {loadingColumns
+                        ? "컬럼 정보를 불러오고 있어요..."
+                        : !targetTableForColumns
+                          ? "저장 테이블을 먼저 선택해주세요"
+                          : "엔티티 타입 컬럼이 없어요"}
                     </p>
                   </div>
                 )}
-                
+
                 {/* 선택된 엔티티 정보 */}
                 {config.dataSource?.sourceTable && (
-                  <div className="rounded border border-emerald-200 bg-emerald-50 p-2 space-y-1">
-                    <p className="text-xs text-emerald-700 font-medium">선택된 엔티티</p>
-                    <div className="text-[10px] text-emerald-600">
-                      <p>검색 테이블: {config.dataSource.sourceTable}</p>
-                      <p>저장 컬럼: {config.dataSource.foreignKey} (FK)</p>
-                    </div>
+                  <div className="bg-background space-y-1 rounded-md border p-3">
+                    <p className="text-muted-foreground text-xs">선택된 엔티티</p>
+                    <p className="text-sm font-medium">{config.dataSource.sourceTable}</p>
+                    <p className="text-muted-foreground text-[11px]">
+                      {config.dataSource.foreignKey} 컬럼에 FK로 저장돼요
+                    </p>
                   </div>
                 )}
               </div>
+
+              {/* 모달 표시 설정 */}
+              <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+                <span className="text-sm font-medium">모달 표시 설정</span>
+                <div className="space-y-2">
+                  <div className="space-y-1">
+                    <Label className="text-muted-foreground text-[10px]">모달 제목</Label>
+                    <Input
+                      value={config.modal?.title || ""}
+                      onChange={(e) => updateModal("title", e.target.value)}
+                      placeholder="항목 검색"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label className="text-muted-foreground text-[10px]">검색 버튼 텍스트</Label>
+                    <Input
+                      value={config.modal?.buttonText || ""}
+                      onChange={(e) => updateModal("buttonText", e.target.value)}
+                      placeholder="검색"
+                      className="h-7 text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
             </>
           )}
 
-          <Separator />
-
-          {/* 소스 디테일 자동 조회 설정 */}
-          <div className="space-y-2">
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="enableSourceDetail"
-                checked={!!config.sourceDetailConfig}
-                onCheckedChange={(checked) => {
-                  if (checked) {
-                    updateConfig({
-                      sourceDetailConfig: {
-                        tableName: "",
-                        foreignKey: "",
-                        parentKey: "",
-                      },
-                    });
-                  } else {
-                    updateConfig({ sourceDetailConfig: undefined });
-                  }
-                }}
-              />
-              <label htmlFor="enableSourceDetail" className="text-xs font-medium flex items-center gap-1">
-                <ListTree className="h-3 w-3" />
-                소스 디테일 자동 조회
-              </label>
-            </div>
-            <p className="text-[10px] text-muted-foreground">
-              모달에서 전달받은 마스터 데이터의 디테일 행을 자동으로 조회하여 리피터에 채웁니다.
-            </p>
-
-            {config.sourceDetailConfig && (
-              <div className="space-y-2 rounded border border-violet-200 bg-violet-50 p-2">
-                <div className="space-y-1">
-                  <Label className="text-[10px]">디테일 테이블</Label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        className="h-7 w-full justify-between text-xs"
-                      >
-                        {config.sourceDetailConfig.tableName
-                          ? (allTables.find(t => t.tableName === config.sourceDetailConfig!.tableName)?.displayName || config.sourceDetailConfig.tableName)
-                          : "테이블 선택..."
-                        }
-                        <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      className="p-0"
-                      style={{ width: "var(--radix-popover-trigger-width)" }}
-                      align="start"
-                    >
-                      <Command>
-                        <CommandInput placeholder="테이블 검색..." className="text-xs" />
-                        <CommandList className="max-h-48">
-                          <CommandEmpty className="text-xs py-3 text-center">테이블을 찾을 수 없습니다.</CommandEmpty>
-                          <CommandGroup>
-                            {allTables.map((table) => (
-                              <CommandItem
-                                key={table.tableName}
-                                value={`${table.tableName} ${table.displayName}`}
-                                onSelect={() => {
-                                  updateConfig({
-                                    sourceDetailConfig: {
-                                      ...config.sourceDetailConfig!,
-                                      tableName: table.tableName,
-                                    },
-                                  });
-                                }}
-                                className="text-xs"
-                              >
-                                <Check className={cn("mr-2 h-3 w-3", config.sourceDetailConfig!.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
-                                <span>{table.displayName}</span>
-                              </CommandItem>
-                            ))}
-                          </CommandGroup>
-                        </CommandList>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
+          {/* 기능 옵션 - Collapsible */}
+          <Collapsible open={featureOptionsOpen} onOpenChange={setFeatureOptionsOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <Settings className="text-muted-foreground h-4 w-4" />
+                  <span className="text-sm font-medium">기능 옵션</span>
+                  <Badge variant="secondary" className="h-5 text-[10px]">
+                    6개
+                  </Badge>
                 </div>
+                <ChevronDown
+                  className={cn(
+                    "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                    featureOptionsOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="space-y-1 rounded-b-lg border border-t-0 p-3">
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">추가 버튼</p>
+                    <p className="text-muted-foreground text-[11px]">새로운 행을 추가할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showAddButton ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showAddButton", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">삭제 버튼</p>
+                    <p className="text-muted-foreground text-[11px]">선택한 행을 삭제할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showDeleteButton ?? true}
+                    onCheckedChange={(checked) => updateFeatures("showDeleteButton", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">인라인 편집</p>
+                    <p className="text-muted-foreground text-[11px]">셀을 클릭하면 바로 수정할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.inlineEdit ?? false}
+                    onCheckedChange={(checked) => updateFeatures("inlineEdit", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">다중 선택</p>
+                    <p className="text-muted-foreground text-[11px]">여러 행을 동시에 선택할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.multiSelect ?? true}
+                    onCheckedChange={(checked) => updateFeatures("multiSelect", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">행 번호</p>
+                    <p className="text-muted-foreground text-[11px]">각 행에 순번을 표시해요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.showRowNumber ?? false}
+                    onCheckedChange={(checked) => updateFeatures("showRowNumber", checked)}
+                  />
+                </div>
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">행 선택</p>
+                    <p className="text-muted-foreground text-[11px]">체크박스로 행을 선택할 수 있어요</p>
+                  </div>
+                  <Switch
+                    checked={config.features?.selectable ?? false}
+                    onCheckedChange={(checked) => updateFeatures("selectable", checked)}
+                  />
+                </div>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
 
-                <div className="grid grid-cols-2 gap-2">
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">디테일 FK 컬럼</Label>
-                    <Input
-                      value={config.sourceDetailConfig.foreignKey || ""}
-                      onChange={(e) =>
+          {/* 고급 설정 - Collapsible (소스 디테일 등) */}
+          <Collapsible>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <Settings className="text-muted-foreground h-4 w-4" />
+                  <span className="text-sm font-medium">고급 설정</span>
+                </div>
+                <ChevronDown className="text-muted-foreground h-4 w-4 transition-transform duration-200" />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+                {/* 소스 디테일 자동 조회 */}
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">소스 디테일 자동 조회</p>
+                    <p className="text-muted-foreground text-[11px]">마스터 데이터의 디테일 행을 자동으로 채워요</p>
+                  </div>
+                  <Switch
+                    checked={!!config.sourceDetailConfig}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
                         updateConfig({
                           sourceDetailConfig: {
-                            ...config.sourceDetailConfig!,
-                            foreignKey: e.target.value,
+                            tableName: "",
+                            foreignKey: "",
+                            parentKey: "",
                           },
-                        })
+                        });
+                      } else {
+                        updateConfig({ sourceDetailConfig: undefined });
                       }
-                      placeholder="예: order_no"
-                      className="h-7 text-xs"
-                    />
-                  </div>
-                  <div className="space-y-1">
-                    <Label className="text-[10px]">마스터 키 컬럼</Label>
-                    <Input
-                      value={config.sourceDetailConfig.parentKey || ""}
-                      onChange={(e) =>
-                        updateConfig({
-                          sourceDetailConfig: {
-                            ...config.sourceDetailConfig!,
-                            parentKey: e.target.value,
-                          },
-                        })
-                      }
-                      placeholder="예: order_no"
-                      className="h-7 text-xs"
-                    />
-                  </div>
+                    }}
+                  />
                 </div>
 
-                <p className="text-[10px] text-violet-600">
-                  마스터에서 [{config.sourceDetailConfig.parentKey || "?"}] 추출 →
-                  {" "}{config.sourceDetailConfig.tableName || "?"}.{config.sourceDetailConfig.foreignKey || "?"} 로 조회
-                </p>
-              </div>
-            )}
-          </div>
+                {config.sourceDetailConfig && (
+                  <div className="border-primary/20 ml-4 space-y-2 border-l-2 pl-3">
+                    <div className="space-y-1">
+                      <p className="text-muted-foreground text-xs">디테일 테이블</p>
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-xs">
+                            {config.sourceDetailConfig.tableName
+                              ? allTables.find((t) => t.tableName === config.sourceDetailConfig!.tableName)
+                                  ?.displayName || config.sourceDetailConfig.tableName
+                              : "테이블 선택..."}
+                            <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          className="p-0"
+                          style={{ width: "var(--radix-popover-trigger-width)" }}
+                          align="start"
+                        >
+                          <Command>
+                            <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                            <CommandList className="max-h-48">
+                              <CommandEmpty className="py-3 text-center text-xs">
+                                테이블을 찾을 수 없습니다.
+                              </CommandEmpty>
+                              <CommandGroup>
+                                {allTables.map((table) => (
+                                  <CommandItem
+                                    key={table.tableName}
+                                    value={`${table.tableName} ${table.displayName}`}
+                                    onSelect={() => {
+                                      updateConfig({
+                                        sourceDetailConfig: {
+                                          ...config.sourceDetailConfig!,
+                                          tableName: table.tableName,
+                                        },
+                                      });
+                                    }}
+                                    className="text-xs"
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-3 w-3",
+                                        config.sourceDetailConfig!.tableName === table.tableName
+                                          ? "opacity-100"
+                                          : "opacity-0",
+                                      )}
+                                    />
+                                    <span>{table.displayName}</span>
+                                  </CommandItem>
+                                ))}
+                              </CommandGroup>
+                            </CommandList>
+                          </Command>
+                        </PopoverContent>
+                      </Popover>
+                    </div>
 
-          <Separator />
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="space-y-1">
+                        <p className="text-muted-foreground text-xs">디테일 FK 컬럼</p>
+                        <Input
+                          value={config.sourceDetailConfig.foreignKey || ""}
+                          onChange={(e) =>
+                            updateConfig({
+                              sourceDetailConfig: {
+                                ...config.sourceDetailConfig!,
+                                foreignKey: e.target.value,
+                              },
+                            })
+                          }
+                          placeholder="예: order_no"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <p className="text-muted-foreground text-xs">마스터 키 컬럼</p>
+                        <Input
+                          value={config.sourceDetailConfig.parentKey || ""}
+                          onChange={(e) =>
+                            updateConfig({
+                              sourceDetailConfig: {
+                                ...config.sourceDetailConfig!,
+                                parentKey: e.target.value,
+                              },
+                            })
+                          }
+                          placeholder="예: order_no"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+                    </div>
 
-          {/* 기능 옵션 */}
-          <div className="space-y-3">
-            <Label className="text-xs font-medium">기능 옵션</Label>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="showAddButton"
-                  checked={config.features?.showAddButton ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showAddButton", !!checked)}
-                />
-                <label htmlFor="showAddButton" className="text-xs">추가 버튼</label>
+                    <p className="text-muted-foreground text-[11px]">
+                      마스터에서 [{config.sourceDetailConfig.parentKey || "?"}] 추출 →{" "}
+                      {config.sourceDetailConfig.tableName || "?"}.{config.sourceDetailConfig.foreignKey || "?"} 로
+                      조회해요
+                    </p>
+                  </div>
+                )}
               </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="showDeleteButton"
-                  checked={config.features?.showDeleteButton ?? true}
-                  onCheckedChange={(checked) => updateFeatures("showDeleteButton", !!checked)}
-                />
-                <label htmlFor="showDeleteButton" className="text-xs">삭제 버튼</label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="inlineEdit"
-                  checked={config.features?.inlineEdit ?? false}
-                  onCheckedChange={(checked) => updateFeatures("inlineEdit", !!checked)}
-                />
-                <label htmlFor="inlineEdit" className="text-xs">인라인 편집</label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="multiSelect"
-                  checked={config.features?.multiSelect ?? true}
-                  onCheckedChange={(checked) => updateFeatures("multiSelect", !!checked)}
-                />
-                <label htmlFor="multiSelect" className="text-xs">다중 선택</label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="showRowNumber"
-                  checked={config.features?.showRowNumber ?? false}
-                  onCheckedChange={(checked) => updateFeatures("showRowNumber", !!checked)}
-                />
-                <label htmlFor="showRowNumber" className="text-xs">행 번호</label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="selectable"
-                  checked={config.features?.selectable ?? false}
-                  onCheckedChange={(checked) => updateFeatures("selectable", !!checked)}
-                />
-                <label htmlFor="selectable" className="text-xs">행 선택</label>
-              </div>
-            </div>
-          </div>
+            </CollapsibleContent>
+          </Collapsible>
         </TabsContent>
 
-        {/* 컬럼 설정 탭 - 🆕 통합 컬럼 선택 */}
+        {/* 컬럼 설정 탭 */}
         <TabsContent value="columns" className="mt-4 space-y-4">
-          {/* 통합 컬럼 선택 */}
-              <div className="space-y-2">
-            <Label className="text-xs font-medium">컬럼 선택</Label>
-                <p className="text-[10px] text-muted-foreground">
-              {isModalMode 
-                ? "표시할 컬럼과 입력 컬럼을 선택하세요. 아이콘으로 표시/입력 구분"
-                : "입력받을 컬럼을 선택하세요"
-              }
-                </p>
-                
-            {/* 모달 모드: 소스 테이블 컬럼 (표시용) */}
-            {isModalMode && config.dataSource?.sourceTable && (
-              <>
-                <div className="text-[10px] font-medium text-primary mt-2 mb-1 flex items-center gap-1">
-                  <Link2 className="h-3 w-3" />
-                  소스 테이블 ({config.dataSource.sourceTable}) - 표시용
+          {/* 통합 컬럼 선택 - Collapsible */}
+          <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+              >
+                <div className="flex items-center gap-2">
+                  <Database className="text-muted-foreground h-4 w-4" />
+                  <span className="truncate text-sm font-medium">{isModalMode ? "컬럼 표시/입력" : "입력 컬럼"}</span>
+                  <Badge variant="secondary" className="h-5 text-[10px]">
+                    {inputableColumns.length}개 컬럼
+                  </Badge>
                 </div>
-                {loadingSourceColumns ? (
+                <ChevronDown
+                  className={cn(
+                    "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                    columnSelectOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="space-y-3 rounded-b-lg border border-t-0 p-3">
+                <p className="text-muted-foreground text-[11px]">
+                  {isModalMode
+                    ? "소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요"
+                    : "체크한 컬럼이 리피터에 입력 필드로 표시돼요"}
+                </p>
+
+                {/* 모달 모드: 소스 테이블 컬럼 (표시용) */}
+                {isModalMode && config.dataSource?.sourceTable && (
+                  <>
+                    <div className="text-primary mt-2 mb-1 flex items-center gap-1 text-[10px] font-medium">
+                      <Link2 className="h-3 w-3" />
+                      <span className="truncate">소스 테이블 ({config.dataSource.sourceTable}) - 표시용</span>
+                    </div>
+                    {loadingSourceColumns ? (
+                      <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
+                    ) : sourceTableColumns.length === 0 ? (
+                      <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
+                    ) : (
+                      <div className="border-primary/20 bg-primary/10/30 space-y-0.5 rounded-md border p-2">
+                        {sourceTableColumns.map((column) => (
+                          <div
+                            key={`source-${column.columnName}`}
+                            className={cn(
+                              "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                              isSourceColumnSelected(column.columnName) && "bg-primary/10",
+                            )}
+                            onClick={() => toggleSourceDisplayColumn(column)}
+                          >
+                            <Checkbox
+                              checked={isSourceColumnSelected(column.columnName)}
+                              onCheckedChange={() => toggleSourceDisplayColumn(column)}
+                              className="pointer-events-none h-3.5 w-3.5"
+                            />
+                            <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
+                            <span className="truncate text-xs">{column.displayName}</span>
+                            <span className="text-primary/80 ml-auto text-[10px]">표시</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </>
+                )}
+
+                {/* 저장 테이블 컬럼 (입력용) */}
+                <div className="text-muted-foreground mt-3 mb-1 flex items-center gap-1 text-[10px] font-medium">
+                  <Database className="h-3 w-3" />
+                  <span className="truncate">저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용</span>
+                </div>
+                {loadingColumns ? (
                   <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-                ) : sourceTableColumns.length === 0 ? (
+                ) : inputableColumns.length === 0 ? (
                   <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없습니다</p>
                 ) : (
-                  <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
-                    {sourceTableColumns.map((column) => (
+                  <div className="space-y-0.5 rounded-md border p-2">
+                    {inputableColumns.map((column) => (
                       <div
-                        key={`source-${column.columnName}`}
+                        key={`input-${column.columnName}`}
                         className={cn(
-                          "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                          isSourceColumnSelected(column.columnName) && "bg-primary/10",
+                          "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                          isColumnAdded(column.columnName) && "bg-primary/10",
                         )}
-                        onClick={() => toggleSourceDisplayColumn(column)}
+                        onClick={() => toggleInputColumn(column)}
                       >
                         <Checkbox
-                          checked={isSourceColumnSelected(column.columnName)}
-                          onCheckedChange={() => toggleSourceDisplayColumn(column)}
+                          checked={isColumnAdded(column.columnName)}
+                          onCheckedChange={() => toggleInputColumn(column)}
                           className="pointer-events-none h-3.5 w-3.5"
                         />
-                        <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
+                        <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
                         <span className="truncate text-xs">{column.displayName}</span>
-                        <span className="text-[10px] text-primary/80 ml-auto">표시</span>
+                        <span className="text-muted-foreground/70 ml-auto text-[10px]">{column.inputType}</span>
                       </div>
                     ))}
                   </div>
                 )}
-            </>
-          )}
-
-            {/* 저장 테이블 컬럼 (입력용) */}
-            <div className="text-[10px] font-medium text-muted-foreground mt-3 mb-1 flex items-center gap-1">
-              <Database className="h-3 w-3" />
-              저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
-            </div>
-            {loadingColumns ? (
-              <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-            ) : inputableColumns.length === 0 ? (
-              <p className="text-muted-foreground py-2 text-xs">
-                컬럼 정보가 없습니다
-              </p>
-            ) : (
-              <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
-                {inputableColumns.map((column) => (
-                  <div
-                    key={`input-${column.columnName}`}
-                    className={cn(
-                      "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
-                      isColumnAdded(column.columnName) && "bg-primary/10",
-                    )}
-                    onClick={() => toggleInputColumn(column)}
-                  >
-                    <Checkbox
-                      checked={isColumnAdded(column.columnName)}
-                      onCheckedChange={() => toggleInputColumn(column)}
-                      className="pointer-events-none h-3.5 w-3.5"
-                    />
-                    <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-                    <span className="truncate text-xs">{column.displayName}</span>
-                    <span className="text-[10px] text-muted-foreground/70 ml-auto">{column.inputType}</span>
-                  </div>
-                ))}
               </div>
-            )}
-          </div>
 
-          {/* ===== 🆕 Entity 조인 컬럼 (표시용) ===== */}
-          <div className="space-y-2 mt-4">
-            <div className="flex items-center gap-2">
-              <Link2 className="h-4 w-4 text-primary" />
-              <Label className="text-xs font-medium text-primary">Entity 조인 컬럼 (읽기전용)</Label>
-            </div>
-            <p className="text-[10px] text-muted-foreground">
-              FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 조회하여 표시합니다.
-            </p>
-            
-            {loadingEntityJoins ? (
-              <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
-            ) : entityJoinData.joinTables.length === 0 ? (
-              <p className="text-muted-foreground py-2 text-xs">
-                {entityJoinTargetTable
-                  ? `${entityJoinTargetTable} 테이블에 Entity 조인 가능한 컬럼이 없습니다`
-                  : "저장 테이블을 먼저 설정해주세요"}
-              </p>
-            ) : (
-              <div className="space-y-3">
-                {entityJoinData.joinTables.map((joinTable, tableIndex) => {
-                  const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || "";
+              {/* ===== 🆕 Entity 조인 컬럼 (표시용) ===== */}
+              <div className="mt-4 space-y-2">
+                <div className="flex items-center gap-2">
+                  <Link2 className="text-primary h-4 w-4" />
+                  <Label className="text-primary text-xs font-medium">Entity 조인 컬럼 (읽기전용)</Label>
+                </div>
+                <p className="text-muted-foreground text-[10px]">
+                  FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 조회하여 표시합니다.
+                </p>
 
-                  return (
-                    <div key={tableIndex} className="space-y-1">
-                      <div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
-                        <Link2 className="h-3 w-3" />
-                        <span>{joinTable.tableName}</span>
-                        <span className="text-muted-foreground">({sourceColumn})</span>
-                      </div>
-                      <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
-                        {joinTable.availableColumns.map((column, colIndex) => {
-                          const isActive = isEntityJoinColumnActive(
-                            joinTable.tableName,
-                            sourceColumn,
-                            column.columnName,
-                          );
-                          const matchingCol = config.columns.find((c) => c.key === column.columnName && c.isJoinColumn);
-                          const displayField = matchingCol?.key || column.columnName;
+                {loadingEntityJoins ? (
+                  <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
+                ) : entityJoinData.joinTables.length === 0 ? (
+                  <p className="text-muted-foreground py-2 text-xs">
+                    {entityJoinTargetTable
+                      ? `${entityJoinTargetTable} 테이블에 Entity 조인 가능한 컬럼이 없습니다`
+                      : "저장 테이블을 먼저 설정해주세요"}
+                  </p>
+                ) : (
+                  <div className="space-y-3">
+                    {entityJoinData.joinTables.map((joinTable, tableIndex) => {
+                      const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || "";
 
-                          return (
-                            <div
-                              key={colIndex}
-                              className={cn(
-                                "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
-                                isActive && "bg-primary/10",
+                      return (
+                        <div key={tableIndex} className="space-y-1">
+                          <div className="text-primary mb-1 flex items-center gap-2 text-[10px] font-medium">
+                            <Link2 className="h-3 w-3" />
+                            <span>{joinTable.tableName}</span>
+                            <span className="text-muted-foreground">({sourceColumn})</span>
+                          </div>
+                          <div className="border-primary/20 bg-primary/10/30 max-h-40 space-y-0.5 overflow-y-auto rounded-md border p-2">
+                            {joinTable.availableColumns.map((column, colIndex) => {
+                              const isActive = isEntityJoinColumnActive(
+                                joinTable.tableName,
+                                sourceColumn,
+                                column.columnName,
+                              );
+                              const matchingCol = config.columns.find(
+                                (c) => c.key === column.columnName && c.isJoinColumn,
+                              );
+                              const displayField = matchingCol?.key || column.columnName;
+
+                              return (
+                                <div
+                                  key={colIndex}
+                                  className={cn(
+                                    "hover:bg-primary/10/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                                    isActive && "bg-primary/10",
+                                  )}
+                                  onClick={() =>
+                                    toggleEntityJoinColumn(
+                                      joinTable.tableName,
+                                      sourceColumn,
+                                      column.columnName,
+                                      column.columnLabel,
+                                      displayField,
+                                      column.inputType || column.dataType,
+                                    )
+                                  }
+                                >
+                                  <Checkbox checked={isActive} className="pointer-events-none h-3.5 w-3.5" />
+                                  <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
+                                  <span className="truncate text-xs">{column.columnLabel}</span>
+                                  <span className="text-primary/80 ml-auto text-[10px]">
+                                    {column.inputType || column.dataType}
+                                  </span>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* 선택된 컬럼 상세 설정 - Collapsible */}
+          {config.columns.length > 0 && (
+            <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+                >
+                  <div className="flex items-center gap-2">
+                    <GripVertical className="text-muted-foreground h-4 w-4" />
+                    <span className="text-sm font-medium">선택된 컬럼</span>
+                    <Badge variant="secondary" className="h-5 text-[10px]">
+                      {config.columns.length}개
+                    </Badge>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                      selectedColumnsOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="space-y-3 rounded-b-lg border border-t-0 p-3">
+                  <p className="text-muted-foreground text-[10px]">드래그로 순서 변경, 클릭하여 상세 설정</p>
+                  <div className="space-y-1">
+                    {config.columns.map((col, index) => (
+                      <div key={col.key} className="space-y-1">
+                        {/* 컬럼 헤더 (드래그 가능) */}
+                        <div
+                          className={cn(
+                            "flex items-center gap-2 rounded-md border p-2",
+                            col.isSourceDisplay || col.isJoinColumn
+                              ? "border-primary/20 bg-primary/10/50"
+                              : "border-border bg-muted/30",
+                            col.hidden && "opacity-50",
+                          )}
+                          draggable
+                          onDragStart={(e) => {
+                            e.dataTransfer.setData("columnIndex", String(index));
+                          }}
+                          onDragOver={(e) => e.preventDefault()}
+                          onDrop={(e) => {
+                            e.preventDefault();
+                            const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
+                            if (fromIndex !== index) {
+                              const newColumns = [...config.columns];
+                              const [movedCol] = newColumns.splice(fromIndex, 1);
+                              newColumns.splice(index, 0, movedCol);
+                              updateConfig({ columns: newColumns });
+                            }
+                          }}
+                        >
+                          <GripVertical className="text-muted-foreground h-3 w-3 flex-shrink-0 cursor-grab" />
+
+                          {/* 확장/축소 버튼 (입력 컬럼만) */}
+                          {!col.isSourceDisplay && !col.isJoinColumn && (
+                            <button
+                              type="button"
+                              onClick={() => setExpandedColumn(expandedColumn === col.key ? null : col.key)}
+                              className="hover:bg-muted/80 rounded p-0.5"
+                            >
+                              {expandedColumn === col.key ? (
+                                <ChevronDown className="text-muted-foreground h-3 w-3" />
+                              ) : (
+                                <ChevronRight className="text-muted-foreground h-3 w-3" />
                               )}
-                              onClick={() =>
-                                toggleEntityJoinColumn(
-                                  joinTable.tableName,
-                                  sourceColumn,
-                                  column.columnName,
-                                  column.columnLabel,
-                                  displayField,
-                                  column.inputType || column.dataType
-                                )
+                            </button>
+                          )}
+
+                          {col.isSourceDisplay ? (
+                            <Link2 className="text-primary h-3 w-3 flex-shrink-0" aria-label="소스 표시 (읽기 전용)" />
+                          ) : (
+                            <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                          )}
+
+                          <Input
+                            value={col.title}
+                            onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
+                            placeholder="제목"
+                            className="h-6 flex-1 text-xs"
+                          />
+
+                          {/* 히든 토글 (입력 컬럼만) */}
+                          {!col.isSourceDisplay && !col.isJoinColumn && (
+                            <button
+                              type="button"
+                              onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
+                              className={cn(
+                                "hover:bg-muted/80 rounded p-1",
+                                col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
+                              )}
+                              title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
+                            >
+                              {col.hidden ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
+                            </button>
+                          )}
+
+                          {/* 자동입력 표시 아이콘 */}
+                          {!col.isSourceDisplay &&
+                            !col.isJoinColumn &&
+                            col.autoFill?.type &&
+                            col.autoFill.type !== "none" && (
+                              <Wand2 className="h-3 w-3 flex-shrink-0 text-purple-500" aria-label="자동 입력" />
+                            )}
+
+                          {/* 편집 가능 토글 */}
+                          {!col.isSourceDisplay && !col.isJoinColumn && (
+                            <button
+                              type="button"
+                              onClick={() => updateColumnProp(col.key, "editable", !(col.editable ?? true))}
+                              className={cn(
+                                "shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium transition-colors",
+                                (col.editable ?? true)
+                                  ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                                  : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70",
+                              )}
+                              title={
+                                (col.editable ?? true)
+                                  ? "편집 가능 (클릭하여 읽기 전용으로 변경)"
+                                  : "읽기 전용 (클릭하여 편집 가능으로 변경)"
                               }
                             >
-                              <Checkbox
-                                checked={isActive}
-                                className="pointer-events-none h-3.5 w-3.5"
-                              />
-                              <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
-                              <span className="truncate text-xs">{column.columnLabel}</span>
-                              <span className="ml-auto text-[10px] text-primary/80">
-                                {column.inputType || column.dataType}
-                              </span>
+                              {(col.editable ?? true) ? "편집" : "읽기"}
+                            </button>
+                          )}
+
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              if (col.isSourceDisplay) {
+                                toggleSourceDisplayColumn({ columnName: col.key, displayName: col.title });
+                              } else if (col.isJoinColumn) {
+                                const newColumns = config.columns.filter((c) => c.key !== col.key);
+                                const newEntityJoins = config.entityJoins
+                                  ?.map((join) => ({
+                                    ...join,
+                                    columns: join.columns.filter((c) => c.displayField !== col.key),
+                                  }))
+                                  .filter((join) => join.columns.length > 0);
+                                updateConfig({ columns: newColumns, entityJoins: newEntityJoins });
+                              } else {
+                                toggleInputColumn({ columnName: col.key, displayName: col.title });
+                              }
+                            }}
+                            className="text-destructive h-6 w-6 p-0"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+
+                        {/* 확장된 상세 설정 (입력 컬럼만) */}
+                        {!col.isSourceDisplay && !col.isJoinColumn && expandedColumn === col.key && (
+                          <div className="border-input bg-muted ml-6 space-y-2 rounded-md border border-dashed p-2">
+                            {/* 자동 입력 설정 */}
+                            <div className="space-y-1">
+                              <Label className="text-muted-foreground text-[10px]">자동 입력</Label>
+                              <Select
+                                value={col.autoFill?.type || "none"}
+                                onValueChange={(value) => {
+                                  const autoFill = value === "none" ? undefined : { type: value as any };
+                                  updateColumnProp(col.key, "autoFill", autoFill);
+                                }}
+                              >
+                                <SelectTrigger className="h-7 text-xs">
+                                  <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {autoFillOptions.map((opt) => (
+                                    <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                                      {opt.label}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
                             </div>
-                          );
-                        })}
+
+                            {/* 채번 규칙 선택 */}
+                            {col.autoFill?.type === "numbering" && (
+                              <div className="space-y-2">
+                                {/* 대상 메뉴 선택 */}
+                                <div className="space-y-1">
+                                  <Label className="text-muted-foreground text-[10px]">
+                                    대상 메뉴 선택 <span className="text-destructive">*</span>
+                                  </Label>
+                                  <Select
+                                    value={selectedMenuObjid?.toString() || ""}
+                                    onValueChange={(value) => {
+                                      const menuObjidNum = parseInt(value);
+                                      setSelectedMenuObjid(menuObjidNum);
+
+                                      // 컬럼 설정에도 저장하여 유지
+                                      updateColumnProp(col.key, "autoFill", {
+                                        ...col.autoFill,
+                                        selectedMenuObjid: menuObjidNum,
+                                        numberingRuleId: undefined, // 메뉴 변경 시 규칙 초기화
+                                      });
+                                    }}
+                                    disabled={loadingMenus}
+                                  >
+                                    <SelectTrigger className="h-7 text-xs">
+                                      <SelectValue
+                                        placeholder={loadingMenus ? "메뉴 로딩 중..." : "채번규칙을 사용할 메뉴 선택"}
+                                      />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                      {parentMenus.length === 0 ? (
+                                        <SelectItem value="no-menus" disabled>
+                                          사용 가능한 메뉴가 없습니다
+                                        </SelectItem>
+                                      ) : (
+                                        parentMenus.map((menu) => (
+                                          <SelectItem key={menu.objid} value={menu.objid.toString()}>
+                                            {menu.menu_name_kor}
+                                          </SelectItem>
+                                        ))
+                                      )}
+                                    </SelectContent>
+                                  </Select>
+                                  <p className="text-muted-foreground text-[10px]">
+                                    이 입력 필드가 어느 메뉴에 속할지 선택하세요 (해당 메뉴의 채번규칙이 적용됩니다)
+                                  </p>
+                                </div>
+
+                                {/* 채번 규칙 선택 (메뉴 선택 후) */}
+                                {selectedMenuObjid ? (
+                                  <div className="space-y-1">
+                                    <Label className="text-muted-foreground text-[10px]">
+                                      채번 규칙 선택 <span className="text-destructive">*</span>
+                                    </Label>
+                                    {loadingNumberingRules ? (
+                                      <p className="text-muted-foreground/70 text-[10px]">규칙 로딩 중...</p>
+                                    ) : numberingRules.length === 0 ? (
+                                      <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
+                                        선택된 메뉴에 사용 가능한 채번 규칙이 없습니다
+                                      </div>
+                                    ) : (
+                                      <Select
+                                        value={col.autoFill?.numberingRuleId || ""}
+                                        onValueChange={(value) =>
+                                          updateColumnProp(col.key, "autoFill", {
+                                            ...col.autoFill,
+                                            selectedMenuObjid,
+                                            numberingRuleId: value,
+                                          })
+                                        }
+                                      >
+                                        <SelectTrigger className="h-7 text-xs">
+                                          <SelectValue placeholder="채번 규칙 선택" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                          {numberingRules.map((rule) => (
+                                            <SelectItem key={rule.ruleId} value={rule.ruleId} className="text-xs">
+                                              {rule.ruleName}
+                                              {rule.description && (
+                                                <span className="text-muted-foreground ml-2">- {rule.description}</span>
+                                              )}
+                                            </SelectItem>
+                                          ))}
+                                        </SelectContent>
+                                      </Select>
+                                    )}
+                                    {col.autoFill?.numberingRuleId && (
+                                      <p className="text-[10px] text-emerald-600">
+                                        저장 시 채번 API를 통해 자동 생성됩니다.
+                                      </p>
+                                    )}
+                                  </div>
+                                ) : (
+                                  <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
+                                    먼저 대상 메뉴를 선택하세요
+                                  </div>
+                                )}
+                              </div>
+                            )}
+
+                            {/* 메인 폼에서 복사 설정 */}
+                            {col.autoFill?.type === "fromMainForm" && (
+                              <div className="space-y-1">
+                                <Label className="text-muted-foreground text-[10px]">복사할 필드명</Label>
+                                <Input
+                                  value={col.autoFill?.sourceField || ""}
+                                  onChange={(e) =>
+                                    updateColumnProp(col.key, "autoFill", {
+                                      ...col.autoFill,
+                                      sourceField: e.target.value,
+                                    })
+                                  }
+                                  placeholder="order_no"
+                                  className="h-6 text-xs"
+                                />
+                              </div>
+                            )}
+
+                            {/* 고정값 설정 */}
+                            {col.autoFill?.type === "fixed" && (
+                              <div className="space-y-1">
+                                <Label className="text-muted-foreground text-[10px]">고정값</Label>
+                                <Input
+                                  value={String(col.autoFill?.fixedValue || "")}
+                                  onChange={(e) =>
+                                    updateColumnProp(col.key, "autoFill", {
+                                      ...col.autoFill,
+                                      fixedValue: e.target.value,
+                                    })
+                                  }
+                                  placeholder="고정값 입력"
+                                  className="h-6 text-xs"
+                                />
+                              </div>
+                            )}
+
+                            {/* 부모채번+순번 설정 */}
+                            {col.autoFill?.type === "parentSequence" && (
+                              <div className="space-y-2">
+                                <div className="space-y-1">
+                                  <Label className="text-muted-foreground text-[10px]">부모 번호 필드명</Label>
+                                  <Input
+                                    value={col.autoFill?.parentField || ""}
+                                    onChange={(e) =>
+                                      updateColumnProp(col.key, "autoFill", {
+                                        ...col.autoFill,
+                                        parentField: e.target.value,
+                                      })
+                                    }
+                                    placeholder="work_order_no"
+                                    className="h-6 text-xs"
+                                  />
+                                  <p className="text-muted-foreground/70 text-[10px]">
+                                    메인 폼에서 가져올 부모 채번 필드
+                                  </p>
+                                </div>
+                                <div className="flex gap-2">
+                                  <div className="flex-1 space-y-1">
+                                    <Label className="text-muted-foreground text-[10px]">구분자</Label>
+                                    <Input
+                                      value={col.autoFill?.separator ?? "-"}
+                                      onChange={(e) =>
+                                        updateColumnProp(col.key, "autoFill", {
+                                          ...col.autoFill,
+                                          separator: e.target.value,
+                                        })
+                                      }
+                                      placeholder="-"
+                                      className="h-6 text-xs"
+                                    />
+                                  </div>
+                                  <div className="flex-1 space-y-1">
+                                    <Label className="text-muted-foreground text-[10px]">순번 자릿수</Label>
+                                    <Input
+                                      type="number"
+                                      min={1}
+                                      max={5}
+                                      value={col.autoFill?.sequenceLength ?? 2}
+                                      onChange={(e) =>
+                                        updateColumnProp(col.key, "autoFill", {
+                                          ...col.autoFill,
+                                          sequenceLength: parseInt(e.target.value) || 2,
+                                        })
+                                      }
+                                      className="h-6 text-xs"
+                                    />
+                                  </div>
+                                </div>
+                                <p className="text-[10px] text-emerald-600">
+                                  예시: WO-20260223-005{col.autoFill?.separator ?? "-"}
+                                  {String(1).padStart(col.autoFill?.sequenceLength ?? 2, "0")}
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        )}
                       </div>
-                    </div>
+                    ))}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+
+          {/* 계산 규칙 - Collapsible (기본 닫힘) */}
+          {(isModalMode || isInlineMode) && config.columns.length > 0 && (
+            <Collapsible open={calcRulesOpen} onOpenChange={setCalcRulesOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-lg border px-4 py-2.5 text-left transition-colors"
+                >
+                  <div className="flex items-center gap-2">
+                    <Calculator className="text-muted-foreground h-4 w-4" />
+                    <span className="text-sm font-medium">계산 규칙</span>
+                    <Badge variant="secondary" className="h-5 text-[10px]">
+                      {calculationRules.length}개
+                    </Badge>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "text-muted-foreground h-4 w-4 transition-transform duration-200",
+                      calcRulesOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="space-y-3 rounded-b-lg border border-t-0 p-3">
+                  <div className="flex justify-end">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={addCalculationRule}
+                      className="h-7 px-2 text-xs"
+                    >
+                      <Plus className="mr-1 h-3 w-3" />
+                      추가
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    {calculationRules.map((rule) => (
+                      <div key={rule.id} className="space-y-1 rounded border p-1.5">
+                        <div className="flex items-center gap-1">
+                          <Select
+                            value={rule.targetColumn}
+                            onValueChange={(value) => updateCalculationRule(rule.id, "targetColumn", value)}
+                          >
+                            <SelectTrigger className="h-6 w-20 text-[10px]">
+                              <SelectValue placeholder="결과" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {config.columns
+                                .filter((col) => !col.isSourceDisplay)
+                                .map((col) => (
+                                  <SelectItem key={col.key} value={col.key} className="text-xs">
+                                    {col.title || col.key}
+                                  </SelectItem>
+                                ))}
+                            </SelectContent>
+                          </Select>
+                          <span className="text-[10px]">=</span>
+                          <Input
+                            value={rule.formula}
+                            onChange={(e) => updateCalculationRule(rule.id, "formula", e.target.value)}
+                            placeholder="컬럼 클릭 또는 직접 입력"
+                            className="h-6 flex-1 font-mono text-[10px]"
+                          />
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => removeCalculationRule(rule.id)}
+                            className="text-destructive h-6 w-6 p-0"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </div>
+
+                        {/* 한글 수식 미리보기 */}
+                        {rule.formula && (
+                          <p className="bg-muted/50 text-muted-foreground truncate rounded px-1.5 py-0.5 text-[10px]">
+                            {config.columns.find((c) => c.key === rule.targetColumn)?.title ||
+                              rule.targetColumn ||
+                              "결과"}{" "}
+                            = {formulaToKorean(rule.formula)}
+                          </p>
+                        )}
+
+                        {/* 컬럼 칩: 디테일 컬럼 + 소스(품목) 컬럼 + 연산자 */}
+                        <div className="flex flex-wrap gap-0.5">
+                          {config.columns
+                            .filter((col) => col.key !== rule.targetColumn && !col.isSourceDisplay)
+                            .map((col) => (
+                              <Button
+                                key={col.key}
+                                type="button"
+                                variant="secondary"
+                                size="sm"
+                                onClick={() => insertColumnToFormula(rule.id, col.key)}
+                                className="h-4 px-1 text-[9px]"
+                              >
+                                {col.title || col.key}
+                              </Button>
+                            ))}
+                          {config.columns
+                            .filter((col) => col.isSourceDisplay)
+                            .map((col) => (
+                              <Button
+                                key={col.key}
+                                type="button"
+                                variant="outline"
+                                size="sm"
+                                onClick={() => insertColumnToFormula(rule.id, col.key)}
+                                className="text-primary h-4 border-dashed px-1 text-[9px]"
+                                title="품목 정보 컬럼"
+                              >
+                                {col.title || col.key}
+                              </Button>
+                            ))}
+                          {["+", "-", "*", "/", "(", ")"].map((op) => (
+                            <Button
+                              key={op}
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={() => insertColumnToFormula(rule.id, op)}
+                              className="h-4 w-4 p-0 font-mono text-[9px]"
+                            >
+                              {op}
+                            </Button>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+
+                    {calculationRules.length === 0 && (
+                      <div className="text-muted-foreground py-4 text-center">
+                        <Calculator className="mx-auto mb-2 h-6 w-6 opacity-30" />
+                        <p className="text-xs">아직 계산 규칙이 없어요</p>
+                        <p className="mt-0.5 text-[10px]">위의 추가 버튼으로 수식을 만들어보세요</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+        </TabsContent>
+
+        {/* Entity 조인 설정 탭 */}
+        <TabsContent value="entityJoin" className="mt-4 space-y-4">
+          <div className="bg-muted/30 space-y-3 rounded-lg border p-4">
+            <div className="flex items-center gap-2">
+              <Link2 className="text-primary h-4 w-4" />
+              <span className="text-sm font-medium">연결된 테이블 데이터 표시</span>
+            </div>
+            <p className="text-muted-foreground text-[11px]">
+              FK 컬럼을 기반으로 참조 테이블의 데이터를 자동으로 가져와서 표시해요
+            </p>
+
+            {loadingEntityJoins ? (
+              <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                <div className="border-primary h-3 w-3 animate-spin rounded-full border-2 border-t-transparent" />
+                조인 가능한 컬럼을 찾고 있어요...
+              </div>
+            ) : entityJoinData.joinTables.length === 0 ? (
+              <div className="rounded-md border-2 border-dashed p-4 text-center">
+                <Link2 className="text-muted-foreground mx-auto mb-2 h-8 w-8 opacity-30" />
+                <p className="text-muted-foreground text-sm">
+                  {entityJoinTargetTable ? "조인 가능한 컬럼이 없어요" : "저장 테이블을 먼저 설정해주세요"}
+                </p>
+                {entityJoinTargetTable && (
+                  <p className="text-muted-foreground mt-0.5 text-xs">
+                    테이블 타입 관리에서 엔티티 관계를 설정해보세요
+                  </p>
+                )}
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {entityJoinData.joinTables.map((joinTable, tableIndex) => {
+                  const sourceColumn = (joinTable as any).joinConfig?.sourceColumn || "";
+                  const activeCount = joinTable.availableColumns.filter((col) =>
+                    isEntityJoinColumnActive(joinTable.tableName, sourceColumn, col.columnName),
+                  ).length;
+                  const isSubOpen = entityJoinSubOpen[tableIndex] ?? false;
+
+                  return (
+                    <Collapsible
+                      key={tableIndex}
+                      open={isSubOpen}
+                      onOpenChange={(open) => setEntityJoinSubOpen((prev) => ({ ...prev, [tableIndex]: open }))}
+                    >
+                      <CollapsibleTrigger asChild>
+                        <button
+                          type="button"
+                          className="border-primary/20 bg-primary/5 hover:bg-primary/10 flex w-full items-center justify-between rounded-md border px-3 py-2 text-left transition-colors"
+                        >
+                          <div className="flex items-center gap-2">
+                            <Link2 className="text-primary h-3 w-3" />
+                            <span className="truncate text-xs font-medium">{joinTable.tableName}</span>
+                            <Badge variant="secondary" className="h-5 text-[10px]">
+                              {activeCount > 0
+                                ? `${activeCount}/${joinTable.availableColumns.length}개 선택`
+                                : `${joinTable.availableColumns.length}개 컬럼`}
+                            </Badge>
+                          </div>
+                          <ChevronDown
+                            className={cn(
+                              "text-muted-foreground h-3 w-3 transition-transform duration-200",
+                              isSubOpen && "rotate-180",
+                            )}
+                          />
+                        </button>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <div className="border-primary/20 bg-primary/5 space-y-0.5 rounded-b-md border border-t-0 p-2">
+                          {joinTable.availableColumns.map((column, colIndex) => {
+                            const isActive = isEntityJoinColumnActive(
+                              joinTable.tableName,
+                              sourceColumn,
+                              column.columnName,
+                            );
+                            const matchingCol = config.columns.find((c) => c.key === column.columnName);
+                            const displayField = matchingCol?.key || column.columnName;
+
+                            return (
+                              <div
+                                key={colIndex}
+                                className={cn(
+                                  "hover:bg-primary/10 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                                  isActive && "bg-primary/10",
+                                )}
+                                onClick={() =>
+                                  toggleEntityJoinColumn(
+                                    joinTable.tableName,
+                                    sourceColumn,
+                                    column.columnName,
+                                    column.columnLabel,
+                                    displayField,
+                                  )
+                                }
+                              >
+                                <Checkbox checked={isActive} className="pointer-events-none h-3.5 w-3.5" />
+                                <Link2 className="text-primary h-3 w-3 flex-shrink-0" />
+                                <span className="truncate text-xs">{column.columnLabel}</span>
+                                <span className="text-primary/80 ml-auto text-[10px]">
+                                  {column.inputType || column.dataType}
+                                </span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </CollapsibleContent>
+                    </Collapsible>
                   );
                 })}
               </div>
             )}
-          </div>
 
-          {/* 선택된 컬럼 상세 설정 - 🆕 모든 컬럼 통합, 순서 변경 가능 */}
-          {config.columns.length > 0 && (
-            <>
-              <Separator />
-              <div className="space-y-2">
-                <Label className="text-xs font-medium">
-                  선택된 컬럼 ({config.columns.length}개)
-                  <span className="text-muted-foreground ml-2 font-normal">드래그로 순서 변경</span>
-                </Label>
-                <div className="max-h-48 space-y-1 overflow-y-auto">
-                  {config.columns.map((col, index) => (
-                    <div key={col.key} className="space-y-1">
-                      {/* 컬럼 헤더 (드래그 가능) */}
-                      <div
-                        className={cn(
-                          "flex items-center gap-2 rounded-md border p-2",
-                          (col.isSourceDisplay || col.isJoinColumn) ? "border-primary/20 bg-primary/10/50" : "border-border bg-muted/30",
-                          col.hidden && "opacity-50",
-                        )}
-                        draggable
-                        onDragStart={(e) => {
-                          e.dataTransfer.setData("columnIndex", String(index));
-                        }}
-                        onDragOver={(e) => e.preventDefault()}
-                        onDrop={(e) => {
-                          e.preventDefault();
-                          const fromIndex = parseInt(e.dataTransfer.getData("columnIndex"), 10);
-                          if (fromIndex !== index) {
-                            const newColumns = [...config.columns];
-                            const [movedCol] = newColumns.splice(fromIndex, 1);
-                            newColumns.splice(index, 0, movedCol);
-                            updateConfig({ columns: newColumns });
-                          }
-                        }}
-                      >
-                        <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab flex-shrink-0" />
-                        
-                        {/* 확장/축소 버튼 (입력 컬럼만) */}
-                        {(!col.isSourceDisplay && !col.isJoinColumn) && (
-                          <button
-                            type="button"
-                            onClick={() => setExpandedColumn(expandedColumn === col.key ? null : col.key)}
-                            className="p-0.5 hover:bg-muted/80 rounded"
-                          >
-                            {expandedColumn === col.key ? (
-                              <ChevronDown className="h-3 w-3 text-muted-foreground" />
-                            ) : (
-                              <ChevronRight className="h-3 w-3 text-muted-foreground" />
-                            )}
-                          </button>
-                        )}
-                        
-                        {col.isSourceDisplay ? (
-                          <Link2 className="text-primary h-3 w-3 flex-shrink-0" title="소스 표시 (읽기 전용)" />
-                        ) : col.isJoinColumn ? (
-                          <Link2 className="text-amber-500 h-3 w-3 flex-shrink-0" title="Entity 조인 (읽기 전용)" />
-                        ) : (
-                          <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
-                        )}
-                        
-                      <Input
-                        value={col.title}
-                        onChange={(e) => updateColumnProp(col.key, "title", e.target.value)}
-                        placeholder="제목"
-                        className="h-6 flex-1 text-xs"
-                      />
-                        
-                        {/* 히든 토글 (입력 컬럼만) */}
-                        {(!col.isSourceDisplay && !col.isJoinColumn) && (
-                          <button
-                            type="button"
-                            onClick={() => updateColumnProp(col.key, "hidden", !col.hidden)}
-                            className={cn(
-                              "p-1 rounded hover:bg-muted/80",
-                              col.hidden ? "text-muted-foreground/70" : "text-muted-foreground",
-                            )}
-                            title={col.hidden ? "히든 (저장만 됨)" : "표시됨"}
-                      >
-                            {col.hidden ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
-                          </button>
-                        )}
-                        
-                        {/* 자동입력 표시 아이콘 */}
-                        {(!col.isSourceDisplay && !col.isJoinColumn) && col.autoFill?.type && col.autoFill.type !== "none" && (
-                          <Wand2 className="h-3 w-3 text-purple-500 flex-shrink-0" title="자동 입력" />
-                        )}
-                        
-                        {/* 편집 가능 토글 */}
-                        {(!col.isSourceDisplay && !col.isJoinColumn) && (
-                          <button
-                            type="button"
-                            onClick={() => updateColumnProp(col.key, "editable", !(col.editable ?? true))}
-                            className={cn(
-                              "shrink-0 rounded px-1.5 py-0.5 text-[9px] font-medium transition-colors",
-                              (col.editable ?? true)
-                                ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
-                                : "bg-muted text-muted-foreground dark:bg-foreground/90 dark:text-muted-foreground/70"
-                            )}
-                            title={(col.editable ?? true) ? "편집 가능 (클릭하여 읽기 전용으로 변경)" : "읽기 전용 (클릭하여 편집 가능으로 변경)"}
-                          >
-                            {(col.editable ?? true) ? "편집" : "읽기"}
-                          </button>
-                        )}
-                        
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                          onClick={() => {
-                            if (col.isSourceDisplay) {
-                              toggleSourceDisplayColumn({ columnName: col.key, displayName: col.title });
-                            } else if (col.isJoinColumn) {
-                              const newColumns = config.columns.filter(c => c.key !== col.key);
-                              const newEntityJoins = config.entityJoins?.map(join => ({
-                                ...join,
-                                columns: join.columns.filter(c => c.displayField !== col.key)
-                              })).filter(join => join.columns.length > 0);
-                              updateConfig({ columns: newColumns, entityJoins: newEntityJoins });
-                            } else {
-                              toggleInputColumn({ columnName: col.key, displayName: col.title });
-                            }
-                          }}
-                        className="text-destructive h-6 w-6 p-0"
-                      >
-                        <Trash2 className="h-3 w-3" />
-                      </Button>
+            {/* 현재 설정된 Entity 조인 목록 - Collapsible */}
+            {config.entityJoins && config.entityJoins.length > 0 && (
+              <Collapsible open={configuredJoinsOpen} onOpenChange={setConfiguredJoinsOpen}>
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="bg-muted/30 hover:bg-muted/50 flex w-full items-center justify-between rounded-md border px-3 py-2 text-left transition-colors"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Database className="text-muted-foreground h-3.5 w-3.5" />
+                      <span className="text-xs font-medium">설정된 조인</span>
+                      <Badge variant="secondary" className="h-5 text-[10px]">
+                        {config.entityJoins.length}개
+                      </Badge>
                     </div>
-                      
-                      {/* 확장된 상세 설정 (입력 컬럼만) */}
-                      {(!col.isSourceDisplay && !col.isJoinColumn) && expandedColumn === col.key && (
-                        <div className="ml-6 space-y-2 rounded-md border border-dashed border-input bg-muted p-2">
-                          {/* 자동 입력 설정 */}
-                          <div className="space-y-1">
-                            <Label className="text-[10px] text-muted-foreground">자동 입력</Label>
-                            <Select
-                              value={col.autoFill?.type || "none"}
-                              onValueChange={(value) => {
-                                const autoFill = value === "none" ? undefined : { type: value as any };
-                                updateColumnProp(col.key, "autoFill", autoFill);
-                              }}
-                            >
-                              <SelectTrigger className="h-7 text-xs">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {autoFillOptions.map((opt) => (
-                                  <SelectItem key={opt.value} value={opt.value} className="text-xs">
-                                    {opt.label}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </div>
-                          
-                                          {/* 채번 규칙 선택 */}
-                                          {col.autoFill?.type === "numbering" && (
-                                            <div className="space-y-2">
-                                              {/* 대상 메뉴 선택 */}
-                                              <div className="space-y-1">
-                                                <Label className="text-[10px] text-muted-foreground">
-                                                  대상 메뉴 선택 <span className="text-destructive">*</span>
-                                                </Label>
-                                                <Select
-                                                  value={selectedMenuObjid?.toString() || ""}
-                                                  onValueChange={(value) => {
-                                                    const menuObjidNum = parseInt(value);
-                                                    setSelectedMenuObjid(menuObjidNum);
-                                                    
-                                                    // 컬럼 설정에도 저장하여 유지
-                                                    updateColumnProp(col.key, "autoFill", {
-                                                      ...col.autoFill,
-                                                      selectedMenuObjid: menuObjidNum,
-                                                      numberingRuleId: undefined, // 메뉴 변경 시 규칙 초기화
-                                                    });
-                                                  }}
-                                                  disabled={loadingMenus}
-                                                >
-                                                  <SelectTrigger className="h-7 text-xs">
-                                                    <SelectValue placeholder={loadingMenus ? "메뉴 로딩 중..." : "채번규칙을 사용할 메뉴 선택"} />
-                                                  </SelectTrigger>
-                                                  <SelectContent>
-                                                    {parentMenus.length === 0 ? (
-                                                      <SelectItem value="no-menus" disabled>
-                                                        사용 가능한 메뉴가 없습니다
-                                                      </SelectItem>
-                                                    ) : (
-                                                      parentMenus.map((menu) => (
-                                                        <SelectItem key={menu.objid} value={menu.objid.toString()}>
-                                                          {menu.menu_name_kor}
-                                                        </SelectItem>
-                                                      ))
-                                                    )}
-                                                  </SelectContent>
-                                                </Select>
-                                                <p className="text-[10px] text-muted-foreground">
-                                                  이 입력 필드가 어느 메뉴에 속할지 선택하세요 (해당 메뉴의 채번규칙이 적용됩니다)
-                                                </p>
-                                              </div>
-                                              
-                                              {/* 채번 규칙 선택 (메뉴 선택 후) */}
-                                              {selectedMenuObjid ? (
-                                                <div className="space-y-1">
-                                                  <Label className="text-[10px] text-muted-foreground">
-                                                    채번 규칙 선택 <span className="text-destructive">*</span>
-                                                  </Label>
-                                                  {loadingNumberingRules ? (
-                                                    <p className="text-[10px] text-muted-foreground/70">규칙 로딩 중...</p>
-                                                  ) : numberingRules.length === 0 ? (
-                                                    <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
-                                                      선택된 메뉴에 사용 가능한 채번 규칙이 없습니다
-                                                    </div>
-                                                  ) : (
-                                                    <Select
-                                                      value={col.autoFill?.numberingRuleId || ""}
-                                                      onValueChange={(value) => updateColumnProp(col.key, "autoFill", {
-                                                        ...col.autoFill,
-                                                        selectedMenuObjid,
-                                                        numberingRuleId: value,
-                                                      })}
-                                                    >
-                                                      <SelectTrigger className="h-7 text-xs">
-                                                        <SelectValue placeholder="채번 규칙 선택" />
-                                                      </SelectTrigger>
-                                                      <SelectContent>
-                                                        {numberingRules.map((rule) => (
-                                                          <SelectItem key={rule.ruleId} value={rule.ruleId} className="text-xs">
-                                                            {rule.ruleName}
-                                                            {rule.description && (
-                                                              <span className="text-muted-foreground ml-2">
-                                                                - {rule.description}
-                                                              </span>
-                                                            )}
-                                                          </SelectItem>
-                                                        ))}
-                                                      </SelectContent>
-                                                    </Select>
-                                                  )}
-                                                  {col.autoFill?.numberingRuleId && (
-                                                    <p className="text-[10px] text-emerald-600">
-                                                      저장 시 채번 API를 통해 자동 생성됩니다.
-                                                    </p>
-                                                  )}
-                                                </div>
-                                              ) : (
-                                                <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
-                                                  먼저 대상 메뉴를 선택하세요
-                                                </div>
-                                              )}
-                                            </div>
-                                          )}
-                          
-                          {/* 메인 폼에서 복사 설정 */}
-                          {col.autoFill?.type === "fromMainForm" && (
-                            <div className="space-y-1">
-                              <Label className="text-[10px] text-muted-foreground">복사할 필드명</Label>
-                              <Input
-                                value={col.autoFill?.sourceField || ""}
-                                onChange={(e) => updateColumnProp(col.key, "autoFill", {
-                                  ...col.autoFill,
-                                  sourceField: e.target.value,
-                                })}
-                                placeholder="order_no"
-                                className="h-6 text-xs"
-                              />
-                            </div>
-                          )}
-                          
-                          {/* 고정값 설정 */}
-                          {col.autoFill?.type === "fixed" && (
-                            <div className="space-y-1">
-                              <Label className="text-[10px] text-muted-foreground">고정값</Label>
-                              <Input
-                                value={String(col.autoFill?.fixedValue || "")}
-                                onChange={(e) => updateColumnProp(col.key, "autoFill", {
-                                  ...col.autoFill,
-                                  fixedValue: e.target.value,
-                                })}
-                                placeholder="고정값 입력"
-                                className="h-6 text-xs"
-                              />
-                            </div>
-                          )}
-                          
-                          {/* 부모채번+순번 설정 */}
-                          {col.autoFill?.type === "parentSequence" && (
-                            <div className="space-y-2">
-                              <div className="space-y-1">
-                                <Label className="text-[10px] text-muted-foreground">부모 번호 필드명</Label>
-                                <Input
-                                  value={col.autoFill?.parentField || ""}
-                                  onChange={(e) => updateColumnProp(col.key, "autoFill", {
-                                    ...col.autoFill,
-                                    parentField: e.target.value,
-                                  })}
-                                  placeholder="work_order_no"
-                                  className="h-6 text-xs"
-                                />
-                                <p className="text-[10px] text-muted-foreground/70">메인 폼에서 가져올 부모 채번 필드</p>
-                              </div>
-                              <div className="flex gap-2">
-                                <div className="flex-1 space-y-1">
-                                  <Label className="text-[10px] text-muted-foreground">구분자</Label>
-                                  <Input
-                                    value={col.autoFill?.separator ?? "-"}
-                                    onChange={(e) => updateColumnProp(col.key, "autoFill", {
-                                      ...col.autoFill,
-                                      separator: e.target.value,
-                                    })}
-                                    placeholder="-"
-                                    className="h-6 text-xs"
-                                  />
-                                </div>
-                                <div className="flex-1 space-y-1">
-                                  <Label className="text-[10px] text-muted-foreground">순번 자릿수</Label>
-                                  <Input
-                                    type="number"
-                                    min={1}
-                                    max={5}
-                                    value={col.autoFill?.sequenceLength ?? 2}
-                                    onChange={(e) => updateColumnProp(col.key, "autoFill", {
-                                      ...col.autoFill,
-                                      sequenceLength: parseInt(e.target.value) || 2,
-                                    })}
-                                    className="h-6 text-xs"
-                                  />
-                                </div>
-                              </div>
-                              <p className="text-[10px] text-emerald-600">
-                                예시: WO-20260223-005{col.autoFill?.separator ?? "-"}{String(1).padStart(col.autoFill?.sequenceLength ?? 2, "0")}
-                              </p>
-                            </div>
-                          )}
-                        </div>
+                    <ChevronDown
+                      className={cn(
+                        "text-muted-foreground h-3 w-3 transition-transform duration-200",
+                        configuredJoinsOpen && "rotate-180",
                       )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </>
-          )}
-
-          {/* 계산 규칙 */}
-          {(isModalMode || isInlineMode) && config.columns.length > 0 && (
-            <>
-              <Separator />
-              <div className="space-y-1">
-                <div className="flex items-center justify-between">
-                  <Label className="text-xs font-medium">계산 규칙</Label>
-                  <Button type="button" variant="outline" size="sm" onClick={addCalculationRule} className="h-6 text-xs">
-                    <Calculator className="mr-1 h-3 w-3" />
-                    추가
-                  </Button>
-                </div>
-                
-                <div className="space-y-2">
-                  {calculationRules.map((rule) => (
-                    <div key={rule.id} className="space-y-1 rounded border p-1.5">
-                      <div className="flex items-center gap-1">
-                        <Select
-                          value={rule.targetColumn}
-                          onValueChange={(value) => updateCalculationRule(rule.id, "targetColumn", value)}
-                        >
-                          <SelectTrigger className="h-6 w-20 text-[10px]">
-                            <SelectValue placeholder="결과" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            {config.columns.filter(col => !col.isSourceDisplay).map((col) => (
-                              <SelectItem key={col.key} value={col.key} className="text-xs">
-                                {col.title || col.key}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <span className="text-[10px]">=</span>
-                        <Input
-                          value={rule.formula}
-                          onChange={(e) => updateCalculationRule(rule.id, "formula", e.target.value)}
-                          placeholder="컬럼 클릭 또는 직접 입력"
-                          className="h-6 flex-1 font-mono text-[10px]"
-                        />
+                    />
+                  </button>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="space-y-1 rounded-b-md border border-t-0 p-2">
+                    {config.entityJoins.map((join, idx) => (
+                      <div
+                        key={idx}
+                        className="bg-muted/30 flex items-center gap-1 rounded border px-2 py-1 text-[10px]"
+                      >
+                        <Database className="text-primary h-3 w-3 flex-shrink-0" />
+                        <span className="truncate font-medium">{join.sourceColumn}</span>
+                        <ArrowRight className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                        <span className="truncate">{join.referenceTable}</span>
+                        <span className="text-muted-foreground truncate">
+                          ({join.columns.map((c) => c.referenceField).join(", ")})
+                        </span>
                         <Button
                           type="button"
                           variant="ghost"
                           size="sm"
-                          onClick={() => removeCalculationRule(rule.id)}
-                          className="h-6 w-6 p-0 text-destructive"
+                          onClick={() => {
+                            updateConfig({
+                              entityJoins: config.entityJoins!.filter((_, i) => i !== idx),
+                            });
+                          }}
+                          className="text-destructive ml-auto h-4 w-4 flex-shrink-0 p-0"
                         >
                           <Trash2 className="h-3 w-3" />
                         </Button>
                       </div>
-
-                      {/* 한글 수식 미리보기 */}
-                      {rule.formula && (
-                        <p className="truncate rounded bg-muted/50 px-1.5 py-0.5 text-[10px] text-muted-foreground">
-                          {config.columns.find(c => c.key === rule.targetColumn)?.title || rule.targetColumn || "결과"} = {formulaToKorean(rule.formula)}
-                        </p>
-                      )}
-
-                      {/* 컬럼 칩: 디테일 컬럼 + 소스(품목) 컬럼 + 연산자 */}
-                      <div className="flex flex-wrap gap-0.5">
-                        {config.columns
-                          .filter(col => col.key !== rule.targetColumn && !col.isSourceDisplay)
-                          .map((col) => (
-                          <Button
-                            key={col.key}
-                            type="button"
-                            variant="secondary"
-                            size="sm"
-                            onClick={() => insertColumnToFormula(rule.id, col.key)}
-                            className="h-4 px-1 text-[9px]"
-                          >
-                            {col.title || col.key}
-                          </Button>
-                        ))}
-                        {config.columns
-                          .filter(col => col.isSourceDisplay)
-                          .map((col) => (
-                          <Button
-                            key={col.key}
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => insertColumnToFormula(rule.id, col.key)}
-                            className="h-4 border-dashed px-1 text-[9px] text-primary"
-                            title="품목 정보 컬럼"
-                          >
-                            {col.title || col.key}
-                          </Button>
-                        ))}
-                        {["+", "-", "*", "/", "(", ")"].map((op) => (
-                          <Button
-                            key={op}
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => insertColumnToFormula(rule.id, op)}
-                            className="h-4 w-4 p-0 font-mono text-[9px]"
-                          >
-                            {op}
-                          </Button>
-                        ))}
-                      </div>
-                    </div>
-                  ))}
-                  
-                  {calculationRules.length === 0 && (
-                    <p className="text-muted-foreground py-1 text-center text-[10px]">
-                      계산 규칙이 없습니다
-                    </p>
-                  )}
-                </div>
-              </div>
-            </>
-          )}
+                    ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+          </div>
         </TabsContent>
-
       </Tabs>
     </div>
   );
diff --git a/frontend/components/v2/config-panels/V2SectionCardConfigPanel.tsx b/frontend/components/v2/config-panels/V2SectionCardConfigPanel.tsx
new file mode 100644
index 00000000..89fc3189
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2SectionCardConfigPanel.tsx
@@ -0,0 +1,277 @@
+"use client";
+
+/**
+ * V2SectionCard 설정 패널
+ * 토스식 단계별 UX: 패딩 카드 선택 -> 배경/테두리 설정 -> 고급 설정(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Settings,
+  ChevronDown,
+  Square,
+  Minus,
+  SquareDashed,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 내부 여백 카드 정의 ───
+const PADDING_CARDS = [
+  { value: "none", label: "없음", size: "0px" },
+  { value: "sm", label: "작게", size: "12px" },
+  { value: "md", label: "중간", size: "24px" },
+  { value: "lg", label: "크게", size: "32px" },
+] as const;
+
+// ─── 배경색 카드 정의 ───
+const BG_CARDS = [
+  { value: "default", label: "카드", description: "기본 카드 배경" },
+  { value: "muted", label: "회색", description: "연한 회색 배경" },
+  { value: "transparent", label: "투명", description: "배경 없음" },
+] as const;
+
+// ─── 테두리 스타일 카드 정의 ───
+const BORDER_CARDS = [
+  { value: "solid", label: "실선", icon: Minus },
+  { value: "dashed", label: "점선", icon: SquareDashed },
+  { value: "none", label: "없음", icon: Square },
+] as const;
+
+interface V2SectionCardConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+}
+
+export const V2SectionCardConfigPanel: React.FC<
+  V2SectionCardConfigPanelProps
+> = ({ config, onChange }) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: string, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 헤더 설정 ─── */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium">헤더 표시</p>
+            <p className="text-[11px] text-muted-foreground">
+              섹션 상단에 제목과 설명을 표시해요
+            </p>
+          </div>
+          <Switch
+            checked={config.showHeader !== false}
+            onCheckedChange={(checked) => updateConfig("showHeader", checked)}
+          />
+        </div>
+
+        {config.showHeader !== false && (
+          <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">제목</span>
+              <Input
+                value={config.title || ""}
+                onChange={(e) => updateConfig("title", e.target.value)}
+                placeholder="섹션 제목 입력"
+                className="h-7 w-[180px] text-xs"
+              />
+            </div>
+            <div>
+              <span className="text-xs text-muted-foreground">설명 (선택)</span>
+              <Textarea
+                value={config.description || ""}
+                onChange={(e) => updateConfig("description", e.target.value)}
+                placeholder="섹션에 대한 간단한 설명"
+                className="mt-1.5 text-xs resize-none"
+                rows={2}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ─── 2단계: 내부 여백 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">내부 여백</p>
+        <div className="grid grid-cols-4 gap-2">
+          {PADDING_CARDS.map((card) => {
+            const isSelected = (config.padding || "md") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("padding", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span className="text-xs font-medium">{card.label}</span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.size}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 3단계: 외관 설정 ─── */}
+      <div className="space-y-3">
+        <p className="text-sm font-medium">외관</p>
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          {/* 배경색 */}
+          <div>
+            <span className="text-xs text-muted-foreground">배경색</span>
+            <div className="mt-1.5 grid grid-cols-3 gap-2">
+              {BG_CARDS.map((card) => {
+                const isSelected =
+                  (config.backgroundColor || "default") === card.value;
+                return (
+                  <button
+                    key={card.value}
+                    type="button"
+                    onClick={() =>
+                      updateConfig("backgroundColor", card.value)
+                    }
+                    className={cn(
+                      "flex flex-col items-center rounded-md border p-2 text-center transition-all",
+                      isSelected
+                        ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                        : "border-border hover:border-primary/50 hover:bg-muted/50"
+                    )}
+                  >
+                    <span className="text-xs font-medium">{card.label}</span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {card.description}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* 테두리 스타일 */}
+          <div>
+            <span className="text-xs text-muted-foreground">테두리</span>
+            <div className="mt-1.5 grid grid-cols-3 gap-2">
+              {BORDER_CARDS.map((card) => {
+                const Icon = card.icon;
+                const isSelected =
+                  (config.borderStyle || "solid") === card.value;
+                return (
+                  <button
+                    key={card.value}
+                    type="button"
+                    onClick={() => updateConfig("borderStyle", card.value)}
+                    className={cn(
+                      "flex flex-col items-center rounded-md border p-2 text-center transition-all gap-1",
+                      isSelected
+                        ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                        : "border-border hover:border-primary/50 hover:bg-muted/50"
+                    )}
+                  >
+                    <Icon className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-xs font-medium">{card.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 접기/펼치기 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">접기/펼치기</p>
+                <p className="text-[11px] text-muted-foreground">
+                  사용자가 섹션을 접거나 펼칠 수 있어요
+                </p>
+              </div>
+              <Switch
+                checked={config.collapsible || false}
+                onCheckedChange={(checked) =>
+                  updateConfig("collapsible", checked)
+                }
+              />
+            </div>
+
+            {config.collapsible && (
+              <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                <div className="flex items-center justify-between py-1">
+                  <div>
+                    <p className="text-sm">기본으로 펼치기</p>
+                    <p className="text-[11px] text-muted-foreground">
+                      화면 로드 시 섹션이 펼쳐진 상태에요
+                    </p>
+                  </div>
+                  <Switch
+                    checked={config.defaultOpen !== false}
+                    onCheckedChange={(checked) =>
+                      updateConfig("defaultOpen", checked)
+                    }
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2SectionCardConfigPanel.displayName = "V2SectionCardConfigPanel";
+
+export default V2SectionCardConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx b/frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx
new file mode 100644
index 00000000..1d549bca
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2SectionPaperConfigPanel.tsx
@@ -0,0 +1,275 @@
+"use client";
+
+/**
+ * V2SectionPaper 설정 패널
+ * 토스식 단계별 UX: 배경색 카드 선택 -> 여백/모서리 카드 선택 -> 고급 설정(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Settings, ChevronDown, Palette } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 배경색 카드 정의 ───
+const BG_CARDS = [
+  { value: "default", label: "기본", description: "연한 회색" },
+  { value: "muted", label: "회색", description: "조금 더 진한" },
+  { value: "accent", label: "강조", description: "연한 파랑" },
+  { value: "primary", label: "브랜드", description: "브랜드 컬러" },
+  { value: "custom", label: "커스텀", description: "직접 선택" },
+] as const;
+
+// ─── 내부 여백 카드 정의 ───
+const PADDING_CARDS = [
+  { value: "none", label: "없음", size: "0px" },
+  { value: "sm", label: "작게", size: "12px" },
+  { value: "md", label: "중간", size: "16px" },
+  { value: "lg", label: "크게", size: "24px" },
+] as const;
+
+// ─── 둥근 모서리 카드 정의 ───
+const ROUNDED_CARDS = [
+  { value: "none", label: "없음", size: "0px" },
+  { value: "sm", label: "작게", size: "2px" },
+  { value: "md", label: "중간", size: "6px" },
+  { value: "lg", label: "크게", size: "8px" },
+] as const;
+
+// ─── 그림자 카드 정의 ───
+const SHADOW_CARDS = [
+  { value: "none", label: "없음" },
+  { value: "sm", label: "작게" },
+  { value: "md", label: "중간" },
+] as const;
+
+interface V2SectionPaperConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+}
+
+export const V2SectionPaperConfigPanel: React.FC<
+  V2SectionPaperConfigPanelProps
+> = ({ config, onChange }) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: string, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  const selectedBg = config.backgroundColor || "default";
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 배경색 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">배경색</p>
+        <div className="grid grid-cols-3 gap-2">
+          {BG_CARDS.map((card) => {
+            const isSelected = selectedBg === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("backgroundColor", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                {card.value === "custom" ? (
+                  <Palette className="h-4 w-4 mb-0.5 text-muted-foreground" />
+                ) : null}
+                <span className="text-xs font-medium">{card.label}</span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          색종이 컨셉의 배경색을 선택해요
+        </p>
+      </div>
+
+      {/* 커스텀 색상 선택 */}
+      {selectedBg === "custom" && (
+        <div className="rounded-lg border bg-muted/30 p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">커스텀 색상</span>
+            <Input
+              type="color"
+              value={config.customColor || "#f0f0f0"}
+              onChange={(e) => updateConfig("customColor", e.target.value)}
+              className="h-8 w-[80px] cursor-pointer"
+            />
+          </div>
+        </div>
+      )}
+
+      {/* ─── 2단계: 내부 여백 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">내부 여백</p>
+        <div className="grid grid-cols-4 gap-2">
+          {PADDING_CARDS.map((card) => {
+            const isSelected = (config.padding || "md") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("padding", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span className="text-xs font-medium">{card.label}</span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.size}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 3단계: 모서리 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">둥근 모서리</p>
+        <div className="grid grid-cols-4 gap-2">
+          {ROUNDED_CARDS.map((card) => {
+            const isSelected =
+              (config.roundedCorners || "md") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("roundedCorners", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span className="text-xs font-medium">{card.label}</span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.size}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 그림자 */}
+            <div>
+              <span className="text-xs text-muted-foreground">그림자</span>
+              <div className="mt-1.5 grid grid-cols-3 gap-2">
+                {SHADOW_CARDS.map((card) => {
+                  const isSelected =
+                    (config.shadow || "none") === card.value;
+                  return (
+                    <button
+                      key={card.value}
+                      type="button"
+                      onClick={() => updateConfig("shadow", card.value)}
+                      className={cn(
+                        "flex items-center justify-center rounded-md border p-2 text-center transition-all",
+                        isSelected
+                          ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                          : "border-border hover:border-primary/50 hover:bg-muted/50"
+                      )}
+                    >
+                      <span className="text-xs font-medium">{card.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* 테두리 표시 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">미묘한 테두리</p>
+                <p className="text-[11px] text-muted-foreground">
+                  섹션 경계를 살짝 구분하는 테두리에요
+                </p>
+              </div>
+              <Switch
+                checked={config.showBorder || false}
+                onCheckedChange={(checked) =>
+                  updateConfig("showBorder", checked)
+                }
+              />
+            </div>
+
+            {/* 테두리 스타일 */}
+            {config.showBorder && (
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">테두리 스타일</span>
+                <Select
+                  value={config.borderStyle || "subtle"}
+                  onValueChange={(value) => updateConfig("borderStyle", value)}
+                >
+                  <SelectTrigger className="h-7 w-[100px] text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">없음</SelectItem>
+                    <SelectItem value="subtle">은은하게</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2SectionPaperConfigPanel.displayName = "V2SectionPaperConfigPanel";
+
+export default V2SectionPaperConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
index 66ebb369..1a396a27 100644
--- a/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2SelectConfigPanel.tsx
@@ -2,17 +2,18 @@
 
 /**
  * V2Select 설정 패널
- * 통합 선택 컴포넌트의 세부 설정을 관리합니다.
+ * 토스식 단계별 UX: 소스 카드 선택 -> 소스별 설정 -> 고급 설정(접힘)
  */
 
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
-import { Plus, Trash2, Loader2, Filter } from "lucide-react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Separator } from "@/components/ui/separator";
+import { List, Database, FolderTree, Settings, ChevronDown, Plus, Trash2, Loader2, Filter } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import type { V2SelectFilter } from "@/types/v2-components";
 
@@ -53,6 +54,28 @@ const USER_FIELD_OPTIONS = [
   { value: "userName", label: "사용자명" },
 ] as const;
 
+// ─── 데이터 소스 카드 정의 ───
+const SOURCE_CARDS = [
+  {
+    value: "static",
+    icon: List,
+    title: "직접 입력",
+    description: "옵션을 직접 추가해요",
+  },
+  {
+    value: "category",
+    icon: FolderTree,
+    title: "카테고리",
+    description: "등록된 선택지를 사용해요",
+  },
+  {
+    value: "entity",
+    icon: Database,
+    title: "테이블 참조",
+    description: "다른 테이블에서 가져와요",
+  },
+] as const;
+
 /**
  * 필터 조건 설정 서브 컴포넌트
  */
@@ -75,7 +98,6 @@ const FilterConditionsSection: React.FC<{
     const updated = [...filters];
     updated[index] = { ...updated[index], ...patch };
 
-    // valueType 변경 시 관련 필드 초기화
     if (patch.valueType) {
       if (patch.valueType === "static") {
         updated[index].fieldRef = undefined;
@@ -89,7 +111,6 @@ const FilterConditionsSection: React.FC<{
       }
     }
 
-    // isNull/isNotNull 연산자는 값 불필요
     if (patch.operator === "isNull" || patch.operator === "isNotNull") {
       updated[index].value = undefined;
       updated[index].fieldRef = undefined;
@@ -107,11 +128,11 @@ const FilterConditionsSection: React.FC<{
   const needsValue = (op: string) => op !== "isNull" && op !== "isNotNull";
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-2">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1.5">
           <Filter className="h-3.5 w-3.5 text-muted-foreground" />
-          <Label className="text-xs font-medium">데이터 필터 조건</Label>
+          <span className="text-xs font-medium">데이터 필터</span>
         </div>
         <Button
           type="button"
@@ -142,12 +163,10 @@ const FilterConditionsSection: React.FC<{
         </p>
       )}
 
-      <div className="space-y-3">
+      <div className="space-y-2">
         {filters.map((filter, index) => (
-          <div key={index} className="space-y-1.5 rounded-md border p-2">
-            {/* 행 1: 컬럼 + 연산자 + 삭제 */}
+          <div key={index} className="space-y-2 rounded-md border p-3">
             <div className="flex items-center gap-1.5">
-              {/* 컬럼 선택 */}
               <Select
                 value={filter.column || ""}
                 onValueChange={(v) => updateFilter(index, { column: v })}
@@ -164,12 +183,11 @@ const FilterConditionsSection: React.FC<{
                 </SelectContent>
               </Select>
 
-              {/* 연산자 선택 */}
               <Select
                 value={filter.operator || "="}
                 onValueChange={(v) => updateFilter(index, { operator: v as V2SelectFilter["operator"] })}
               >
-                <SelectTrigger className="h-7 w-[90px] shrink-0 text-[11px]">
+                <SelectTrigger className="h-7 flex-1 text-[11px]">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -181,22 +199,19 @@ const FilterConditionsSection: React.FC<{
                 </SelectContent>
               </Select>
 
-              {/* 삭제 버튼 */}
               <Button
                 type="button"
                 variant="ghost"
                 size="sm"
                 onClick={() => removeFilter(index)}
-                className="text-destructive h-7 w-7 shrink-0 p-0"
+                className="text-destructive h-8 w-8 shrink-0 p-0"
               >
                 <Trash2 className="h-3 w-3" />
               </Button>
             </div>
 
-            {/* 행 2: 값 유형 + 값 입력 (isNull/isNotNull 제외) */}
             {needsValue(filter.operator) && (
               <div className="flex items-center gap-1.5">
-                {/* 값 유형 */}
                 <Select
                   value={filter.valueType || "static"}
                   onValueChange={(v) => updateFilter(index, { valueType: v as V2SelectFilter["valueType"] })}
@@ -213,7 +228,6 @@ const FilterConditionsSection: React.FC<{
                   </SelectContent>
                 </Select>
 
-                {/* 값 입력 영역 */}
                 {(filter.valueType || "static") === "static" && (
                   <Input
                     value={String(filter.value ?? "")}
@@ -261,12 +275,11 @@ const FilterConditionsSection: React.FC<{
 interface V2SelectConfigPanelProps {
   config: Record<string, any>;
   onChange: (config: Record<string, any>) => void;
-  /** 컬럼의 inputType (entity/category 타입 확인용) */
   inputType?: string;
-  /** 현재 테이블명 (카테고리 값 조회용) */
   tableName?: string;
-  /** 현재 컬럼명 (카테고리 값 조회용) */
   columnName?: string;
+  tables?: Array<{ tableName: string; displayName?: string; tableComment?: string }>;
+  screenTableName?: string;
 }
 
 export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
@@ -275,26 +288,27 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
   inputType,
   tableName,
   columnName,
+  tables = [],
+  screenTableName,
 }) => {
-  const isEntityType = inputType === "entity";
+  const isEntityType = inputType === "entity" || config.source === "entity" || !!config.entityTable;
   const isCategoryType = inputType === "category";
 
   const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
   const [loadingColumns, setLoadingColumns] = useState(false);
 
-  // 카테고리 값 목록
   const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
   const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
 
-  // 필터용 컬럼 목록 (옵션 데이터 소스 테이블의 컬럼)
   const [filterColumns, setFilterColumns] = useState<ColumnOption[]>([]);
   const [loadingFilterColumns, setLoadingFilterColumns] = useState(false);
 
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const updateConfig = (field: string, value: any) => {
     onChange({ ...config, [field]: value });
   };
 
-  // 필터 대상 테이블 결정
   const filterTargetTable = useMemo(() => {
     const src = config.source || "static";
     if (src === "entity") return config.entityTable;
@@ -303,7 +317,6 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     return null;
   }, [config.source, config.entityTable, config.table, tableName]);
 
-  // 필터 대상 테이블의 컬럼 로드
   useEffect(() => {
     if (!filterTargetTable) {
       setFilterColumns([]);
@@ -332,14 +345,13 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     loadFilterColumns();
   }, [filterTargetTable]);
 
-  // 카테고리 타입이면 source를 자동으로 category로 설정
+  // 초기 source가 설정 안 된 경우에만 기본값 설정
   useEffect(() => {
-    if (isCategoryType && config.source !== "category") {
+    if (!config.source && isCategoryType) {
       onChange({ ...config, source: "category" });
     }
-  }, [isCategoryType]);
+  }, []);
 
-  // 카테고리 값 로드
   const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
     if (!catTable || !catColumn) {
       setCategoryValues([]);
@@ -374,9 +386,8 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     }
   }, []);
 
-  // 카테고리 소스일 때 값 로드
   useEffect(() => {
-    if (config.source === "category") {
+    if (config.source === "category" || config.source === "code") {
       const catTable = config.categoryTable || tableName;
       const catColumn = config.categoryColumn || columnName;
       if (catTable && catColumn) {
@@ -385,7 +396,6 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     }
   }, [config.source, config.categoryTable, config.categoryColumn, tableName, columnName, loadCategoryValues]);
 
-  // 엔티티 테이블 변경 시 컬럼 목록 조회
   const loadEntityColumns = useCallback(async (tblName: string) => {
     if (!tblName) {
       setEntityColumns([]);
@@ -423,7 +433,6 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     }
   }, [config.source, config.entityTable, loadEntityColumns]);
 
-  // 정적 옵션 관리
   const options = config.options || [];
 
   const addOption = () => {
@@ -442,218 +451,140 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     updateConfig("options", newOptions);
   };
 
-  // 현재 source 결정 (카테고리 타입이면 강제 category)
-  const effectiveSource = isCategoryType ? "category" : config.source || "static";
+  const effectiveSource = config.source === "code"
+    ? "category"
+    : config.source || (isCategoryType ? "category" : "static");
+
+  const visibleCards = SOURCE_CARDS;
+
+  const gridCols = "grid-cols-3";
 
   return (
     <div className="space-y-4">
-      {/* 선택 모드 */}
+      {/* ─── 1단계: 데이터 소스 선택 ─── */}
       <div className="space-y-2">
-        <Label className="text-xs font-medium">선택 모드</Label>
-        <Select value={config.mode || "dropdown"} onValueChange={(value) => updateConfig("mode", value)}>
-          <SelectTrigger className="h-8 text-xs">
-            <SelectValue placeholder="모드 선택" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="dropdown">드롭다운</SelectItem>
-            <SelectItem value="combobox">콤보박스 (검색)</SelectItem>
-            <SelectItem value="radio">라디오 버튼</SelectItem>
-            <SelectItem value="check">체크박스</SelectItem>
-            <SelectItem value="tag">태그 선택</SelectItem>
-            <SelectItem value="tagbox">태그박스 (태그+드롭다운)</SelectItem>
-            <SelectItem value="toggle">토글 스위치</SelectItem>
-            <SelectItem value="swap">스왑 선택</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Separator />
-
-      {/* 데이터 소스 */}
-      <div className="space-y-2">
-        <Label className="text-xs font-medium">데이터 소스</Label>
-        {isCategoryType ? (
-          <div className="bg-muted flex h-8 items-center rounded-md px-3">
-            <span className="text-xs font-medium text-emerald-600">카테고리 (자동 설정)</span>
-          </div>
-        ) : (
-          <Select value={config.source || "static"} onValueChange={(value) => updateConfig("source", value)}>
-            <SelectTrigger className="h-8 text-xs">
-              <SelectValue placeholder="소스 선택" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="static">정적 옵션</SelectItem>
-              <SelectItem value="code">공통 코드</SelectItem>
-              <SelectItem value="category">카테고리</SelectItem>
-              {isEntityType && <SelectItem value="entity">엔티티</SelectItem>}
-            </SelectContent>
-          </Select>
-        )}
-      </div>
-
-      {/* 카테고리 설정 */}
-      {effectiveSource === "category" && (
-        <div className="space-y-3">
-          <div className="space-y-1">
-            <Label className="text-xs font-medium">카테고리 정보</Label>
-            <div className="bg-muted rounded-md p-2">
-              <div className="grid grid-cols-2 gap-2">
-                <div>
-                  <p className="text-muted-foreground text-[10px]">테이블</p>
-                  <p className="text-xs font-medium">{config.categoryTable || tableName || "-"}</p>
-                </div>
-                <div>
-                  <p className="text-muted-foreground text-[10px]">컬럼</p>
-                  <p className="text-xs font-medium">{config.categoryColumn || columnName || "-"}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 카테고리 값 로딩 중 */}
-          {loadingCategoryValues && (
-            <div className="text-muted-foreground flex items-center gap-2 text-xs">
-              <Loader2 className="h-3 w-3 animate-spin" />
-              카테고리 값 로딩 중...
-            </div>
-          )}
-
-          {/* 카테고리 값 목록 표시 */}
-          {categoryValues.length > 0 && (
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">카테고리 값 ({categoryValues.length}개)</Label>
-              <div className="bg-muted max-h-32 space-y-0.5 overflow-y-auto rounded-md p-1.5">
-                {categoryValues.map((cv) => (
-                  <div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5">
-                    <span className="text-muted-foreground shrink-0 font-mono text-[10px]">{cv.valueCode}</span>
-                    <span className="truncate text-xs">{cv.valueLabel}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* 기본값 설정 */}
-          {categoryValues.length > 0 && (
-            <div className="border-t pt-2">
-              <Label className="text-xs font-medium">기본값</Label>
-              <Select
-                value={config.defaultValue || "_none_"}
-                onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
+        <p className="text-sm font-medium">이 필드는 어떤 데이터를 선택하나요?</p>
+        <div className={cn("grid gap-2", gridCols)}>
+          {visibleCards.map((card) => {
+            const Icon = card.icon;
+            const isSelected = effectiveSource === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("source", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
               >
-                <SelectTrigger className="mt-1 h-8 text-xs">
-                  <SelectValue placeholder="기본값 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="_none_">선택 안함</SelectItem>
-                  {categoryValues.map((cv) => (
-                    <SelectItem key={cv.valueCode} value={cv.valueCode}>
-                      {cv.valueLabel}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 카테고리 값</p>
-            </div>
-          )}
-
-          {/* 카테고리 값 없음 안내 */}
-          {!loadingCategoryValues && categoryValues.length === 0 && (
-            <p className="text-[10px] text-amber-600">
-              카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.
-            </p>
-          )}
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">{card.description}</span>
+              </button>
+            );
+          })}
         </div>
-      )}
+      </div>
 
-      {/* 정적 옵션 관리 */}
+      {/* ─── 2단계: 소스별 설정 ─── */}
+
+      {/* 직접 입력 (static) */}
       {effectiveSource === "static" && (
-        <div className="space-y-2">
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
           <div className="flex items-center justify-between">
-            <Label className="text-xs font-medium">옵션 목록</Label>
-            <Button type="button" variant="ghost" size="sm" onClick={addOption} className="h-6 px-2 text-xs">
+            <span className="text-sm font-medium">옵션 목록</span>
+            <Button type="button" variant="outline" size="sm" onClick={addOption} className="h-7 px-2 text-xs">
               <Plus className="mr-1 h-3 w-3" />
               추가
             </Button>
           </div>
-          <div className="max-h-40 space-y-1.5 overflow-y-auto">
-            {options.map((option: any, index: number) => (
-              <div key={index} className="flex items-center gap-1.5">
-                <Input
-                  value={option.value || ""}
-                  onChange={(e) => updateOptionValue(index, e.target.value)}
-                  placeholder={`옵션 ${index + 1}`}
-                  className="h-7 flex-1 text-xs"
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => removeOption(index)}
-                  className="text-destructive h-7 w-7 shrink-0 p-0"
-                >
-                  <Trash2 className="h-3 w-3" />
-                </Button>
-              </div>
-            ))}
-            {options.length === 0 && (
-              <p className="text-muted-foreground py-2 text-center text-xs">옵션을 추가해주세요</p>
-            )}
-          </div>
 
-          {/* 기본값 설정 */}
+          {options.length > 0 ? (
+            <div className="max-h-40 space-y-1.5 overflow-y-auto">
+              {options.map((option: any, index: number) => (
+                <div key={index} className="flex items-center gap-2">
+                  <Input
+                    value={option.value || ""}
+                    onChange={(e) => updateOptionValue(index, e.target.value)}
+                    placeholder={`옵션 ${index + 1}`}
+                    className="h-8 flex-1 text-sm"
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => removeOption(index)}
+                    className="text-destructive h-8 w-8 shrink-0"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-6 text-muted-foreground">
+              <List className="mx-auto mb-2 h-8 w-8 opacity-30" />
+              <p className="text-sm">아직 옵션이 없어요</p>
+              <p className="text-xs">위의 추가 버튼으로 옵션을 만들어보세요</p>
+            </div>
+          )}
+
           {options.length > 0 && (
-            <div className="mt-3 border-t pt-2">
-              <Label className="text-xs font-medium">기본값</Label>
-              <Select
-                value={config.defaultValue || "_none_"}
-                onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
-              >
-                <SelectTrigger className="mt-1 h-8 text-xs">
-                  <SelectValue placeholder="기본값 선택" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="_none_">선택 안함</SelectItem>
-                  {options.map((option: any, index: number) => (
-                    <SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
-                      {option.label || option.value || `옵션 ${index + 1}`}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-muted-foreground mt-1 text-[10px]">화면 로드 시 자동 선택될 값</p>
+            <div className="border-t pt-3 mt-3">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">기본 선택값</span>
+                <Select
+                  value={config.defaultValue || "_none_"}
+                  onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
+                >
+                  <SelectTrigger className="h-8 w-[160px] text-sm">
+                    <SelectValue placeholder="선택 안함" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="_none_">선택 안함</SelectItem>
+                    {options.map((option: any, index: number) => (
+                      <SelectItem key={`default-${index}`} value={option.value || `_idx_${index}`}>
+                        {option.label || option.value || `옵션 ${index + 1}`}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
           )}
         </div>
       )}
 
-      {/* 공통 코드 설정 */}
-      {effectiveSource === "code" && (
-        <div className="space-y-1">
-          <Label className="text-xs font-medium">코드 그룹</Label>
-          {config.codeGroup ? (
-            <p className="text-foreground text-sm font-medium">{config.codeGroup}</p>
-          ) : (
-            <p className="text-xs text-amber-600">테이블 타입 관리에서 코드 그룹을 설정해주세요</p>
-          )}
-        </div>
-      )}
-
-      {/* 엔티티(참조 테이블) 설정 */}
+      {/* 테이블 참조 (entity) */}
       {effectiveSource === "entity" && (
-        <div className="space-y-3">
-          <div className="space-y-2">
-            <Label className="text-xs font-medium">참조 테이블</Label>
-            <Input
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <Database className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">테이블 참조</span>
+          </div>
+
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">참조 테이블</p>
+            <Select
               value={config.entityTable || ""}
-              readOnly
-              disabled
-              placeholder="테이블 타입 관리에서 설정"
-              className="bg-muted h-8 text-xs"
-            />
-            <p className="text-muted-foreground text-[10px]">
-              조인할 테이블명 (테이블 타입 관리에서 설정된 경우 자동 입력됨)
-            </p>
+              onValueChange={(v) => {
+                onChange({ ...config, entityTable: v, entityValueColumn: "", entityLabelColumn: "" });
+              }}
+            >
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue placeholder="테이블을 선택해주세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {tables.map((t) => (
+                  <SelectItem key={t.tableName} value={t.tableName}>
+                    {t.displayName || t.tableComment ? `${t.displayName || t.tableComment} (${t.tableName})` : t.tableName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
 
           {loadingColumns && (
@@ -663,141 +594,143 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             </div>
           )}
 
-          <div className="grid grid-cols-2 gap-2">
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">값 컬럼 (코드)</Label>
-              {entityColumns.length > 0 ? (
+          {entityColumns.length > 0 && (
+            <div className="space-y-3">
+              <div>
+                <p className="mb-1.5 text-xs text-muted-foreground">실제 저장되는 값</p>
                 <Select
                   value={config.entityValueColumn || ""}
-                  onValueChange={(value) => updateConfig("entityValueColumn", value)}
+                  onValueChange={(v) => updateConfig("entityValueColumn", v)}
                 >
-                  <SelectTrigger className="h-8 text-xs">
+                  <SelectTrigger className="h-8 text-sm">
                     <SelectValue placeholder="컬럼 선택" />
                   </SelectTrigger>
                   <SelectContent>
                     {entityColumns.map((col) => (
                       <SelectItem key={col.columnName} value={col.columnName}>
-                        {col.columnLabel || col.columnName}
+                        {col.columnLabel}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-              ) : (
-                <Input
-                  value={config.entityValueColumn || ""}
-                  onChange={(e) => updateConfig("entityValueColumn", e.target.value)}
-                  placeholder="id"
-                  className="h-8 text-xs"
-                />
-              )}
-              <p className="text-muted-foreground text-[10px]">저장될 값</p>
-            </div>
-            <div className="space-y-2">
-              <Label className="text-xs font-medium">표시 컬럼</Label>
-              {entityColumns.length > 0 ? (
+              </div>
+              <div>
+                <p className="mb-1.5 text-xs text-muted-foreground">사용자에게 보여지는 텍스트</p>
                 <Select
                   value={config.entityLabelColumn || ""}
-                  onValueChange={(value) => updateConfig("entityLabelColumn", value)}
+                  onValueChange={(v) => updateConfig("entityLabelColumn", v)}
                 >
-                  <SelectTrigger className="h-8 text-xs">
+                  <SelectTrigger className="h-8 text-sm">
                     <SelectValue placeholder="컬럼 선택" />
                   </SelectTrigger>
                   <SelectContent>
                     {entityColumns.map((col) => (
                       <SelectItem key={col.columnName} value={col.columnName}>
-                        {col.columnLabel || col.columnName}
+                        {col.columnLabel}
                       </SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
-              ) : (
-                <Input
-                  value={config.entityLabelColumn || ""}
-                  onChange={(e) => updateConfig("entityLabelColumn", e.target.value)}
-                  placeholder="name"
-                  className="h-8 text-xs"
-                />
-              )}
-              <p className="text-muted-foreground text-[10px]">화면에 표시될 값</p>
-            </div>
-          </div>
-
-          {config.entityTable && !loadingColumns && entityColumns.length === 0 && (
-            <p className="text-[10px] text-amber-600">
-              테이블 컬럼을 조회할 수 없습니다. 테이블 타입 관리에서 참조 테이블을 설정해주세요.
-            </p>
-          )}
-
-          {config.entityTable && entityColumns.length > 0 && (
-            <div className="border-t pt-3">
-              <p className="text-muted-foreground text-[10px]">
-                같은 폼에 참조 테이블({config.entityTable})의 컬럼이 배치되어 있으면, 엔티티 선택 시 해당 필드가 자동으로
-                채워집니다.
+              </div>
+              <p className="text-[11px] text-muted-foreground">
+                엔티티 선택 시 같은 폼의 관련 필드가 자동으로 채워져요
               </p>
             </div>
           )}
+
+          {config.entityTable && !loadingColumns && entityColumns.length === 0 && (
+            <p className="text-[10px] text-amber-600">
+              선택한 테이블의 컬럼 정보를 불러올 수 없어요. 테이블 타입 관리에서 컬럼 정보를 확인해주세요.
+            </p>
+          )}
         </div>
       )}
 
-      <Separator />
+      {/* 카테고리 (category) - source="code" 하위 호환 포함 */}
+      {effectiveSource === "category" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center gap-2">
+            <FolderTree className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">카테고리</span>
+          </div>
 
-      {/* 추가 옵션 */}
-      <div className="space-y-3">
-        <Label className="text-xs font-medium">추가 옵션</Label>
+          {config.source === "code" && config.codeGroup && (
+            <div className="rounded-md border bg-background p-3">
+              <p className="text-xs text-muted-foreground">코드 그룹</p>
+              <p className="mt-0.5 text-sm font-medium">{config.codeGroup}</p>
+              <p className="mt-1 text-[11px] text-muted-foreground">
+                테이블 컬럼에 설정된 코드 그룹이 자동으로 적용돼요
+              </p>
+            </div>
+          )}
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="multiple"
-            checked={config.multiple || false}
-            onCheckedChange={(checked) => updateConfig("multiple", checked)}
-          />
-          <label htmlFor="multiple" className="text-xs">
-            다중 선택 허용
-          </label>
-        </div>
+          <div className="rounded-md border bg-background p-3">
+            <div className="flex gap-6">
+              <div>
+                <p className="text-xs text-muted-foreground">테이블</p>
+                <p className="text-sm font-medium">{config.categoryTable || tableName || "-"}</p>
+              </div>
+              <div>
+                <p className="text-xs text-muted-foreground">컬럼</p>
+                <p className="text-sm font-medium">{config.categoryColumn || columnName || "-"}</p>
+              </div>
+            </div>
+          </div>
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="searchable"
-            checked={config.searchable || false}
-            onCheckedChange={(checked) => updateConfig("searchable", checked)}
-          />
-          <label htmlFor="searchable" className="text-xs">
-            검색 기능
-          </label>
-        </div>
+          {loadingCategoryValues && (
+            <div className="text-muted-foreground flex items-center gap-2 text-xs">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              카테고리 값 로딩 중...
+            </div>
+          )}
 
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="allowClear"
-            checked={config.allowClear !== false}
-            onCheckedChange={(checked) => updateConfig("allowClear", checked)}
-          />
-          <label htmlFor="allowClear" className="text-xs">
-            값 초기화 허용
-          </label>
-        </div>
-      </div>
+          {categoryValues.length > 0 && (
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">
+                {categoryValues.length}개의 값이 있어요
+              </p>
+              <div className="max-h-28 overflow-y-auto rounded-md border bg-background p-2 space-y-0.5">
+                {categoryValues.map((cv) => (
+                  <div key={cv.valueCode} className="flex items-center gap-2 px-1.5 py-0.5 text-xs">
+                    <span className="shrink-0 font-mono text-[10px] text-muted-foreground">{cv.valueCode}</span>
+                    <span className="truncate">{cv.valueLabel}</span>
+                  </div>
+                ))}
+              </div>
 
-      {/* 다중 선택 시 최대 개수 */}
-      {config.multiple && (
-        <div className="space-y-2">
-          <Label className="text-xs font-medium">최대 선택 개수</Label>
-          <Input
-            type="number"
-            value={config.maxSelect ?? ""}
-            onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)}
-            placeholder="제한 없음"
-            min="1"
-            className="h-8 text-xs"
-          />
+              <div className="mt-3 flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">기본 선택값</span>
+                <Select
+                  value={config.defaultValue || "_none_"}
+                  onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
+                >
+                  <SelectTrigger className="h-8 w-[160px] text-sm">
+                    <SelectValue placeholder="선택 안함" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="_none_">선택 안함</SelectItem>
+                    {categoryValues.map((cv) => (
+                      <SelectItem key={cv.valueCode} value={cv.valueCode}>
+                        {cv.valueLabel}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          )}
+
+          {!loadingCategoryValues && categoryValues.length === 0 && (
+            <p className="text-[10px] text-amber-600">
+              카테고리 값이 없습니다. 테이블 카테고리 관리에서 값을 추가해주세요.
+            </p>
+          )}
         </div>
       )}
 
-      {/* 데이터 필터 조건 - static 소스 외 모든 소스에서 사용 */}
+      {/* 데이터 필터 (static 제외, filterTargetTable 있을 때만) */}
       {effectiveSource !== "static" && filterTargetTable && (
-        <>
-          <Separator />
+        <div className="rounded-lg border bg-muted/30 p-4">
           <FilterConditionsSection
             filters={(config.filters as V2SelectFilter[]) || []}
             columns={filterColumns}
@@ -805,8 +738,106 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             targetTable={filterTargetTable}
             onFiltersChange={(filters) => updateConfig("filters", filters)}
           />
-        </>
+        </div>
       )}
+
+      {/* ─── 3단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 선택 모드 */}
+            <div>
+              <p className="mb-1.5 text-xs text-muted-foreground">선택 방식</p>
+              <Select value={config.mode || "dropdown"} onValueChange={(v) => updateConfig("mode", v)}>
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="dropdown">드롭다운</SelectItem>
+                  <SelectItem value="combobox">검색 가능 드롭다운</SelectItem>
+                  <SelectItem value="radio">라디오 버튼</SelectItem>
+                  <SelectItem value="check">체크박스</SelectItem>
+                  <Separator className="my-1" />
+                  <SelectItem value="tag">태그 선택</SelectItem>
+                  <SelectItem value="tagbox">태그박스</SelectItem>
+                  <SelectItem value="toggle">토글</SelectItem>
+                  <SelectItem value="swap">스왑</SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="mt-1 text-[11px] text-muted-foreground">대부분의 경우 드롭다운이 적합해요</p>
+            </div>
+
+            {/* 토글 옵션들 */}
+            <div className="space-y-2">
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">여러 개 선택</p>
+                  <p className="text-[11px] text-muted-foreground">한 번에 여러 값을 선택할 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.multiple || false}
+                  onCheckedChange={(checked) => updateConfig("multiple", checked)}
+                />
+              </div>
+
+              {config.multiple && (
+                <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                  <div className="flex items-center justify-between py-1">
+                    <span className="text-xs text-muted-foreground">최대 선택 개수</span>
+                    <Input
+                      type="number"
+                      value={config.maxSelect ?? ""}
+                      onChange={(e) => updateConfig("maxSelect", e.target.value ? Number(e.target.value) : undefined)}
+                      placeholder="제한 없음"
+                      min={1}
+                      className="h-7 w-[100px] text-xs"
+                    />
+                  </div>
+                </div>
+              )}
+
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">검색 기능</p>
+                  <p className="text-[11px] text-muted-foreground">옵션이 많을 때 검색으로 찾을 수 있어요</p>
+                </div>
+                <Switch
+                  checked={config.searchable || false}
+                  onCheckedChange={(checked) => updateConfig("searchable", checked)}
+                />
+              </div>
+
+              <div className="flex items-center justify-between py-1">
+                <div>
+                  <p className="text-sm">선택 초기화</p>
+                  <p className="text-[11px] text-muted-foreground">선택한 값을 지울 수 있는 X 버튼이 표시돼요</p>
+                </div>
+                <Switch
+                  checked={config.allowClear !== false}
+                  onCheckedChange={(checked) => updateConfig("allowClear", checked)}
+                />
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 };
diff --git a/frontend/components/v2/config-panels/V2SelectedItemsDetailInputConfigPanel.tsx b/frontend/components/v2/config-panels/V2SelectedItemsDetailInputConfigPanel.tsx
new file mode 100644
index 00000000..56a9b780
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2SelectedItemsDetailInputConfigPanel.tsx
@@ -0,0 +1,1542 @@
+"use client";
+
+/**
+ * V2 SelectedItemsDetailInput 설정 패널
+ * 토스식 단계별 UX: 테이블 설정 -> 컬럼/필드 관리 -> 고급 설정(접힘)
+ */
+
+import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import {
+  Database,
+  Table2,
+  Columns3,
+  Plus,
+  Trash2,
+  Settings,
+  ChevronDown,
+  ChevronRight,
+  Check,
+  ChevronsUpDown,
+  Link2,
+  Layers,
+  LayoutGrid,
+  LayoutList,
+  FolderPlus,
+  Calculator,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ComponentData } from "@/types/screen";
+import type {
+  SelectedItemsDetailInputConfig,
+  AdditionalFieldDefinition,
+  FieldGroup,
+  AutoDetectedFk,
+  ParentDataMapping,
+} from "@/lib/registry/components/selected-items-detail-input/types";
+
+// ─── 테이블 컬럼 타입 ───
+interface ColumnInfo {
+  columnName: string;
+  columnLabel?: string;
+  dataType?: string;
+  inputType?: string;
+  codeCategory?: string;
+  referenceTable?: string;
+  referenceColumn?: string;
+}
+
+// ─── 레이아웃 카드 정의 ───
+const LAYOUT_CARDS = [
+  {
+    value: "grid",
+    icon: LayoutGrid,
+    title: "테이블 형식",
+    description: "행 단위 데이터 표시",
+  },
+  {
+    value: "card",
+    icon: LayoutList,
+    title: "카드 형식",
+    description: "각 항목을 카드로 표시",
+  },
+] as const;
+
+// ─── 입력 모드 카드 정의 ───
+const INPUT_MODE_CARDS = [
+  {
+    value: "inline",
+    icon: Columns3,
+    title: "항상 표시",
+    description: "입력창을 항상 표시",
+  },
+  {
+    value: "modal",
+    icon: Layers,
+    title: "추가 버튼",
+    description: "클릭 시 입력, 완료 후 카드",
+  },
+] as const;
+
+// ─── Props ───
+export interface V2SelectedItemsDetailInputConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  allComponents?: ComponentData[];
+  currentComponent?: ComponentData;
+  screenTableName?: string;
+  allTables?: Array<{ tableName: string; displayName?: string }>;
+  onUpdateProperty?: (id: string, key: string, value: any) => void;
+}
+
+/**
+ * Combobox 서브컴포넌트 - 테이블 선택용
+ */
+const TableCombobox: React.FC<{
+  value: string;
+  tables: Array<{ tableName: string; displayName?: string }>;
+  placeholder: string;
+  onSelect: (tableName: string) => void;
+}> = ({ value, tables, placeholder, onSelect }) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filtered = useMemo(() => {
+    if (!search) return tables;
+    const s = search.toLowerCase();
+    return tables.filter(
+      (t) =>
+        t.tableName.toLowerCase().includes(s) ||
+        t.displayName?.toLowerCase().includes(s),
+    );
+  }, [tables, search]);
+
+  const selectedLabel = useMemo(() => {
+    if (!value) return placeholder;
+    const t = tables.find((t) => t.tableName === value);
+    return t ? t.displayName || t.tableName : value;
+  }, [value, tables, placeholder]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-8 w-full justify-between text-xs sm:text-sm"
+        >
+          {selectedLabel}
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{ width: "var(--radix-popover-trigger-width)" }}
+        align="start"
+      >
+        <Command>
+          <CommandInput
+            placeholder="테이블 검색..."
+            value={search}
+            onValueChange={setSearch}
+            className="text-xs sm:text-sm"
+          />
+          <CommandList>
+            <CommandEmpty className="text-xs">
+              테이블을 찾을 수 없습니다.
+            </CommandEmpty>
+            <CommandGroup className="max-h-48 overflow-auto">
+              {filtered.map((t) => (
+                <CommandItem
+                  key={t.tableName}
+                  value={t.tableName}
+                  onSelect={(v) => {
+                    onSelect(v);
+                    setOpen(false);
+                    setSearch("");
+                  }}
+                  className="text-xs sm:text-sm"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-3 w-3",
+                      value === t.tableName ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span>{t.displayName || t.tableName}</span>
+                    {t.displayName && (
+                      <span className="text-[10px] text-muted-foreground">
+                        {t.tableName}
+                      </span>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+/**
+ * Combobox 서브컴포넌트 - 컬럼 선택용
+ */
+const ColumnCombobox: React.FC<{
+  value: string;
+  columns: ColumnInfo[];
+  placeholder: string;
+  disabled?: boolean;
+  onSelect: (columnName: string, column: ColumnInfo) => void;
+}> = ({ value, columns, placeholder, disabled, onSelect }) => {
+  const [open, setOpen] = useState(false);
+
+  const selectedLabel = useMemo(() => {
+    if (!value) return placeholder;
+    const c = columns.find((c) => c.columnName === value);
+    return c ? c.columnLabel || c.columnName : value;
+  }, [value, columns, placeholder]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className="h-7 w-full justify-between text-xs"
+        >
+          {selectedLabel}
+          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[250px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs">
+              컬럼을 찾을 수 없습니다.
+            </CommandEmpty>
+            <CommandGroup className="max-h-48 overflow-auto">
+              {columns.map((c) => (
+                <CommandItem
+                  key={c.columnName}
+                  value={`${c.columnLabel || c.columnName} ${c.columnName}`}
+                  onSelect={() => {
+                    onSelect(c.columnName, c);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-3 w-3",
+                      value === c.columnName ? "opacity-100" : "opacity-0",
+                    )}
+                  />
+                  <div className="flex flex-col">
+                    <span className="font-medium">
+                      {c.columnLabel || c.columnName}
+                    </span>
+                    <span className="text-[10px] text-muted-foreground">
+                      {c.columnName}
+                      {c.dataType ? ` (${c.dataType})` : ""}
+                    </span>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+/**
+ * V2 SelectedItemsDetailInput 설정 패널 (토스식 UX)
+ */
+export const V2SelectedItemsDetailInputConfigPanel: React.FC<
+  V2SelectedItemsDetailInputConfigPanelProps
+> = ({
+  config: rawConfig,
+  onChange,
+  allComponents = [],
+  currentComponent,
+  screenTableName,
+  allTables = [],
+  onUpdateProperty,
+}) => {
+  const config = rawConfig as SelectedItemsDetailInputConfig;
+
+  // ─── 핸들러 ───
+  const handleChange = useCallback(
+    (key: string, value: any) => {
+      onChange({ ...config, [key]: value });
+    },
+    [config, onChange],
+  );
+
+  // ─── 테이블 컬럼 로드 상태 ───
+  const [sourceColumns, setSourceColumns] = useState<ColumnInfo[]>([]);
+  const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
+  const [autoDetectedFks, setAutoDetectedFks] = useState<AutoDetectedFk[]>([]);
+  const fkAutoAppliedRef = useRef(false);
+
+  // ─── 테이블 컬럼 로드 ───
+  const loadColumns = useCallback(async (tableName: string): Promise<ColumnInfo[]> => {
+    if (!tableName) return [];
+    try {
+      const { tableManagementApi } = await import("@/lib/api/tableManagement");
+      const response = await tableManagementApi.getColumnList(tableName);
+      if (response.success && response.data) {
+        return (response.data.columns || []).map((col: any) => ({
+          columnName: col.columnName,
+          columnLabel: col.displayName || col.columnLabel || col.columnName,
+          dataType: col.dataType,
+          inputType: col.inputType,
+          codeCategory: col.codeCategory,
+          referenceTable: col.referenceTable,
+          referenceColumn: col.referenceColumn,
+        }));
+      }
+    } catch (error) {
+      console.error("컬럼 로드 오류:", tableName, error);
+    }
+    return [];
+  }, []);
+
+  // 원본 테이블 컬럼 로드
+  useEffect(() => {
+    if (!config.sourceTable) {
+      setSourceColumns([]);
+      return;
+    }
+    loadColumns(config.sourceTable).then(setSourceColumns);
+  }, [config.sourceTable, loadColumns]);
+
+  // 대상 테이블 컬럼 로드
+  useEffect(() => {
+    if (!config.targetTable) {
+      setTargetColumns([]);
+      setAutoDetectedFks([]);
+      return;
+    }
+    loadColumns(config.targetTable).then(setTargetColumns);
+  }, [config.targetTable, loadColumns]);
+
+  // FK 자동 감지
+  const detectedFks = useMemo<AutoDetectedFk[]>(() => {
+    if (!config.targetTable || targetColumns.length === 0) return [];
+    const entityFkColumns = targetColumns.filter(
+      (col) => col.inputType === "entity" && col.referenceTable,
+    );
+    if (entityFkColumns.length === 0) return [];
+
+    return entityFkColumns.map((col) => {
+      let mappingType: "source" | "parent" | "unknown" = "unknown";
+      if (config.sourceTable && col.referenceTable === config.sourceTable) {
+        mappingType = "source";
+      } else if (config.sourceTable && col.referenceTable !== config.sourceTable) {
+        mappingType = "parent";
+      }
+      return {
+        columnName: col.columnName,
+        columnLabel: col.columnLabel,
+        referenceTable: col.referenceTable!,
+        referenceColumn: col.referenceColumn || "id",
+        mappingType,
+      };
+    });
+  }, [config.targetTable, config.sourceTable, targetColumns]);
+
+  useEffect(() => {
+    setAutoDetectedFks(detectedFks);
+  }, [detectedFks]);
+
+  // targetTable 변경 시 FK 자동 적용 리셋
+  useEffect(() => {
+    fkAutoAppliedRef.current = false;
+  }, [config.targetTable]);
+
+  // FK 자동 매핑 적용 (최초 1회)
+  useEffect(() => {
+    if (fkAutoAppliedRef.current || detectedFks.length === 0) return;
+
+    const sourceFk = detectedFks.find((fk) => fk.mappingType === "source");
+    const parentFks = detectedFks.filter((fk) => fk.mappingType === "parent");
+    let changed = false;
+
+    if (sourceFk && !config.sourceKeyField) {
+      handleChange("sourceKeyField", sourceFk.columnName);
+      changed = true;
+    }
+
+    if (
+      parentFks.length > 0 &&
+      (!config.parentDataMapping || config.parentDataMapping.length === 0)
+    ) {
+      const autoMappings: ParentDataMapping[] = parentFks.map((fk) => ({
+        sourceTable: fk.referenceTable,
+        sourceField: "id",
+        targetField: fk.columnName,
+      }));
+      handleChange("parentDataMapping", autoMappings);
+      changed = true;
+    }
+
+    if (changed) {
+      fkAutoAppliedRef.current = true;
+    }
+  }, [detectedFks, config.sourceKeyField, config.parentDataMapping, handleChange]);
+
+  // ─── 필드 관련 로컬 상태 ───
+  const localFields = useMemo<AdditionalFieldDefinition[]>(
+    () => config.additionalFields || [],
+    [config.additionalFields],
+  );
+
+  const displayColumns = useMemo<Array<{ name: string; label: string; width?: string }>>(
+    () => config.displayColumns || [],
+    [config.displayColumns],
+  );
+
+  const localFieldGroups = useMemo<FieldGroup[]>(
+    () => config.fieldGroups || [],
+    [config.fieldGroups],
+  );
+
+  // 사용 가능한 원본 컬럼 (표시용)
+  const availableSourceColumns = useMemo(() => {
+    const used = new Set(displayColumns.map((c) => c.name));
+    return sourceColumns.filter((c) => !used.has(c.columnName));
+  }, [sourceColumns, displayColumns]);
+
+  // 사용 가능한 대상 컬럼 (입력 필드용)
+  const availableTargetColumns = useMemo(() => {
+    const used = new Set(localFields.map((f) => f.name));
+    return targetColumns.filter((c) => !used.has(c.columnName));
+  }, [targetColumns, localFields]);
+
+  // ─── 표시 컬럼 관리 ───
+  const addDisplayColumn = useCallback(
+    (columnName: string, columnLabel: string) => {
+      if (!displayColumns.some((c) => c.name === columnName)) {
+        handleChange("displayColumns", [
+          ...displayColumns,
+          { name: columnName, label: columnLabel },
+        ]);
+      }
+    },
+    [displayColumns, handleChange],
+  );
+
+  const removeDisplayColumn = useCallback(
+    (columnName: string) => {
+      handleChange(
+        "displayColumns",
+        displayColumns.filter((c) => c.name !== columnName),
+      );
+    },
+    [displayColumns, handleChange],
+  );
+
+  // ─── 추가 입력 필드 관리 ───
+  const addField = useCallback(() => {
+    const newField: AdditionalFieldDefinition = {
+      name: `field_${localFields.length + 1}`,
+      label: `필드 ${localFields.length + 1}`,
+      type: "text",
+    };
+    handleChange("additionalFields", [...localFields, newField]);
+  }, [localFields, handleChange]);
+
+  const updateField = useCallback(
+    (index: number, updates: Partial<AdditionalFieldDefinition>) => {
+      const newFields = [...localFields];
+      newFields[index] = { ...newFields[index], ...updates };
+      handleChange("additionalFields", newFields);
+    },
+    [localFields, handleChange],
+  );
+
+  const removeField = useCallback(
+    (index: number) => {
+      handleChange(
+        "additionalFields",
+        localFields.filter((_, i) => i !== index),
+      );
+    },
+    [localFields, handleChange],
+  );
+
+  // ─── 필드 그룹 관리 ───
+  const addFieldGroup = useCallback(() => {
+    const newGroup: FieldGroup = {
+      id: `group_${localFieldGroups.length + 1}`,
+      title: `그룹 ${localFieldGroups.length + 1}`,
+      order: localFieldGroups.length,
+    };
+    handleChange("fieldGroups", [...localFieldGroups, newGroup]);
+  }, [localFieldGroups, handleChange]);
+
+  const updateFieldGroup = useCallback(
+    (groupId: string, updates: Partial<FieldGroup>) => {
+      const newGroups = localFieldGroups.map((g) =>
+        g.id === groupId ? { ...g, ...updates } : g,
+      );
+      handleChange("fieldGroups", newGroups);
+    },
+    [localFieldGroups, handleChange],
+  );
+
+  const removeFieldGroup = useCallback(
+    (groupId: string) => {
+      const updatedFields = localFields.map((f) =>
+        f.groupId === groupId ? { ...f, groupId: undefined } : f,
+      );
+      handleChange("additionalFields", updatedFields);
+      handleChange(
+        "fieldGroups",
+        localFieldGroups.filter((g) => g.id !== groupId),
+      );
+    },
+    [localFields, localFieldGroups, handleChange],
+  );
+
+  // ─── 부모 매핑 관리 ───
+  const parentMappings = useMemo<ParentDataMapping[]>(
+    () => config.parentDataMapping || [],
+    [config.parentDataMapping],
+  );
+
+  // 부모 매핑 소스 컬럼 캐시
+  const [mappingSourceColumns, setMappingSourceColumns] = useState<
+    Record<number, ColumnInfo[]>
+  >({});
+
+  const addParentMapping = useCallback(() => {
+    handleChange("parentDataMapping", [
+      ...parentMappings,
+      { sourceTable: "", sourceField: "", targetField: "" },
+    ]);
+  }, [parentMappings, handleChange]);
+
+  const updateParentMapping = useCallback(
+    (index: number, updates: Partial<ParentDataMapping>) => {
+      const updated = [...parentMappings];
+      updated[index] = { ...updated[index], ...updates };
+      handleChange("parentDataMapping", updated);
+    },
+    [parentMappings, handleChange],
+  );
+
+  const removeParentMapping = useCallback(
+    (index: number) => {
+      handleChange(
+        "parentDataMapping",
+        parentMappings.filter((_, i) => i !== index),
+      );
+    },
+    [parentMappings, handleChange],
+  );
+
+  // 부모 매핑 소스 컬럼 로드
+  const loadMappingColumns = useCallback(
+    async (tableName: string, index: number) => {
+      const cols = await loadColumns(tableName);
+      setMappingSourceColumns((prev) => ({ ...prev, [index]: cols }));
+    },
+    [loadColumns],
+  );
+
+  // 기존 매핑의 소스 컬럼 초기 로드
+  useEffect(() => {
+    parentMappings.forEach((mapping, index) => {
+      if (mapping.sourceTable && !mappingSourceColumns[index]) {
+        loadMappingColumns(mapping.sourceTable, index);
+      }
+    });
+  }, [parentMappings, mappingSourceColumns, loadMappingColumns]);
+
+  // ─── Collapsible 상태 ───
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({});
+  const toggleSection = useCallback((key: string) => {
+    setOpenSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  // ─── screenTableName 자동 설정 ───
+  useEffect(() => {
+    if (screenTableName && !config.targetTable) {
+      handleChange("targetTable", screenTableName);
+    }
+  }, [screenTableName]);
+
+  // ─── 렌더링 ───
+  return (
+    <div className="space-y-4">
+      {/* ════════ 1단계: 테이블 설정 ════════ */}
+      <div className="space-y-1.5">
+        <div className="flex items-center gap-1.5">
+          <Database className="h-3.5 w-3.5 text-primary" />
+          <span className="text-xs font-semibold">테이블 설정</span>
+        </div>
+        <p className="text-[10px] text-muted-foreground">
+          데이터의 원본과 저장 대상을 설정해요
+        </p>
+      </div>
+
+      {/* 데이터 소스 ID */}
+      <div className="space-y-1">
+        <Label className="text-xs">데이터 소스 ID</Label>
+        <Input
+          value={config.dataSourceId || ""}
+          onChange={(e) => handleChange("dataSourceId", e.target.value)}
+          placeholder="비워두면 URL 파라미터에서 자동 설정"
+          className="h-8 text-xs"
+        />
+        <p className="text-[10px] text-muted-foreground">
+          비워두면 Button에서 자동 전달
+        </p>
+      </div>
+
+      {/* 원본 테이블 */}
+      <div className="space-y-1">
+        <Label className="text-xs">
+          원본 데이터 테이블 <span className="text-destructive">*</span>
+        </Label>
+        <TableCombobox
+          value={config.sourceTable || ""}
+          tables={allTables}
+          placeholder="원본 테이블 선택"
+          onSelect={(v) => handleChange("sourceTable", v)}
+        />
+        <p className="text-[10px] text-muted-foreground">
+          이전 화면에서 전달받은 데이터의 원본 테이블
+        </p>
+      </div>
+
+      {/* 저장 대상 테이블 */}
+      <div className="space-y-1">
+        <Label className="text-xs">
+          저장 대상 테이블 <span className="text-destructive">*</span>
+        </Label>
+        <TableCombobox
+          value={config.targetTable || ""}
+          tables={allTables}
+          placeholder="저장 대상 테이블 선택"
+          onSelect={(v) => handleChange("targetTable", v)}
+        />
+        <p className="text-[10px] text-muted-foreground">
+          최종 데이터를 저장할 테이블
+        </p>
+      </div>
+
+      {/* FK 자동 감지 결과 */}
+      {autoDetectedFks.length > 0 && (
+        <div className="rounded-md border border-primary/20 bg-primary/5 p-3">
+          <p className="mb-2 text-xs font-medium text-primary">
+            FK 자동 감지 ({autoDetectedFks.length}건)
+          </p>
+          <div className="space-y-1">
+            {autoDetectedFks.map((fk) => (
+              <div
+                key={fk.columnName}
+                className="flex items-center gap-2 text-[10px]"
+              >
+                <span
+                  className={cn(
+                    "rounded px-1.5 py-0.5 font-mono text-[9px]",
+                    fk.mappingType === "source"
+                      ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300"
+                      : fk.mappingType === "parent"
+                        ? "bg-amber-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300"
+                        : "bg-muted text-muted-foreground",
+                  )}
+                >
+                  {fk.mappingType === "source"
+                    ? "원본"
+                    : fk.mappingType === "parent"
+                      ? "부모"
+                      : "미분류"}
+                </span>
+                <span className="font-mono text-muted-foreground">
+                  {fk.columnName}
+                </span>
+                <span className="text-muted-foreground">&rarr;</span>
+                <span className="font-mono">{fk.referenceTable}</span>
+              </div>
+            ))}
+          </div>
+          <p className="mt-1.5 text-[9px] text-muted-foreground">
+            엔티티 설정 기반 자동 매핑. sourceKeyField와 parentDataMapping이
+            자동 설정됩니다.
+          </p>
+        </div>
+      )}
+
+      <Separator />
+
+      {/* ════════ 2단계: 레이아웃 & 입력 모드 선택 ════════ */}
+      <div className="space-y-1.5">
+        <div className="flex items-center gap-1.5">
+          <LayoutGrid className="h-3.5 w-3.5 text-primary" />
+          <span className="text-xs font-semibold">레이아웃</span>
+        </div>
+      </div>
+
+      {/* 레이아웃 카드 선택 */}
+      <div className="grid grid-cols-2 gap-2">
+        {LAYOUT_CARDS.map((card) => {
+          const isSelected = (config.layout || "grid") === card.value;
+          const Icon = card.icon;
+          return (
+            <button
+              key={card.value}
+              type="button"
+              onClick={() => handleChange("layout", card.value)}
+              className={cn(
+                "flex flex-col items-center gap-1 rounded-lg border-2 p-3 text-center transition-all",
+                isSelected
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50",
+              )}
+            >
+              <Icon
+                className={cn(
+                  "h-5 w-5",
+                  isSelected ? "text-primary" : "text-muted-foreground",
+                )}
+              />
+              <span className="text-xs font-medium">{card.title}</span>
+              <span className="text-[10px] text-muted-foreground">
+                {card.description}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      {/* 입력 모드 카드 선택 */}
+      <div className="space-y-1.5">
+        <span className="text-xs font-medium text-muted-foreground">
+          입력 모드
+        </span>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        {INPUT_MODE_CARDS.map((card) => {
+          const isSelected = (config.inputMode || "inline") === card.value;
+          const Icon = card.icon;
+          return (
+            <button
+              key={card.value}
+              type="button"
+              onClick={() => handleChange("inputMode", card.value)}
+              className={cn(
+                "flex flex-col items-center gap-1 rounded-lg border-2 p-3 text-center transition-all",
+                isSelected
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-primary/50",
+              )}
+            >
+              <Icon
+                className={cn(
+                  "h-5 w-5",
+                  isSelected ? "text-primary" : "text-muted-foreground",
+                )}
+              />
+              <span className="text-xs font-medium">{card.title}</span>
+              <span className="text-[10px] text-muted-foreground">
+                {card.description}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      <Separator />
+
+      {/* ════════ 3단계: 표시 컬럼 (원본 데이터) ════════ */}
+      <div className="space-y-1.5">
+        <div className="flex items-center gap-1.5">
+          <Table2 className="h-3.5 w-3.5 text-primary" />
+          <span className="text-xs font-semibold">표시 컬럼 (원본 데이터)</span>
+          {displayColumns.length > 0 && (
+            <Badge variant="secondary" className="text-[10px] h-5">
+              {displayColumns.length}개
+            </Badge>
+          )}
+        </div>
+        <p className="text-[10px] text-muted-foreground">
+          전달받은 원본 데이터 중 화면에 표시할 컬럼
+        </p>
+      </div>
+
+      {displayColumns.length > 0 && (
+        <div className="space-y-0.5">
+          {displayColumns.map((col) => (
+            <div
+              key={col.name}
+              className="flex items-center gap-2 rounded-md border px-3 py-1"
+            >
+              <span className="text-xs font-medium truncate flex-1">{col.label}</span>
+              <Badge variant="outline" className="text-[9px] h-4 shrink-0">
+                {col.name}
+              </Badge>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => removeDisplayColumn(col.name)}
+                className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {sourceColumns.length > 0 ? (
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-7 w-full border-dashed text-xs"
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              컬럼 추가
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="p-0"
+            style={{ width: "var(--radix-popover-trigger-width)" }}
+            align="start"
+          >
+            <Command>
+              <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+              <CommandList>
+                <CommandEmpty className="text-xs">
+                  사용 가능한 컬럼이 없습니다.
+                </CommandEmpty>
+                <CommandGroup className="max-h-48 overflow-auto">
+                  {availableSourceColumns.map((c) => (
+                    <CommandItem
+                      key={c.columnName}
+                      value={`${c.columnLabel || c.columnName} ${c.columnName}`}
+                      onSelect={() =>
+                        addDisplayColumn(
+                          c.columnName,
+                          c.columnLabel || c.columnName,
+                        )
+                      }
+                      className="text-xs"
+                    >
+                      <div>
+                        <div className="font-medium">
+                          {c.columnLabel || c.columnName}
+                        </div>
+                        {c.dataType && (
+                          <div className="text-[10px] text-muted-foreground">
+                            {c.dataType}
+                          </div>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      ) : (
+        <p className="text-center text-[10px] text-muted-foreground">
+          {config.sourceTable
+            ? "컬럼 로딩 중..."
+            : "원본 테이블을 먼저 선택하세요"}
+        </p>
+      )}
+
+      <Separator />
+
+      {/* ════════ 4단계: 추가 입력 필드 (Collapsible) ════════ */}
+      <Collapsible
+        open={openSections["inputFields"] ?? (localFields.length > 0)}
+        onOpenChange={(open) => setOpenSections((prev) => ({ ...prev, inputFields: open }))}
+      >
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Columns3 className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">입력 필드</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {localFields.length}개
+              </Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                (openSections["inputFields"] ?? (localFields.length > 0)) && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+            <p className="text-[10px] text-muted-foreground">
+              저장 대상 테이블의 컬럼을 입력 필드로 추가
+            </p>
+
+            {localFields.length > 0 && (
+              <div className="space-y-1">
+                {localFields.map((field, index) => (
+                  <Collapsible key={index}>
+                    <div className="rounded-md border">
+                      <CollapsibleTrigger asChild>
+                        <button
+                          type="button"
+                          className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
+                        >
+                          <ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
+                          <span className="text-xs font-medium flex-1 truncate min-w-0">
+                            {field.label || field.name}
+                          </span>
+                          <Badge variant="outline" className="text-[9px] h-4 shrink-0">
+                            {field.inputType || field.type || "text"}
+                          </Badge>
+                          {field.required && (
+                            <span className="text-[10px] text-destructive font-bold shrink-0">*</span>
+                          )}
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => { e.stopPropagation(); removeField(index); }}
+                            className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
+                          >
+                            <Trash2 className="h-3 w-3" />
+                          </Button>
+                        </button>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <div className="space-y-2 border-t px-2.5 py-2">
+                          <div className="grid grid-cols-2 gap-2">
+                            <div className="space-y-1">
+                              <Label className="text-[10px]">필드명 (컬럼)</Label>
+                              <ColumnCombobox
+                                value={field.name}
+                                columns={availableTargetColumns}
+                                placeholder="컬럼 선택"
+                                onSelect={(name, col) =>
+                                  updateField(index, {
+                                    name,
+                                    label: col.columnLabel || name,
+                                    inputType: col.inputType || "text",
+                                    codeCategory: col.codeCategory,
+                                  })
+                                }
+                              />
+                            </div>
+                            <div className="space-y-1">
+                              <Label className="text-[10px]">라벨</Label>
+                              <Input
+                                value={field.label}
+                                onChange={(e) =>
+                                  updateField(index, { label: e.target.value })
+                                }
+                                placeholder="필드 라벨"
+                                className="h-7 text-xs"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-1">
+                            <Label className="text-[10px]">Placeholder</Label>
+                            <Input
+                              value={field.placeholder || ""}
+                              onChange={(e) =>
+                                updateField(index, { placeholder: e.target.value })
+                              }
+                              placeholder="입력 안내"
+                              className="h-7 text-xs"
+                            />
+                          </div>
+
+                          {localFieldGroups.length > 0 && (
+                            <div className="space-y-1">
+                              <Label className="text-[10px]">필드 그룹</Label>
+                              <Select
+                                value={field.groupId || "none"}
+                                onValueChange={(v) =>
+                                  updateField(index, {
+                                    groupId: v === "none" ? undefined : v,
+                                  })
+                                }
+                              >
+                                <SelectTrigger className="h-7 text-xs">
+                                  <SelectValue placeholder="그룹 없음" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  <SelectItem value="none" className="text-xs">
+                                    그룹 없음
+                                  </SelectItem>
+                                  {localFieldGroups.map((g) => (
+                                    <SelectItem key={g.id} value={g.id} className="text-xs">
+                                      {g.title} ({g.id})
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                            </div>
+                          )}
+
+                          <div className="flex items-center justify-between pt-1">
+                            <div className="flex items-center gap-2">
+                              <Switch
+                                id={`required-${index}`}
+                                checked={field.required ?? false}
+                                onCheckedChange={(checked) =>
+                                  updateField(index, { required: checked })
+                                }
+                              />
+                              <Label
+                                htmlFor={`required-${index}`}
+                                className="text-[10px] font-normal"
+                              >
+                                필수 입력
+                              </Label>
+                            </div>
+                            {field.autoFillFrom && (
+                              <span className="text-[9px] text-primary truncate max-w-[120px]">
+                                자동: {field.autoFillFrom}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </CollapsibleContent>
+                    </div>
+                  </Collapsible>
+                ))}
+              </div>
+            )}
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addField}
+              className="h-7 w-full border-dashed text-xs"
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              필드 추가
+            </Button>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ════════ 5단계: 고급 설정 (서브 Collapsible 통합) ════════ */}
+      <Collapsible
+        open={openSections["advanced"] ?? false}
+        onOpenChange={() => toggleSection("advanced")}
+      >
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                openSections["advanced"] && "rotate-180",
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-3 space-y-3">
+
+            {/* ─── 기본 고급 설정 ─── */}
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <Label className="text-xs">원본 키 필드명</Label>
+                <ColumnCombobox
+                  value={config.sourceKeyField || ""}
+                  columns={targetColumns}
+                  placeholder="자동 감지 (entity FK)"
+                  onSelect={(name) => handleChange("sourceKeyField", name)}
+                />
+                <p className="text-[10px] text-muted-foreground">
+                  대상 테이블에서 원본을 참조하는 FK 컬럼
+                </p>
+              </div>
+
+              <div className="flex items-center justify-between py-1">
+                <Label className="text-xs">항목 번호 표시</Label>
+                <Switch
+                  checked={config.showIndex ?? true}
+                  onCheckedChange={(v) => handleChange("showIndex", v)}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <Label className="text-xs">항목 삭제 허용</Label>
+                <Switch
+                  checked={config.allowRemove ?? false}
+                  onCheckedChange={(v) => handleChange("allowRemove", v)}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <Label className="text-xs">비활성화</Label>
+                <Switch
+                  checked={config.disabled ?? false}
+                  onCheckedChange={(v) => handleChange("disabled", v)}
+                />
+              </div>
+              <div className="flex items-center justify-between py-1">
+                <Label className="text-xs">읽기 전용</Label>
+                <Switch
+                  checked={config.readonly ?? false}
+                  onCheckedChange={(v) => handleChange("readonly", v)}
+                />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">빈 상태 메시지</Label>
+                <Input
+                  value={config.emptyMessage || ""}
+                  onChange={(e) => handleChange("emptyMessage", e.target.value)}
+                  placeholder="전달받은 데이터가 없습니다."
+                  className="h-8 text-xs"
+                />
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* ─── 필드 그룹 관리 (서브 Collapsible) ─── */}
+            <Collapsible
+              open={openSections["fieldGroups"] ?? false}
+              onOpenChange={() => toggleSection("fieldGroups")}
+            >
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border px-3 py-2 transition-colors hover:bg-muted/30"
+                >
+                  <div className="flex items-center gap-2">
+                    <FolderPlus className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">필드 그룹 관리</span>
+                    {localFieldGroups.length > 0 && (
+                      <Badge variant="secondary" className="text-[10px] h-5">
+                        {localFieldGroups.length}개
+                      </Badge>
+                    )}
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-3.5 w-3.5 text-muted-foreground transition-transform",
+                      openSections["fieldGroups"] && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="space-y-2 pt-2">
+                <p className="text-[10px] text-muted-foreground">
+                  추가 입력 필드를 여러 카드로 나눠서 표시 (예: 거래처 정보, 단가 정보)
+                </p>
+
+                {localFieldGroups.map((group, index) => (
+                  <div key={group.id} className="space-y-2 rounded-md border p-2.5">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-medium truncate">
+                        그룹 {index + 1}: {group.title}
+                      </span>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeFieldGroup(group.id)}
+                        className="h-5 w-5 p-0 text-destructive shrink-0"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">그룹 ID</Label>
+                        <Input
+                          value={group.id}
+                          onChange={(e) => updateFieldGroup(group.id, { id: e.target.value })}
+                          className="h-7 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">그룹 제목</Label>
+                        <Input
+                          value={group.title}
+                          onChange={(e) => updateFieldGroup(group.id, { title: e.target.value })}
+                          className="h-7 text-xs"
+                        />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">설명</Label>
+                        <Input
+                          value={group.description || ""}
+                          onChange={(e) => updateFieldGroup(group.id, { description: e.target.value })}
+                          placeholder="그룹 설명"
+                          className="h-7 text-xs"
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">표시 순서</Label>
+                        <Input
+                          type="number"
+                          value={group.order || 0}
+                          onChange={(e) => updateFieldGroup(group.id, { order: parseInt(e.target.value) || 0 })}
+                          className="h-7 text-xs"
+                          min="0"
+                        />
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">소스 테이블 (선택)</Label>
+                      <TableCombobox
+                        value={group.sourceTable || ""}
+                        tables={allTables}
+                        placeholder="기본 대상 테이블 사용"
+                        onSelect={(v) => updateFieldGroup(group.id, { sourceTable: v })}
+                      />
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <Label className="text-[10px]">최대 항목 수</Label>
+                      <Input
+                        type="number"
+                        value={group.maxEntries || ""}
+                        onChange={(e) => updateFieldGroup(group.id, { maxEntries: parseInt(e.target.value) || undefined })}
+                        placeholder="무제한"
+                        className="h-7 w-20 text-xs"
+                        min="1"
+                      />
+                    </div>
+                  </div>
+                ))}
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={addFieldGroup}
+                  className="h-7 w-full border-dashed text-xs"
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  그룹 추가
+                </Button>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* ─── 부모 데이터 매핑 (서브 Collapsible) ─── */}
+            <Collapsible
+              open={openSections["parentMapping"] ?? false}
+              onOpenChange={() => toggleSection("parentMapping")}
+            >
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border px-3 py-2 transition-colors hover:bg-muted/30"
+                >
+                  <div className="flex items-center gap-2">
+                    <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">부모 데이터 매핑</span>
+                    {parentMappings.length > 0 && (
+                      <Badge variant="secondary" className="text-[10px] h-5">
+                        {parentMappings.length}개
+                      </Badge>
+                    )}
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-3.5 w-3.5 text-muted-foreground transition-transform",
+                      openSections["parentMapping"] && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="space-y-2 pt-2">
+                <p className="text-[10px] text-muted-foreground">
+                  이전 화면(거래처 선택 등)에서 넘어온 데이터를 자동으로 매핑
+                </p>
+
+                {parentMappings.map((mapping, index) => {
+                  const isAutoDetected = autoDetectedFks.some(
+                    (fk) => fk.mappingType === "parent" && fk.columnName === mapping.targetField,
+                  );
+                  return (
+                    <div
+                      key={index}
+                      className={cn(
+                        "space-y-2 rounded-md border p-2.5",
+                        isAutoDetected && "border-amber-200 bg-amber-50/30 dark:border-orange-800 dark:bg-orange-950/30",
+                      )}
+                    >
+                      {isAutoDetected && (
+                        <span className="inline-block rounded bg-amber-100 px-1.5 py-0.5 text-[9px] font-medium text-orange-700 dark:bg-orange-900 dark:text-orange-300">
+                          FK 자동 감지
+                        </span>
+                      )}
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">소스 테이블</Label>
+                        <TableCombobox
+                          value={mapping.sourceTable}
+                          tables={allTables}
+                          placeholder="테이블 선택"
+                          onSelect={(v) => {
+                            updateParentMapping(index, { sourceTable: v, sourceField: "" });
+                            loadMappingColumns(v, index);
+                          }}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">원본 필드</Label>
+                        <ColumnCombobox
+                          value={mapping.sourceField}
+                          columns={mappingSourceColumns[index] || []}
+                          placeholder="컬럼 선택"
+                          disabled={!mapping.sourceTable}
+                          onSelect={(name) => updateParentMapping(index, { sourceField: name })}
+                        />
+                      </div>
+                      <div className="space-y-1">
+                        <Label className="text-[10px]">저장 필드 (대상 테이블)</Label>
+                        <ColumnCombobox
+                          value={mapping.targetField}
+                          columns={targetColumns}
+                          placeholder="저장 컬럼 선택"
+                          disabled={!config.targetTable}
+                          onSelect={(name) => updateParentMapping(index, { targetField: name })}
+                        />
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Input
+                          value={mapping.defaultValue || ""}
+                          onChange={(e) => updateParentMapping(index, { defaultValue: e.target.value || undefined })}
+                          placeholder="기본값 (선택)"
+                          className="h-7 flex-1 text-xs"
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => removeParentMapping(index)}
+                          className="h-7 px-2 text-destructive hover:bg-destructive/10"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={addParentMapping}
+                  className="h-7 w-full border-dashed text-xs"
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  매핑 추가
+                </Button>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* ─── 자동 계산 (서브 Collapsible) ─── */}
+            <Collapsible
+              open={openSections["autoCalc"] ?? false}
+              onOpenChange={() => toggleSection("autoCalc")}
+            >
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border px-3 py-2 transition-colors hover:bg-muted/30"
+                >
+                  <div className="flex items-center gap-2">
+                    <Calculator className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">자동 계산</span>
+                    {config.autoCalculation && (
+                      <Badge variant="secondary" className="text-[10px] h-5">활성</Badge>
+                    )}
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-3.5 w-3.5 text-muted-foreground transition-transform",
+                      openSections["autoCalc"] && "rotate-180",
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="space-y-2 pt-2">
+                <div className="flex items-center justify-between">
+                  <Label className="text-xs">자동 계산 활성화</Label>
+                  <Switch
+                    checked={!!config.autoCalculation}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        handleChange("autoCalculation", {
+                          targetField: "",
+                          mode: "template",
+                          inputFields: {
+                            basePrice: "",
+                            discountType: "",
+                            discountValue: "",
+                            roundingType: "",
+                            roundingUnit: "",
+                          },
+                          calculationType: "price",
+                          valueMapping: {},
+                          calculationSteps: [],
+                        });
+                      } else {
+                        handleChange("autoCalculation", undefined);
+                      }
+                    }}
+                  />
+                </div>
+
+                {config.autoCalculation && (
+                  <div className="space-y-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">계산 방식</Label>
+                      <Select
+                        value={config.autoCalculation.mode || "template"}
+                        onValueChange={(v: "template" | "custom") =>
+                          handleChange("autoCalculation", { ...config.autoCalculation, mode: v })
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="template" className="text-xs">템플릿 (가격 계산)</SelectItem>
+                          <SelectItem value="custom" className="text-xs">커스텀 (계산식 빌더)</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">계산 결과 필드</Label>
+                      <Select
+                        value={config.autoCalculation.targetField || ""}
+                        onValueChange={(v) =>
+                          handleChange("autoCalculation", { ...config.autoCalculation, targetField: v })
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue placeholder="필드 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {localFields.map((f) => (
+                            <SelectItem key={f.name} value={f.name} className="text-xs">
+                              {f.label || f.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {config.autoCalculation.mode === "template" && (
+                      <div className="space-y-2 rounded-md border p-2">
+                        <span className="text-[10px] font-medium">필드 매핑</span>
+                        {(
+                          [
+                            ["basePrice", "기준 단가"],
+                            ["discountType", "할인 방식"],
+                            ["discountValue", "할인값"],
+                            ["roundingType", "반올림 방식"],
+                            ["roundingUnit", "반올림 단위"],
+                          ] as const
+                        ).map(([key, label]) => (
+                          <div key={key} className="flex items-center gap-2">
+                            <span className="w-20 text-[10px] text-muted-foreground truncate">{label}</span>
+                            <Select
+                              value={config.autoCalculation?.inputFields?.[key] || ""}
+                              onValueChange={(v) =>
+                                handleChange("autoCalculation", {
+                                  ...config.autoCalculation,
+                                  inputFields: { ...config.autoCalculation?.inputFields, [key]: v },
+                                })
+                              }
+                            >
+                              <SelectTrigger className="h-6 flex-1 text-[10px]">
+                                <SelectValue placeholder="선택" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {localFields.map((f) => (
+                                  <SelectItem key={f.name} value={f.name} className="text-[10px]">
+                                    {f.label || f.name}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </CollapsibleContent>
+            </Collapsible>
+
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2SelectedItemsDetailInputConfigPanel.displayName =
+  "V2SelectedItemsDetailInputConfigPanel";
+
+export default V2SelectedItemsDetailInputConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2SplitLineConfigPanel.tsx b/frontend/components/v2/config-panels/V2SplitLineConfigPanel.tsx
new file mode 100644
index 00000000..58dcb138
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2SplitLineConfigPanel.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+/**
+ * V2SplitLine 설정 패널
+ * 토스식 UX: 리사이즈 Switch -> 두께 카드 선택 -> 색상 설정
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Settings, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const WIDTH_CARDS = [
+  { value: 2, label: "얇게" },
+  { value: 4, label: "보통" },
+  { value: 6, label: "두껍게" },
+  { value: 8, label: "넓게" },
+] as const;
+
+const COLOR_CARDS = [
+  { value: "#e2e8f0", label: "기본", description: "연한 회색" },
+  { value: "#94a3b8", label: "진하게", description: "중간 회색" },
+  { value: "#3b82f6", label: "강조", description: "파란색" },
+] as const;
+
+interface V2SplitLineConfigPanelProps {
+  config: Record<string, any>;
+  onConfigChange: (config: Record<string, any>) => void;
+}
+
+export const V2SplitLineConfigPanel: React.FC<V2SplitLineConfigPanelProps> = ({
+  config,
+  onConfigChange,
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const currentConfig = config || {};
+
+  const updateConfig = (field: string, value: any) => {
+    const newConfig = { ...currentConfig, [field]: value };
+    onConfigChange(newConfig);
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 드래그 리사이즈 ─── */}
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-sm font-medium">드래그 리사이즈</p>
+          <p className="text-[11px] text-muted-foreground">
+            런타임에서 드래그로 좌우 영역을 조절할 수 있어요
+          </p>
+        </div>
+        <Switch
+          checked={currentConfig.resizable ?? true}
+          onCheckedChange={(checked) => updateConfig("resizable", checked)}
+        />
+      </div>
+
+      {/* ─── 2단계: 분할선 두께 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">분할선 두께</p>
+        <div className="grid grid-cols-4 gap-2">
+          {WIDTH_CARDS.map((card) => {
+            const isSelected = (currentConfig.lineWidth || 4) === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("lineWidth", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2 text-center transition-all min-h-[52px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <div
+                  className="mb-1.5 h-6 rounded-sm"
+                  style={{
+                    width: `${card.value}px`,
+                    backgroundColor: currentConfig.lineColor || "#e2e8f0",
+                    border: "1px solid rgba(0,0,0,0.1)",
+                  }}
+                />
+                <span className="text-[10px] font-medium">{card.label}</span>
+              </button>
+            );
+          })}
+        </div>
+        <p className="text-[11px] text-muted-foreground">
+          현재: {currentConfig.lineWidth || 4}px
+        </p>
+      </div>
+
+      {/* ─── 3단계: 분할선 색상 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">분할선 색상</p>
+        <div className="grid grid-cols-3 gap-2">
+          {COLOR_CARDS.map((card) => {
+            const isSelected =
+              (currentConfig.lineColor || "#e2e8f0") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("lineColor", card.value)}
+                className={cn(
+                  "flex flex-col items-center rounded-md border p-2 text-center transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <div
+                  className="mb-1 h-3 w-3 rounded-full"
+                  style={{ backgroundColor: card.value }}
+                />
+                <span className="text-xs font-medium">{card.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 고급 설정: 커스텀 색상 입력 ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 커스텀 색상 입력 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">직접 입력</span>
+              <div className="flex items-center gap-1.5">
+                <input
+                  type="color"
+                  value={currentConfig.lineColor || "#e2e8f0"}
+                  onChange={(e) => updateConfig("lineColor", e.target.value)}
+                  className="h-7 w-7 cursor-pointer rounded border"
+                />
+                <Input
+                  value={currentConfig.lineColor || "#e2e8f0"}
+                  onChange={(e) => updateConfig("lineColor", e.target.value)}
+                  placeholder="#e2e8f0"
+                  className="h-7 w-[100px] text-xs"
+                />
+              </div>
+            </div>
+
+            {/* 커스텀 두께 입력 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">두께 직접 입력 (px)</span>
+              <Input
+                type="number"
+                value={currentConfig.lineWidth || 4}
+                onChange={(e) =>
+                  updateConfig("lineWidth", parseInt(e.target.value) || 4)
+                }
+                className="h-7 w-[80px] text-xs"
+                min={1}
+                max={12}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <p className="text-[10px] text-muted-foreground">
+        캔버스에서 스플릿선의 X 위치가 초기 분할 지점이 돼요. 런타임에서
+        드래그하면 좌우 컴포넌트가 함께 이동해요.
+      </p>
+    </div>
+  );
+};
+
+V2SplitLineConfigPanel.displayName = "V2SplitLineConfigPanel";
+
+export default V2SplitLineConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx b/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx
new file mode 100644
index 00000000..ae5679b6
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2SplitPanelLayoutConfigPanel.tsx
@@ -0,0 +1,2598 @@
+"use client";
+
+/**
+ * V2SplitPanelLayout 설정 패널
+ * 토스식 단계별 UX: 관계타입 카드선택 -> 레이아웃 -> 좌측패널 -> 우측패널 -> 추가탭 -> 고급설정
+ * 기존 SplitPanelLayoutConfigPanel의 모든 기능을 자체 UI로 완전 구현
+ */
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import {
+  Database,
+  Link2,
+  GripVertical,
+  X,
+  Check,
+  ChevronsUpDown,
+  Settings,
+  ChevronDown,
+  Loader2,
+  Columns3,
+  PanelLeft,
+  PanelRight,
+  Layers,
+  Plus,
+  Trash2,
+  ArrowRight,
+  SplitSquareHorizontal,
+  Eye,
+  List,
+  LayoutGrid,
+  Search,
+  Pencil,
+  FileText,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { entityJoinApi } from "@/lib/api/entityJoin";
+import { tableTypeApi } from "@/lib/api/screen";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
+import {
+  DndContext,
+  closestCenter,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+  arrayMove,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type {
+  SplitPanelLayoutConfig,
+  AdditionalTabConfig,
+} from "@/lib/registry/components/v2-split-panel-layout/types";
+import type { TableInfo, ColumnInfo } from "@/types/screen";
+
+// ─── DnD 정렬 가능한 컬럼 행 ───
+function SortableColumnRow({
+  id,
+  col,
+  index,
+  isNumeric,
+  isEntityJoin,
+  onLabelChange,
+  onWidthChange,
+  onFormatChange,
+  onRemove,
+}: {
+  id: string;
+  col: {
+    name: string;
+    label: string;
+    width?: number;
+    format?: any;
+  };
+  index: number;
+  isNumeric: boolean;
+  isEntityJoin?: boolean;
+  onLabelChange: (value: string) => void;
+  onWidthChange: (value: number) => void;
+  onFormatChange: (checked: boolean) => void;
+  onRemove: () => void;
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
+        isDragging && "z-50 opacity-50 shadow-md",
+        isEntityJoin && "border-primary/20 bg-primary/5"
+      )}
+    >
+      <div
+        {...attributes}
+        {...listeners}
+        className="text-muted-foreground hover:text-foreground cursor-grab touch-none"
+      >
+        <GripVertical className="h-3 w-3" />
+      </div>
+      {isEntityJoin ? (
+        <Link2 className="text-primary h-3 w-3 shrink-0" />
+      ) : (
+        <span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">
+          #{index + 1}
+        </span>
+      )}
+      <Input
+        value={col.label}
+        onChange={(e) => onLabelChange(e.target.value)}
+        placeholder="라벨"
+        className="h-6 min-w-0 flex-1 text-xs"
+      />
+      <Input
+        value={col.width || ""}
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || 20)}
+        placeholder="20"
+        className="h-6 w-14 shrink-0 text-xs"
+        min={5}
+        max={100}
+      />
+      <span className="text-muted-foreground shrink-0 text-[10px]">%</span>
+      {isNumeric && (
+        <label
+          className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]"
+          title="천 단위 구분자"
+        >
+          <input
+            type="checkbox"
+            checked={col.format?.thousandSeparator ?? false}
+            onChange={(e) => onFormatChange(e.target.checked)}
+            className="h-3 w-3"
+          />
+          ,
+        </label>
+      )}
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={onRemove}
+        className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0"
+      >
+        <X className="h-3 w-3" />
+      </Button>
+    </div>
+  );
+}
+
+// ─── 섹션 헤더 컴포넌트 ───
+function SectionHeader({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && (
+        <p className="text-muted-foreground text-[10px]">{description}</p>
+      )}
+    </div>
+  );
+}
+
+// ─── 수평 Switch Row (토스 패턴) ───
+function SwitchRow({
+  label,
+  description,
+  checked,
+  onCheckedChange,
+}: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-sm">{label}</p>
+        {description && (
+          <p className="text-[11px] text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+// ─── 관계 타입 카드 정의 ───
+const RELATION_CARDS = [
+  {
+    value: "detail" as const,
+    icon: Eye,
+    title: "선택 시 표시",
+    description: "좌측 선택 시에만 우측 데이터 표시",
+  },
+  {
+    value: "join" as const,
+    icon: Link2,
+    title: "연관 목록",
+    description: "미선택 시 전체 / 선택 시 필터링",
+  },
+] as const;
+
+// ─── 표시 모드 카드 정의 ───
+const DISPLAY_MODE_CARDS = [
+  {
+    value: "list" as const,
+    icon: List,
+    title: "목록",
+    description: "리스트 형태로 표시",
+  },
+  {
+    value: "table" as const,
+    icon: LayoutGrid,
+    title: "테이블",
+    description: "테이블 그리드로 표시",
+  },
+  {
+    value: "custom" as const,
+    icon: FileText,
+    title: "커스텀",
+    description: "자유 배치 모드",
+  },
+] as const;
+
+// ─── 패널 컬럼 설정 서브 컴포넌트 ───
+const PanelColumnSection: React.FC<{
+  panelKey: "leftPanel" | "rightPanel";
+  columns: SplitPanelLayoutConfig["leftPanel"]["columns"];
+  availableColumns: ColumnInfo[];
+  entityJoinData: {
+    availableColumns: Array<{
+      tableName: string;
+      columnName: string;
+      columnLabel: string;
+      dataType: string;
+      joinAlias: string;
+      suggestedLabel: string;
+    }>;
+    joinTables: Array<{
+      tableName: string;
+      currentDisplayColumn: string;
+      joinConfig?: any;
+      availableColumns: Array<{
+        columnName: string;
+        columnLabel: string;
+        dataType: string;
+        inputType?: string;
+      }>;
+    }>;
+  };
+  loadingEntityJoins: boolean;
+  tableName: string;
+  onColumnsChange: (
+    columns: SplitPanelLayoutConfig["leftPanel"]["columns"]
+  ) => void;
+}> = ({
+  columns,
+  availableColumns,
+  entityJoinData,
+  loadingEntityJoins,
+  tableName,
+  onColumnsChange,
+}) => {
+  const currentColumns = columns || [];
+
+  const addColumn = (colInfo: ColumnInfo) => {
+    if (currentColumns.some((c) => c.name === colInfo.columnName)) return;
+    onColumnsChange([
+      ...currentColumns,
+      {
+        name: colInfo.columnName,
+        label:
+          colInfo.displayName || colInfo.columnName,
+        width: 120,
+      },
+    ]);
+  };
+
+  const removeColumn = (name: string) => {
+    onColumnsChange(currentColumns.filter((c) => c.name !== name));
+  };
+
+  const updateColumn = (
+    name: string,
+    updates: Partial<(typeof currentColumns)[0]>
+  ) => {
+    onColumnsChange(
+      currentColumns.map((c) => (c.name === name ? { ...c, ...updates } : c))
+    );
+  };
+
+  const addEntityColumn = (
+    joinCol: (typeof entityJoinData.availableColumns)[0]
+  ) => {
+    if (currentColumns.some((c) => c.name === joinCol.joinAlias)) return;
+    onColumnsChange([
+      ...currentColumns,
+      {
+        name: joinCol.joinAlias,
+        label: joinCol.columnLabel,
+        width: 120,
+        isEntityJoin: true,
+        joinInfo: {
+          sourceTable: tableName,
+          sourceColumn: joinCol.joinAlias.split("_")[0] || "",
+          referenceTable: joinCol.tableName,
+          joinAlias: joinCol.joinAlias,
+        },
+      },
+    ]);
+  };
+
+  const isNumericType = (name: string) => {
+    const col = availableColumns.find((c) => c.columnName === name);
+    if (!col) return false;
+    const dt = (col.dataType || "").toLowerCase();
+    return (
+      dt.includes("int") ||
+      dt.includes("numeric") ||
+      dt.includes("decimal") ||
+      dt.includes("float") ||
+      dt.includes("double")
+    );
+  };
+
+  return (
+    <div className="space-y-3">
+      {/* 컬럼 선택 체크박스 리스트 */}
+      {availableColumns.length > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Columns3 className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs font-medium">컬럼 선택</span>
+          </div>
+          <div className="max-h-40 space-y-0.5 overflow-y-auto rounded-md border p-2">
+            {availableColumns.map((col) => {
+              const isAdded = currentColumns.some(
+                (c) => c.name === col.columnName
+              );
+              return (
+                <div
+                  key={col.columnName}
+                  className={cn(
+                    "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                    isAdded && "bg-primary/10"
+                  )}
+                  onClick={() => {
+                    if (isAdded) removeColumn(col.columnName);
+                    else addColumn(col);
+                  }}
+                >
+                  <Checkbox
+                    checked={isAdded}
+                    className="pointer-events-none h-3.5 w-3.5"
+                  />
+                  <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                  <span className="truncate text-xs">
+                    {col.displayName || col.columnName}
+                  </span>
+                  <span className="ml-auto text-[10px] text-muted-foreground/70">
+                    {col.input_type || col.dataType}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Entity 조인 컬럼 */}
+      {entityJoinData.joinTables.length > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs font-medium">Entity 조인 컬럼</span>
+            {loadingEntityJoins && (
+              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+            )}
+          </div>
+          <div className="space-y-2">
+            {entityJoinData.joinTables.map((joinTable, idx) => (
+              <div key={idx} className="space-y-1">
+                <div className="flex items-center gap-2 text-[10px] font-medium text-primary">
+                  <Link2 className="h-3 w-3" />
+                  <span>{joinTable.tableName}</span>
+                  <Badge variant="outline" className="text-[10px]">
+                    {joinTable.currentDisplayColumn}
+                  </Badge>
+                </div>
+                <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/5 p-2">
+                  {joinTable.availableColumns.map((jCol, jIdx) => {
+                    const matchingJoinColumn =
+                      entityJoinData.availableColumns.find(
+                        (jc) =>
+                          jc.tableName === joinTable.tableName &&
+                          jc.columnName === jCol.columnName
+                      );
+                    if (!matchingJoinColumn) return null;
+                    const isAdded = currentColumns.some(
+                      (c) => c.name === matchingJoinColumn.joinAlias
+                    );
+                    return (
+                      <div
+                        key={jIdx}
+                        className={cn(
+                          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10",
+                          isAdded && "bg-primary/10"
+                        )}
+                        onClick={() => {
+                          if (isAdded)
+                            removeColumn(matchingJoinColumn.joinAlias);
+                          else addEntityColumn(matchingJoinColumn);
+                        }}
+                      >
+                        <Checkbox
+                          checked={isAdded}
+                          className="pointer-events-none h-3.5 w-3.5"
+                        />
+                        <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                        <span className="truncate text-xs">
+                          {jCol.columnLabel}
+                        </span>
+                        <span className="ml-auto text-[10px] text-primary/80">
+                          {jCol.inputType || jCol.dataType}
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 선택된 컬럼 DnD 정렬 */}
+      {currentColumns.length > 0 && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <GripVertical className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs font-medium">
+              선택된 컬럼 ({currentColumns.length}개)
+            </span>
+          </div>
+          <DndContext
+            collisionDetection={closestCenter}
+            onDragEnd={(event: DragEndEvent) => {
+              const { active, over } = event;
+              if (!over || active.id === over.id) return;
+              const cols = [...currentColumns];
+              const oldIdx = cols.findIndex((c) => c.name === active.id);
+              const newIdx = cols.findIndex((c) => c.name === over.id);
+              if (oldIdx !== -1 && newIdx !== -1) {
+                onColumnsChange(arrayMove(cols, oldIdx, newIdx));
+              }
+            }}
+          >
+            <SortableContext
+              items={currentColumns.map((c) => c.name)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-1">
+                {currentColumns.map((col, idx) => (
+                  <SortableColumnRow
+                    key={col.name}
+                    id={col.name}
+                    col={col}
+                    index={idx}
+                    isNumeric={isNumericType(col.name)}
+                    isEntityJoin={!!col.isEntityJoin}
+                    onLabelChange={(v) => updateColumn(col.name, { label: v })}
+                    onWidthChange={(v) => updateColumn(col.name, { width: v })}
+                    onFormatChange={(checked) =>
+                      updateColumn(col.name, {
+                        format: {
+                          ...col.format,
+                          thousandSeparator: checked,
+                        },
+                      })
+                    }
+                    onRemove={() => removeColumn(col.name)}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// ─── 테이블 Combobox ───
+const TableCombobox: React.FC<{
+  value: string;
+  allTables: Array<{ tableName: string; displayName: string }>;
+  screenTableName?: string;
+  loading: boolean;
+  onChange: (tableName: string) => void;
+}> = ({ value, allTables, screenTableName, loading, onChange }) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-8 w-full justify-between text-xs"
+          disabled={loading}
+        >
+          <div className="flex items-center gap-2 truncate">
+            <Database className="h-3 w-3 shrink-0" />
+            <span className="truncate">
+              {loading
+                ? "테이블 로딩 중..."
+                : value
+                  ? allTables.find((t) => t.tableName === value)?.displayName ||
+                    value
+                  : "테이블 선택"}
+            </span>
+          </div>
+          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{ width: "var(--radix-popover-trigger-width)" }}
+        align="start"
+      >
+        <Command>
+          <CommandInput placeholder="테이블 검색..." className="text-xs" />
+          <CommandList>
+            <CommandEmpty className="text-xs">
+              테이블을 찾을 수 없습니다.
+            </CommandEmpty>
+            {screenTableName && (
+              <CommandGroup heading="화면 기본 테이블">
+                <CommandItem
+                  value={`${screenTableName} screen-default`}
+                  onSelect={() => {
+                    onChange(screenTableName);
+                    setOpen(false);
+                  }}
+                  className="text-xs"
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-3 w-3",
+                      value === screenTableName ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  <Database className="text-primary mr-2 h-3.5 w-3.5" />
+                  {allTables.find((t) => t.tableName === screenTableName)
+                    ?.displayName || screenTableName}
+                </CommandItem>
+              </CommandGroup>
+            )}
+            <CommandGroup heading="전체 테이블">
+              {allTables
+                .filter((t) => t.tableName !== screenTableName)
+                .map((table) => (
+                  <CommandItem
+                    key={table.tableName}
+                    value={`${table.tableName} ${table.displayName}`}
+                    onSelect={() => {
+                      onChange(table.tableName);
+                      setOpen(false);
+                    }}
+                    className="text-xs"
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-3 w-3",
+                        value === table.tableName ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <div className="flex flex-col">
+                      <span>{table.displayName}</span>
+                      {table.displayName !== table.tableName && (
+                        <span className="text-[10px] text-muted-foreground/70">
+                          {table.tableName}
+                        </span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+// ─── 메인 컴포넌트 ───
+
+interface V2SplitPanelLayoutConfigPanelProps {
+  config: SplitPanelLayoutConfig;
+  onChange: (config: SplitPanelLayoutConfig) => void;
+  tables?: TableInfo[];
+  screenTableName?: string;
+  menuObjid?: number;
+}
+
+export const V2SplitPanelLayoutConfigPanel: React.FC<
+  V2SplitPanelLayoutConfigPanelProps
+> = ({ config, onChange, tables, screenTableName, menuObjid }) => {
+  // ─── 상태 ───
+  const [allTables, setAllTables] = useState<
+    Array<{ tableName: string; displayName: string }>
+  >([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadedTableColumns, setLoadedTableColumns] = useState<
+    Record<string, ColumnInfo[]>
+  >({});
+  const [loadingColumns, setLoadingColumns] = useState<
+    Record<string, boolean>
+  >({});
+  const [entityJoinColumns, setEntityJoinColumns] = useState<
+    Record<
+      string,
+      {
+        availableColumns: Array<{
+          tableName: string;
+          columnName: string;
+          columnLabel: string;
+          dataType: string;
+          joinAlias: string;
+          suggestedLabel: string;
+        }>;
+        joinTables: Array<{
+          tableName: string;
+          currentDisplayColumn: string;
+          joinConfig?: any;
+          availableColumns: Array<{
+            columnName: string;
+            columnLabel: string;
+            dataType: string;
+            inputType?: string;
+          }>;
+        }>;
+      }
+    >
+  >({});
+  const [loadingEntityJoins, setLoadingEntityJoins] = useState<
+    Record<string, boolean>
+  >({});
+
+  // Collapsible 상태
+  const [leftPanelOpen, setLeftPanelOpen] = useState(false);
+  const [rightPanelOpen, setRightPanelOpen] = useState(false);
+  const [tabsOpen, setTabsOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [leftColumnsOpen, setLeftColumnsOpen] = useState(false);
+  const [rightColumnsOpen, setRightColumnsOpen] = useState(false);
+  const [leftFilterOpen, setLeftFilterOpen] = useState(false);
+  const [rightFilterOpen, setRightFilterOpen] = useState(false);
+
+  // ─── 파생 값 ───
+  const relationshipType = config.rightPanel?.relation?.type || "detail";
+  const leftTableName = config.leftPanel?.tableName || screenTableName || "";
+  const rightTableName = config.rightPanel?.tableName || "";
+
+  const leftTableColumns = useMemo(
+    () => (leftTableName ? loadedTableColumns[leftTableName] || [] : []),
+    [loadedTableColumns, leftTableName]
+  );
+  const rightTableColumns = useMemo(
+    () => (rightTableName ? loadedTableColumns[rightTableName] || [] : []),
+    [loadedTableColumns, rightTableName]
+  );
+
+  const leftEntityJoins = useMemo(
+    () =>
+      entityJoinColumns[leftTableName] || {
+        availableColumns: [],
+        joinTables: [],
+      },
+    [entityJoinColumns, leftTableName]
+  );
+  const rightEntityJoins = useMemo(
+    () =>
+      entityJoinColumns[rightTableName] || {
+        availableColumns: [],
+        joinTables: [],
+      },
+    [entityJoinColumns, rightTableName]
+  );
+
+  // ─── 이벤트 발행 래퍼 ───
+  const handleChange = useCallback(
+    (newConfig: SplitPanelLayoutConfig) => {
+      onChange(newConfig);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent("componentConfigChanged", {
+            detail: { config: newConfig },
+          })
+        );
+      }
+    },
+    [onChange]
+  );
+
+  const updateConfig = useCallback(
+    (updates: Partial<SplitPanelLayoutConfig>) => {
+      handleChange({ ...config, ...updates });
+    },
+    [handleChange, config]
+  );
+
+  const updateLeftPanel = useCallback(
+    (updates: Partial<SplitPanelLayoutConfig["leftPanel"]>) => {
+      handleChange({
+        ...config,
+        leftPanel: { ...config.leftPanel, ...updates },
+      });
+    },
+    [handleChange, config]
+  );
+
+  const updateRightPanel = useCallback(
+    (updates: Partial<SplitPanelLayoutConfig["rightPanel"]>) => {
+      handleChange({
+        ...config,
+        rightPanel: { ...config.rightPanel, ...updates },
+      });
+    },
+    [handleChange, config]
+  );
+
+  // ─── 테이블 목록 로드 ───
+  useEffect(() => {
+    const loadAllTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTables(
+            response.data.map((t: any) => ({
+              tableName: t.tableName || t.table_name,
+              displayName:
+                t.tableLabel || t.displayName || t.tableName || t.table_name,
+            }))
+          );
+        }
+      } catch (error) {
+        console.error("테이블 목록 로드 실패:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadAllTables();
+  }, []);
+
+  // 좌측 테이블 초기값 설정
+  useEffect(() => {
+    if (screenTableName && !config.leftPanel?.tableName) {
+      updateLeftPanel({ tableName: screenTableName });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenTableName]);
+
+  // ─── 테이블 컬럼 로드 ───
+  const loadTableColumns = useCallback(
+    async (tableName: string) => {
+      if (loadedTableColumns[tableName] || loadingColumns[tableName]) return;
+      setLoadingColumns((prev) => ({ ...prev, [tableName]: true }));
+      try {
+        const columnsResponse = await tableTypeApi.getColumns(tableName);
+        const cols = (columnsResponse || []).map((col: any) => ({
+          tableName: col.tableName || tableName,
+          columnName: col.columnName || col.column_name,
+          displayName:
+            col.displayName ||
+            col.columnLabel ||
+            col.column_label ||
+            col.columnName ||
+            col.column_name,
+          dataType: col.dataType || col.data_type || col.dbType || "",
+          dbType: col.dbType || col.dataType || col.data_type || "",
+          webType: col.webType || col.web_type || "text",
+          inputType: col.inputType || "direct",
+          input_type: col.input_type || col.inputType,
+          isNullable: col.isNullable === true || col.isNullable === "Y",
+          isPrimaryKey: col.isPrimaryKey ?? false,
+          referenceTable: col.referenceTable || col.reference_table,
+        })) as ColumnInfo[];
+        setLoadedTableColumns((prev) => ({ ...prev, [tableName]: cols }));
+        await loadEntityJoinColumnsForTable(tableName);
+      } catch (error) {
+        console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
+        setLoadedTableColumns((prev) => ({ ...prev, [tableName]: [] }));
+      } finally {
+        setLoadingColumns((prev) => ({ ...prev, [tableName]: false }));
+      }
+    },
+    [loadedTableColumns, loadingColumns]
+  );
+
+  const loadEntityJoinColumnsForTable = useCallback(
+    async (tableName: string) => {
+      if (entityJoinColumns[tableName] || loadingEntityJoins[tableName]) return;
+      setLoadingEntityJoins((prev) => ({ ...prev, [tableName]: true }));
+      try {
+        const result = await entityJoinApi.getEntityJoinColumns(tableName);
+        setEntityJoinColumns((prev) => ({
+          ...prev,
+          [tableName]: {
+            availableColumns: result.availableColumns || [],
+            joinTables: result.joinTables || [],
+          },
+        }));
+      } catch (error) {
+        console.error(`Entity 조인 컬럼 조회 실패 (${tableName}):`, error);
+        setEntityJoinColumns((prev) => ({
+          ...prev,
+          [tableName]: { availableColumns: [], joinTables: [] },
+        }));
+      } finally {
+        setLoadingEntityJoins((prev) => ({ ...prev, [tableName]: false }));
+      }
+    },
+    [entityJoinColumns, loadingEntityJoins]
+  );
+
+  // 좌측/우측 테이블 변경 시 컬럼 로드
+  useEffect(() => {
+    if (leftTableName) loadTableColumns(leftTableName);
+  }, [leftTableName, loadTableColumns]);
+
+  useEffect(() => {
+    if (rightTableName) loadTableColumns(rightTableName);
+  }, [rightTableName, loadTableColumns]);
+
+  // ─── 추가 탭 관리 ───
+  const addTab = useCallback(() => {
+    const currentTabs = config.rightPanel?.additionalTabs || [];
+    const newTab: AdditionalTabConfig = {
+      tabId: `tab_${Date.now()}`,
+      label: `탭 ${currentTabs.length + 1}`,
+      title: `탭 ${currentTabs.length + 1}`,
+    };
+    updateRightPanel({
+      additionalTabs: [...currentTabs, newTab],
+    });
+  }, [config.rightPanel?.additionalTabs, updateRightPanel]);
+
+  const updateTab = useCallback(
+    (tabIndex: number, updates: Partial<AdditionalTabConfig>) => {
+      const newTabs = [...(config.rightPanel?.additionalTabs || [])];
+      newTabs[tabIndex] = { ...newTabs[tabIndex], ...updates };
+      updateRightPanel({ additionalTabs: newTabs });
+    },
+    [config.rightPanel?.additionalTabs, updateRightPanel]
+  );
+
+  const removeTab = useCallback(
+    (tabIndex: number) => {
+      const newTabs =
+        config.rightPanel?.additionalTabs?.filter((_, i) => i !== tabIndex) ||
+        [];
+      updateRightPanel({ additionalTabs: newTabs });
+    },
+    [config.rightPanel?.additionalTabs, updateRightPanel]
+  );
+
+  // ─── 렌더링 ───
+  return (
+    <div className="space-y-4">
+      {/* ═══════════════════════════════════════ */}
+      {/* 1단계: 관계 타입 선택 (카드 UI)          */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader
+          icon={SplitSquareHorizontal}
+          title="패널 관계 타입"
+          description="좌측 선택 시 우측에 어떻게 데이터를 보여줄지 결정합니다"
+        />
+        <Separator />
+        <div className="grid grid-cols-2 gap-2">
+          {RELATION_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = relationshipType === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() =>
+                  updateRightPanel({
+                    relation: { ...config.rightPanel?.relation, type: card.value },
+                  })
+                }
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="mb-1.5 h-5 w-5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 2단계: 레이아웃 설정                     */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader
+          icon={SplitSquareHorizontal}
+          title="레이아웃"
+          description="패널 비율과 크기 조절 옵션"
+        />
+        <Separator />
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              좌측 패널 너비
+            </span>
+            <span className="text-xs font-medium">
+              {config.splitRatio || 30}%
+            </span>
+          </div>
+          <Slider
+            value={[config.splitRatio || 30]}
+            onValueChange={(value) => updateConfig({ splitRatio: value[0] })}
+            min={20}
+            max={80}
+            step={5}
+          />
+        </div>
+
+        <SwitchRow
+          label="크기 조절 가능"
+          description="사용자가 드래그로 패널 크기를 변경"
+          checked={config.resizable ?? true}
+          onCheckedChange={(checked) => updateConfig({ resizable: checked })}
+        />
+
+        <SwitchRow
+          label="자동 데이터 로드"
+          description="화면 진입 시 자동으로 데이터 로드"
+          checked={config.autoLoad ?? true}
+          onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
+        />
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 3단계: 좌측 패널 (접이식)                */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={leftPanelOpen} onOpenChange={setLeftPanelOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <PanelLeft className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <span className="text-sm font-medium truncate">좌측 패널 (마스터)</span>
+                <p className="text-[10px] text-muted-foreground truncate">
+                  {leftTableName || "미설정"}
+                </p>
+              </div>
+              <Badge variant="secondary" className="text-[10px] h-5">{config.leftPanel?.columns?.length || 0}개 컬럼</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                leftPanelOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-4 rounded-b-lg border border-t-0 p-4">
+            {/* 좌측 패널 제목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs truncate">패널 제목</Label>
+              <Input
+                value={config.leftPanel?.title || ""}
+                onChange={(e) => updateLeftPanel({ title: e.target.value })}
+                placeholder="좌측 패널 제목"
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 좌측 테이블 선택 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs truncate">데이터 테이블</Label>
+              <TableCombobox
+                value={leftTableName}
+                allTables={allTables}
+                screenTableName={screenTableName}
+                loading={loadingTables}
+                onChange={(tableName) =>
+                  updateLeftPanel({ tableName, columns: [] })
+                }
+              />
+              {screenTableName &&
+                leftTableName !== screenTableName && (
+                  <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1 dark:bg-amber-950/30">
+                    <span className="text-[10px] text-amber-700 dark:text-amber-400">
+                      기본 테이블({screenTableName})과 다름
+                    </span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-5 px-1.5 text-[10px] text-amber-700"
+                      onClick={() =>
+                        updateLeftPanel({
+                          tableName: screenTableName,
+                          columns: [],
+                        })
+                      }
+                    >
+                      기본으로
+                    </Button>
+                  </div>
+                )}
+            </div>
+
+            {/* 표시 모드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs truncate">표시 모드</Label>
+              <div className="grid grid-cols-3 gap-1.5">
+                {DISPLAY_MODE_CARDS.map((card) => {
+                  const Icon = card.icon;
+                  const currentMode =
+                    config.leftPanel?.displayMode || "list";
+                  const isSelected = currentMode === card.value;
+                  return (
+                    <button
+                      key={card.value}
+                      type="button"
+                      onClick={() =>
+                        updateLeftPanel({ displayMode: card.value })
+                      }
+                      className={cn(
+                        "flex flex-col items-center rounded-md border p-2 text-center transition-all",
+                        isSelected
+                          ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                          : "border-border hover:border-primary/50"
+                      )}
+                    >
+                      <Icon className="mb-1 h-4 w-4 text-primary" />
+                      <span className="text-[10px] font-medium">
+                        {card.title}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* 좌측 패널 기능 토글 */}
+            <div className="space-y-1">
+              <SwitchRow
+                label="검색"
+                checked={config.leftPanel?.showSearch ?? true}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({ showSearch: checked })
+                }
+              />
+              <SwitchRow
+                label="추가 버튼"
+                checked={config.leftPanel?.showAdd ?? true}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({ showAdd: checked })
+                }
+              />
+              <SwitchRow
+                label="수정 버튼"
+                checked={config.leftPanel?.showEdit ?? false}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({ showEdit: checked })
+                }
+              />
+              <SwitchRow
+                label="삭제 버튼"
+                checked={config.leftPanel?.showDelete ?? false}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({ showDelete: checked })
+                }
+              />
+              <SwitchRow
+                label="하위 항목 추가 버튼"
+                description="각 항목에 + 버튼 표시"
+                checked={config.leftPanel?.showItemAddButton ?? false}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({ showItemAddButton: checked })
+                }
+              />
+            </div>
+
+            {/* 좌측 패널 컬럼 설정 (접이식) */}
+            {config.leftPanel?.displayMode !== "custom" && (
+              <Collapsible
+                open={leftColumnsOpen}
+                onOpenChange={setLeftColumnsOpen}
+              >
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between rounded-md border bg-muted/20 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Columns3 className="h-3.5 w-3.5 text-muted-foreground" />
+                      <span className="text-xs font-medium">
+                        컬럼 설정 ({config.leftPanel?.columns?.length || 0}개)
+                      </span>
+                    </div>
+                    <ChevronDown
+                      className={cn(
+                        "h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
+                        leftColumnsOpen && "rotate-180"
+                      )}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="mt-2 rounded-md border p-3">
+                    {loadingColumns[leftTableName] ? (
+                      <div className="flex items-center gap-2 py-4 text-xs text-muted-foreground">
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        컬럼 로딩 중...
+                      </div>
+                    ) : leftTableColumns.length === 0 ? (
+                      <p className="py-4 text-center text-xs text-muted-foreground">
+                        테이블을 선택하면 컬럼이 표시됩니다
+                      </p>
+                    ) : (
+                      <PanelColumnSection
+                        panelKey="leftPanel"
+                        columns={config.leftPanel?.columns}
+                        availableColumns={leftTableColumns}
+                        entityJoinData={leftEntityJoins}
+                        loadingEntityJoins={
+                          loadingEntityJoins[leftTableName] || false
+                        }
+                        tableName={leftTableName}
+                        onColumnsChange={(columns) =>
+                          updateLeftPanel({ columns })
+                        }
+                      />
+                    )}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+
+            {/* 좌측 패널 데이터 필터 (접이식) */}
+            <Collapsible
+              open={leftFilterOpen}
+              onOpenChange={setLeftFilterOpen}
+            >
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border bg-muted/20 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+                >
+                  <div className="flex items-center gap-2">
+                    <Search className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">데이터 필터</span>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
+                      leftFilterOpen && "rotate-180"
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="mt-2 rounded-md border p-3">
+                  <DataFilterConfigPanel
+                    tableName={leftTableName}
+                    columns={leftTableColumns}
+                    config={config.leftPanel?.dataFilter}
+                    onConfigChange={(dataFilter) =>
+                      updateLeftPanel({ dataFilter })
+                    }
+                  />
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 4단계: 우측 패널 (접이식)                */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={rightPanelOpen} onOpenChange={setRightPanelOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <PanelRight className="h-4 w-4 text-muted-foreground" />
+              <div>
+                <span className="text-sm font-medium truncate">
+                  우측 패널 (디테일)
+                </span>
+                <p className="text-[10px] text-muted-foreground truncate">
+                  {rightTableName || "미설정"}
+                </p>
+              </div>
+              <Badge variant="secondary" className="text-[10px] h-5">{config.rightPanel?.columns?.length || 0}개 컬럼</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                rightPanelOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-4 rounded-b-lg border border-t-0 p-4">
+            {/* 우측 패널 제목 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs truncate">패널 제목</Label>
+              <Input
+                value={config.rightPanel?.title || ""}
+                onChange={(e) => updateRightPanel({ title: e.target.value })}
+                placeholder="우측 패널 제목"
+                className="h-8 text-xs"
+              />
+            </div>
+
+            {/* 우측 테이블 선택 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs truncate">데이터 테이블</Label>
+              <TableCombobox
+                value={rightTableName}
+                allTables={allTables}
+                screenTableName={screenTableName}
+                loading={loadingTables}
+                onChange={(tableName) =>
+                  updateRightPanel({ tableName, columns: [] })
+                }
+              />
+            </div>
+
+            {/* 표시 모드 */}
+            <div className="space-y-1.5">
+              <Label className="text-xs truncate">표시 모드</Label>
+              <div className="grid grid-cols-3 gap-1.5">
+                {DISPLAY_MODE_CARDS.map((card) => {
+                  const Icon = card.icon;
+                  const currentMode =
+                    config.rightPanel?.displayMode || "list";
+                  const isSelected = currentMode === card.value;
+                  return (
+                    <button
+                      key={card.value}
+                      type="button"
+                      onClick={() =>
+                        updateRightPanel({ displayMode: card.value })
+                      }
+                      className={cn(
+                        "flex flex-col items-center rounded-md border p-2 text-center transition-all",
+                        isSelected
+                          ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                          : "border-border hover:border-primary/50"
+                      )}
+                    >
+                      <Icon className="mb-1 h-4 w-4 text-primary" />
+                      <span className="text-[10px] font-medium">
+                        {card.title}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* 연결 키 설정 */}
+            {rightTableName && (
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+                  <span className="text-xs font-medium">테이블 연결 키</span>
+                </div>
+                <p className="text-[10px] text-muted-foreground">
+                  좌측 패널과 우측 패널을 연결할 컬럼을 설정합니다
+                </p>
+
+                {/* 기존 키 목록 */}
+                {(config.rightPanel?.relation?.keys || []).map(
+                  (key, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      <Select
+                        value={key.leftColumn || ""}
+                        onValueChange={(v) => {
+                          const keys = [
+                            ...(config.rightPanel?.relation?.keys || []),
+                          ];
+                          keys[idx] = { ...keys[idx], leftColumn: v };
+                          updateRightPanel({
+                            relation: {
+                              ...config.rightPanel?.relation,
+                              keys,
+                            },
+                          });
+                        }}
+                      >
+                        <SelectTrigger className="h-7 flex-1 text-[11px]">
+                          <SelectValue placeholder="좌측 컬럼" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {leftTableColumns.map((col) => (
+                            <SelectItem
+                              key={col.columnName}
+                              value={col.columnName}
+                            >
+                              {col.displayName || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+
+                      <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+
+                      <Select
+                        value={key.rightColumn || ""}
+                        onValueChange={(v) => {
+                          const keys = [
+                            ...(config.rightPanel?.relation?.keys || []),
+                          ];
+                          keys[idx] = { ...keys[idx], rightColumn: v };
+                          updateRightPanel({
+                            relation: {
+                              ...config.rightPanel?.relation,
+                              keys,
+                            },
+                          });
+                        }}
+                      >
+                        <SelectTrigger className="h-7 flex-1 text-[11px]">
+                          <SelectValue placeholder="우측 컬럼" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {rightTableColumns.map((col) => (
+                            <SelectItem
+                              key={col.columnName}
+                              value={col.columnName}
+                            >
+                              {col.displayName || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          const keys =
+                            config.rightPanel?.relation?.keys?.filter(
+                              (_, i) => i !== idx
+                            ) || [];
+                          updateRightPanel({
+                            relation: {
+                              ...config.rightPanel?.relation,
+                              keys,
+                            },
+                          });
+                        }}
+                        className="text-destructive h-7 w-7 shrink-0 p-0"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  )
+                )}
+
+                {/* 키가 없을 때 단일키 호환 */}
+                {(!config.rightPanel?.relation?.keys ||
+                  config.rightPanel.relation.keys.length === 0) && (
+                  <div className="flex items-center gap-2">
+                    <Select
+                      value={
+                        config.rightPanel?.relation?.leftColumn || ""
+                      }
+                      onValueChange={(v) =>
+                        updateRightPanel({
+                          relation: {
+                            ...config.rightPanel?.relation,
+                            leftColumn: v,
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7 flex-1 text-[11px]">
+                        <SelectValue placeholder="좌측 컬럼" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {leftTableColumns.map((col) => (
+                          <SelectItem
+                            key={col.columnName}
+                            value={col.columnName}
+                          >
+                            {col.displayName || col.columnName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+
+                    <Select
+                      value={
+                        config.rightPanel?.relation?.rightColumn || ""
+                      }
+                      onValueChange={(v) =>
+                        updateRightPanel({
+                          relation: {
+                            ...config.rightPanel?.relation,
+                            rightColumn: v,
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7 flex-1 text-[11px]">
+                        <SelectValue placeholder="우측 컬럼" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {rightTableColumns.map((col) => (
+                          <SelectItem
+                            key={col.columnName}
+                            value={col.columnName}
+                          >
+                            {col.displayName || col.columnName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => {
+                    const currentKeys =
+                      config.rightPanel?.relation?.keys || [];
+                    updateRightPanel({
+                      relation: {
+                        ...config.rightPanel?.relation,
+                        keys: [
+                          ...currentKeys,
+                          { leftColumn: "", rightColumn: "" },
+                        ],
+                      },
+                    });
+                  }}
+                  className="h-7 w-full text-xs"
+                >
+                  <Plus className="mr-1 h-3 w-3" />
+                  복합키 추가
+                </Button>
+              </div>
+            )}
+
+            {/* 우측 패널 기능 토글 */}
+            <div className="space-y-1">
+              <SwitchRow
+                label="검색"
+                checked={config.rightPanel?.showSearch ?? true}
+                onCheckedChange={(checked) =>
+                  updateRightPanel({ showSearch: checked })
+                }
+              />
+              <SwitchRow
+                label="추가 버튼"
+                checked={config.rightPanel?.showAdd ?? true}
+                onCheckedChange={(checked) =>
+                  updateRightPanel({ showAdd: checked })
+                }
+              />
+              <SwitchRow
+                label="수정 버튼"
+                checked={config.rightPanel?.showEdit ?? false}
+                onCheckedChange={(checked) =>
+                  updateRightPanel({ showEdit: checked })
+                }
+              />
+              <SwitchRow
+                label="삭제 버튼"
+                checked={config.rightPanel?.showDelete ?? false}
+                onCheckedChange={(checked) =>
+                  updateRightPanel({ showDelete: checked })
+                }
+              />
+            </div>
+
+            {/* 우측 패널 컬럼 설정 (접이식) */}
+            {config.rightPanel?.displayMode !== "custom" && (
+              <Collapsible
+                open={rightColumnsOpen}
+                onOpenChange={setRightColumnsOpen}
+              >
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex w-full items-center justify-between rounded-md border bg-muted/20 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+                  >
+                    <div className="flex items-center gap-2">
+                      <Columns3 className="h-3.5 w-3.5 text-muted-foreground" />
+                      <span className="text-xs font-medium">
+                        컬럼 설정 (
+                        {config.rightPanel?.columns?.length || 0}개)
+                      </span>
+                    </div>
+                    <ChevronDown
+                      className={cn(
+                        "h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
+                        rightColumnsOpen && "rotate-180"
+                      )}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="mt-2 rounded-md border p-3">
+                    {loadingColumns[rightTableName] ? (
+                      <div className="flex items-center gap-2 py-4 text-xs text-muted-foreground">
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        컬럼 로딩 중...
+                      </div>
+                    ) : rightTableColumns.length === 0 ? (
+                      <p className="py-4 text-center text-xs text-muted-foreground">
+                        테이블을 선택하면 컬럼이 표시됩니다
+                      </p>
+                    ) : (
+                      <PanelColumnSection
+                        panelKey="rightPanel"
+                        columns={config.rightPanel?.columns}
+                        availableColumns={rightTableColumns}
+                        entityJoinData={rightEntityJoins}
+                        loadingEntityJoins={
+                          loadingEntityJoins[rightTableName] || false
+                        }
+                        tableName={rightTableName}
+                        onColumnsChange={(columns) =>
+                          updateRightPanel({ columns })
+                        }
+                      />
+                    )}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+
+            {/* 우측 패널 데이터 필터 (접이식) */}
+            <Collapsible
+              open={rightFilterOpen}
+              onOpenChange={setRightFilterOpen}
+            >
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border bg-muted/20 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+                >
+                  <div className="flex items-center gap-2">
+                    <Search className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">데이터 필터</span>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "h-3.5 w-3.5 text-muted-foreground transition-transform duration-200",
+                      rightFilterOpen && "rotate-180"
+                    )}
+                  />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="mt-2 rounded-md border p-3">
+                  <DataFilterConfigPanel
+                    tableName={rightTableName}
+                    columns={rightTableColumns}
+                    config={config.rightPanel?.dataFilter}
+                    onConfigChange={(dataFilter) =>
+                      updateRightPanel({ dataFilter })
+                    }
+                  />
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {/* 우측 패널 추가 설정 (접이식) */}
+            <Collapsible>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-md border bg-muted/20 px-3 py-2 text-left transition-colors hover:bg-muted/40"
+                >
+                  <div className="flex items-center gap-2">
+                    <Settings className="h-3.5 w-3.5 text-muted-foreground" />
+                    <span className="text-xs font-medium">
+                      추가 설정 (중복제거/버튼)
+                    </span>
+                  </div>
+                  <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="mt-2 space-y-3 rounded-md border p-3">
+                  {/* 중복 제거 */}
+                  <SwitchRow
+                    label="중복 제거"
+                    description="같은 값의 행을 하나로 합쳐서 표시"
+                    checked={
+                      config.rightPanel?.deduplication?.enabled ?? false
+                    }
+                    onCheckedChange={(checked) =>
+                      updateRightPanel({
+                        deduplication: {
+                          ...config.rightPanel?.deduplication,
+                          enabled: checked,
+                          groupByColumn:
+                            config.rightPanel?.deduplication?.groupByColumn ||
+                            "",
+                          keepStrategy:
+                            config.rightPanel?.deduplication?.keepStrategy ||
+                            "latest",
+                        },
+                      })
+                    }
+                  />
+
+                  {config.rightPanel?.deduplication?.enabled && (
+                    <div className="ml-4 space-y-2 border-l-2 border-primary/20 pl-3">
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          기준 컬럼
+                        </span>
+                        <Select
+                          value={
+                            config.rightPanel?.deduplication
+                              ?.groupByColumn || ""
+                          }
+                          onValueChange={(v) =>
+                            updateRightPanel({
+                              deduplication: {
+                                ...config.rightPanel?.deduplication!,
+                                groupByColumn: v,
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7 w-[140px] text-[11px]">
+                            <SelectValue placeholder="컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {rightTableColumns.map((col) => (
+                              <SelectItem
+                                key={col.columnName}
+                                value={col.columnName}
+                              >
+                                {col.displayName || col.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          유지 전략
+                        </span>
+                        <Select
+                          value={
+                            config.rightPanel?.deduplication
+                              ?.keepStrategy || "latest"
+                          }
+                          onValueChange={(v) =>
+                            updateRightPanel({
+                              deduplication: {
+                                ...config.rightPanel?.deduplication!,
+                                keepStrategy: v as any,
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7 w-[140px] text-[11px]">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="latest">
+                              최신
+                            </SelectItem>
+                            <SelectItem value="earliest">
+                              최초
+                            </SelectItem>
+                            <SelectItem value="base_price">
+                              기본가
+                            </SelectItem>
+                            <SelectItem value="current_date">
+                              현재 날짜
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  )}
+
+                  <Separator />
+
+                  {/* 수정 버튼 설정 */}
+                  <SwitchRow
+                    label="수정 버튼 모달"
+                    description="별도 화면으로 수정 모달 표시"
+                    checked={
+                      config.rightPanel?.editButton?.mode === "modal"
+                    }
+                    onCheckedChange={(checked) =>
+                      updateRightPanel({
+                        editButton: {
+                          ...config.rightPanel?.editButton,
+                          enabled:
+                            config.rightPanel?.editButton?.enabled ?? true,
+                          mode: checked ? "modal" : "auto",
+                        },
+                      })
+                    }
+                  />
+
+                  {config.rightPanel?.editButton?.mode === "modal" && (
+                    <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          모달 화면 ID
+                        </span>
+                        <Input
+                          type="number"
+                          value={
+                            config.rightPanel?.editButton?.modalScreenId ||
+                            ""
+                          }
+                          onChange={(e) =>
+                            updateRightPanel({
+                              editButton: {
+                                ...config.rightPanel?.editButton!,
+                                modalScreenId:
+                                  parseInt(e.target.value) || undefined,
+                              },
+                            })
+                          }
+                          placeholder="화면 ID"
+                          className="h-7 w-[100px] text-xs"
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 추가 버튼 설정 */}
+                  <SwitchRow
+                    label="추가 버튼 모달"
+                    description="별도 화면으로 추가 모달 표시"
+                    checked={
+                      config.rightPanel?.addButton?.mode === "modal"
+                    }
+                    onCheckedChange={(checked) =>
+                      updateRightPanel({
+                        addButton: {
+                          ...config.rightPanel?.addButton,
+                          enabled:
+                            config.rightPanel?.addButton?.enabled ?? true,
+                          mode: checked ? "modal" : "auto",
+                        },
+                      })
+                    }
+                  />
+
+                  {config.rightPanel?.addButton?.mode === "modal" && (
+                    <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          모달 화면 ID
+                        </span>
+                        <Input
+                          type="number"
+                          value={
+                            config.rightPanel?.addButton?.modalScreenId || ""
+                          }
+                          onChange={(e) =>
+                            updateRightPanel({
+                              addButton: {
+                                ...config.rightPanel?.addButton!,
+                                modalScreenId:
+                                  parseInt(e.target.value) || undefined,
+                              },
+                            })
+                          }
+                          placeholder="화면 ID"
+                          className="h-7 w-[100px] text-xs"
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 삭제 버튼 설정 */}
+                  <SwitchRow
+                    label="삭제 확인 메시지"
+                    checked={!!config.rightPanel?.deleteButton?.confirmMessage}
+                    onCheckedChange={(checked) =>
+                      updateRightPanel({
+                        deleteButton: {
+                          ...config.rightPanel?.deleteButton,
+                          enabled:
+                            config.rightPanel?.deleteButton?.enabled ?? true,
+                          confirmMessage: checked
+                            ? "정말 삭제하시겠습니까?"
+                            : undefined,
+                        },
+                      })
+                    }
+                  />
+
+                  {config.rightPanel?.deleteButton?.confirmMessage && (
+                    <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                      <Input
+                        value={
+                          config.rightPanel.deleteButton.confirmMessage
+                        }
+                        onChange={(e) =>
+                          updateRightPanel({
+                            deleteButton: {
+                              ...config.rightPanel?.deleteButton!,
+                              confirmMessage: e.target.value,
+                            },
+                          })
+                        }
+                        placeholder="삭제 확인 메시지"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  )}
+
+                  <Separator />
+
+                  {/* 추가 시 대상 테이블 (N:M 관계) */}
+                  <div className="space-y-2">
+                    <span className="text-xs font-medium">
+                      추가 대상 설정 (N:M)
+                    </span>
+                    <p className="text-[10px] text-muted-foreground">
+                      추가 버튼 클릭 시 실제 INSERT할 테이블을 지정합니다
+                    </p>
+                    <div className="space-y-1.5">
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          대상 테이블
+                        </span>
+                        <Input
+                          value={
+                            config.rightPanel?.addConfig?.targetTable || ""
+                          }
+                          onChange={(e) =>
+                            updateRightPanel({
+                              addConfig: {
+                                ...config.rightPanel?.addConfig,
+                                targetTable: e.target.value || undefined,
+                              },
+                            })
+                          }
+                          placeholder="미설정 시 우측 테이블"
+                          className="h-7 w-[160px] text-xs"
+                        />
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          좌측값 컬럼
+                        </span>
+                        <Input
+                          value={
+                            config.rightPanel?.addConfig?.leftPanelColumn ||
+                            ""
+                          }
+                          onChange={(e) =>
+                            updateRightPanel({
+                              addConfig: {
+                                ...config.rightPanel?.addConfig,
+                                leftPanelColumn: e.target.value || undefined,
+                              },
+                            })
+                          }
+                          placeholder="좌측 컬럼명"
+                          className="h-7 w-[160px] text-xs"
+                        />
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-muted-foreground">
+                          대상 컬럼
+                        </span>
+                        <Input
+                          value={
+                            config.rightPanel?.addConfig?.targetColumn || ""
+                          }
+                          onChange={(e) =>
+                            updateRightPanel({
+                              addConfig: {
+                                ...config.rightPanel?.addConfig,
+                                targetColumn: e.target.value || undefined,
+                              },
+                            })
+                          }
+                          placeholder="대상 컬럼명"
+                          className="h-7 w-[160px] text-xs"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 테이블 모드 설정 */}
+                  {config.rightPanel?.displayMode === "table" && (
+                    <>
+                      <Separator />
+                      <div className="space-y-1">
+                        <span className="text-xs font-medium">
+                          테이블 옵션
+                        </span>
+                        <SwitchRow
+                          label="체크박스"
+                          checked={
+                            config.rightPanel?.tableConfig?.showCheckbox ??
+                            false
+                          }
+                          onCheckedChange={(checked) =>
+                            updateRightPanel({
+                              tableConfig: {
+                                ...config.rightPanel?.tableConfig,
+                                showCheckbox: checked,
+                              },
+                            })
+                          }
+                        />
+                        <SwitchRow
+                          label="행 번호"
+                          checked={
+                            config.rightPanel?.tableConfig?.showRowNumber ??
+                            false
+                          }
+                          onCheckedChange={(checked) =>
+                            updateRightPanel({
+                              tableConfig: {
+                                ...config.rightPanel?.tableConfig,
+                                showRowNumber: checked,
+                              },
+                            })
+                          }
+                        />
+                        <SwitchRow
+                          label="줄무늬"
+                          checked={
+                            config.rightPanel?.tableConfig?.striped ?? false
+                          }
+                          onCheckedChange={(checked) =>
+                            updateRightPanel({
+                              tableConfig: {
+                                ...config.rightPanel?.tableConfig,
+                                striped: checked,
+                              },
+                            })
+                          }
+                        />
+                        <SwitchRow
+                          label="헤더 고정"
+                          checked={
+                            config.rightPanel?.tableConfig?.stickyHeader ??
+                            false
+                          }
+                          onCheckedChange={(checked) =>
+                            updateRightPanel({
+                              tableConfig: {
+                                ...config.rightPanel?.tableConfig,
+                                stickyHeader: checked,
+                              },
+                            })
+                          }
+                        />
+                      </div>
+                    </>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 5단계: 추가 탭 (접이식)                  */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={tabsOpen} onOpenChange={setTabsOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Layers className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">추가 탭</span>
+              <Badge variant="secondary" className="text-[10px] h-5">{config.rightPanel?.additionalTabs?.length || 0}개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                tabsOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+            {/* 탭 목록 */}
+            {(config.rightPanel?.additionalTabs || []).map(
+              (tab, tabIndex) => (
+                <div
+                  key={tab.tabId}
+                  className="space-y-3 rounded-lg border p-3"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium">
+                      {tab.label || `탭 ${tabIndex + 1}`}
+                    </span>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeTab(tabIndex)}
+                      className="text-destructive h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-2">
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">탭 라벨</Label>
+                      <Input
+                        value={tab.label}
+                        onChange={(e) =>
+                          updateTab(tabIndex, { label: e.target.value })
+                        }
+                        placeholder="탭 이름"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                    <div className="space-y-1">
+                      <Label className="text-[10px]">패널 제목</Label>
+                      <Input
+                        value={tab.title}
+                        onChange={(e) =>
+                          updateTab(tabIndex, { title: e.target.value })
+                        }
+                        placeholder="패널 제목"
+                        className="h-7 text-xs"
+                      />
+                    </div>
+                  </div>
+
+                  {/* 탭 테이블 선택 */}
+                  <div className="space-y-1">
+                    <Label className="text-[10px]">테이블</Label>
+                    <TableCombobox
+                      value={tab.tableName || ""}
+                      allTables={allTables}
+                      screenTableName={screenTableName}
+                      loading={loadingTables}
+                      onChange={(tableName) => {
+                        updateTab(tabIndex, {
+                          tableName,
+                          columns: [],
+                        });
+                        if (tableName) loadTableColumns(tableName);
+                      }}
+                    />
+                  </div>
+
+                  {/* 탭 표시 모드 */}
+                  <div className="flex items-center justify-between">
+                    <span className="text-[10px] text-muted-foreground">
+                      표시 모드
+                    </span>
+                    <Select
+                      value={tab.displayMode || "table"}
+                      onValueChange={(v) =>
+                        updateTab(tabIndex, {
+                          displayMode: v as "list" | "table",
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7 w-[100px] text-[11px]">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="list">목록</SelectItem>
+                        <SelectItem value="table">테이블</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {/* 탭 연결 키 */}
+                  {tab.tableName && (
+                    <div className="space-y-1.5">
+                      <span className="text-[10px] font-medium">연결 키</span>
+                      <div className="flex items-center gap-2">
+                        <Select
+                          value={tab.relation?.leftColumn || ""}
+                          onValueChange={(v) =>
+                            updateTab(tabIndex, {
+                              relation: {
+                                ...tab.relation,
+                                leftColumn: v,
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7 flex-1 text-[11px]">
+                            <SelectValue placeholder="좌측 컬럼" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {leftTableColumns.map((col) => (
+                              <SelectItem
+                                key={col.columnName}
+                                value={col.columnName}
+                              >
+                                {col.displayName || col.columnName}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+                        <Select
+                          value={tab.relation?.rightColumn || ""}
+                          onValueChange={(v) =>
+                            updateTab(tabIndex, {
+                              relation: {
+                                ...tab.relation,
+                                rightColumn: v,
+                              },
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7 flex-1 text-[11px]">
+                            <SelectValue placeholder="우측 컬럼" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {(loadedTableColumns[tab.tableName] || []).map(
+                              (col) => (
+                                <SelectItem
+                                  key={col.columnName}
+                                  value={col.columnName}
+                                >
+                                  {col.displayName || col.columnName}
+                                </SelectItem>
+                              )
+                            )}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 탭 기능 토글 */}
+                  <div className="space-y-0.5">
+                    <SwitchRow
+                      label="검색"
+                      checked={tab.showSearch ?? false}
+                      onCheckedChange={(checked) =>
+                        updateTab(tabIndex, { showSearch: checked })
+                      }
+                    />
+                    <SwitchRow
+                      label="추가"
+                      checked={tab.showAdd ?? false}
+                      onCheckedChange={(checked) =>
+                        updateTab(tabIndex, { showAdd: checked })
+                      }
+                    />
+                    <SwitchRow
+                      label="삭제"
+                      checked={tab.showDelete ?? false}
+                      onCheckedChange={(checked) =>
+                        updateTab(tabIndex, { showDelete: checked })
+                      }
+                    />
+                  </div>
+                </div>
+              )
+            )}
+
+            {/* 탭 추가 버튼 */}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addTab}
+              className="h-8 w-full text-xs"
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              탭 추가
+            </Button>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 6단계: 고급 설정 (기본 접힘)             */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">고급 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">8개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="space-y-3 rounded-b-lg border border-t-0 p-4">
+            <SwitchRow
+              label="선택 동기화"
+              description="좌우 패널 간 선택 항목 동기화"
+              checked={config.syncSelection ?? false}
+              onCheckedChange={(checked) =>
+                updateConfig({ syncSelection: checked })
+              }
+            />
+
+            <Separator />
+
+            {/* 최소 너비 설정 */}
+            <div className="space-y-2">
+              <span className="text-xs font-medium">최소 너비 (px)</span>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="space-y-1">
+                  <Label className="text-[10px]">좌측</Label>
+                  <Input
+                    type="number"
+                    value={config.minLeftWidth || 200}
+                    onChange={(e) =>
+                      updateConfig({
+                        minLeftWidth: parseInt(e.target.value) || 200,
+                      })
+                    }
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[10px]">우측</Label>
+                  <Input
+                    type="number"
+                    value={config.minRightWidth || 300}
+                    onChange={(e) =>
+                      updateConfig({
+                        minRightWidth: parseInt(e.target.value) || 300,
+                      })
+                    }
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <Separator />
+
+            {/* 좌측 패널 하위 항목 추가 설정 */}
+            {config.leftPanel?.showItemAddButton && (
+              <div className="space-y-2">
+                <span className="text-xs font-medium">
+                  하위 항목 추가 설정
+                </span>
+                <div className="space-y-1.5">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-muted-foreground">
+                      부모 컬럼
+                    </span>
+                    <Input
+                      value={
+                        config.leftPanel?.itemAddConfig?.parentColumn || ""
+                      }
+                      onChange={(e) =>
+                        updateLeftPanel({
+                          itemAddConfig: {
+                            ...config.leftPanel?.itemAddConfig,
+                            parentColumn: e.target.value,
+                            sourceColumn:
+                              config.leftPanel?.itemAddConfig?.sourceColumn ||
+                              "",
+                          },
+                        })
+                      }
+                      placeholder="예: parent_dept_code"
+                      className="h-7 w-[160px] text-xs"
+                    />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs text-muted-foreground">
+                      소스 컬럼
+                    </span>
+                    <Input
+                      value={
+                        config.leftPanel?.itemAddConfig?.sourceColumn || ""
+                      }
+                      onChange={(e) =>
+                        updateLeftPanel({
+                          itemAddConfig: {
+                            ...config.leftPanel?.itemAddConfig!,
+                            sourceColumn: e.target.value,
+                          },
+                        })
+                      }
+                      placeholder="예: dept_code"
+                      className="h-7 w-[160px] text-xs"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 좌측 패널 테이블 모드 설정 */}
+            {config.leftPanel?.displayMode === "table" && (
+              <div className="space-y-1">
+                <span className="text-xs font-medium">좌측 테이블 옵션</span>
+                <SwitchRow
+                  label="체크박스"
+                  checked={
+                    config.leftPanel?.tableConfig?.showCheckbox ?? false
+                  }
+                  onCheckedChange={(checked) =>
+                    updateLeftPanel({
+                      tableConfig: {
+                        ...config.leftPanel?.tableConfig,
+                        showCheckbox: checked,
+                      },
+                    })
+                  }
+                />
+                <SwitchRow
+                  label="행 번호"
+                  checked={
+                    config.leftPanel?.tableConfig?.showRowNumber ?? false
+                  }
+                  onCheckedChange={(checked) =>
+                    updateLeftPanel({
+                      tableConfig: {
+                        ...config.leftPanel?.tableConfig,
+                        showRowNumber: checked,
+                      },
+                    })
+                  }
+                />
+                <SwitchRow
+                  label="줄무늬"
+                  checked={config.leftPanel?.tableConfig?.striped ?? false}
+                  onCheckedChange={(checked) =>
+                    updateLeftPanel({
+                      tableConfig: {
+                        ...config.leftPanel?.tableConfig,
+                        striped: checked,
+                      },
+                    })
+                  }
+                />
+                <SwitchRow
+                  label="헤더 고정"
+                  checked={
+                    config.leftPanel?.tableConfig?.stickyHeader ?? false
+                  }
+                  onCheckedChange={(checked) =>
+                    updateLeftPanel({
+                      tableConfig: {
+                        ...config.leftPanel?.tableConfig,
+                        stickyHeader: checked,
+                      },
+                    })
+                  }
+                />
+              </div>
+            )}
+
+            {/* 좌측 패널 수정/추가 버튼 모달 설정 */}
+            <Separator />
+            <div className="space-y-1">
+              <span className="text-xs font-medium">좌측 버튼 모달 설정</span>
+              <SwitchRow
+                label="수정 버튼 모달"
+                checked={config.leftPanel?.editButton?.mode === "modal"}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({
+                    editButton: {
+                      ...config.leftPanel?.editButton,
+                      enabled:
+                        config.leftPanel?.editButton?.enabled ?? true,
+                      mode: checked ? "modal" : "auto",
+                    },
+                  })
+                }
+              />
+              {config.leftPanel?.editButton?.mode === "modal" && (
+                <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                  <div className="flex items-center justify-between py-1">
+                    <span className="text-xs text-muted-foreground">
+                      모달 화면 ID
+                    </span>
+                    <Input
+                      type="number"
+                      value={
+                        config.leftPanel?.editButton?.modalScreenId || ""
+                      }
+                      onChange={(e) =>
+                        updateLeftPanel({
+                          editButton: {
+                            ...config.leftPanel?.editButton!,
+                            modalScreenId:
+                              parseInt(e.target.value) || undefined,
+                          },
+                        })
+                      }
+                      placeholder="화면 ID"
+                      className="h-7 w-[100px] text-xs"
+                    />
+                  </div>
+                </div>
+              )}
+
+              <SwitchRow
+                label="추가 버튼 모달"
+                checked={config.leftPanel?.addButton?.mode === "modal"}
+                onCheckedChange={(checked) =>
+                  updateLeftPanel({
+                    addButton: {
+                      ...config.leftPanel?.addButton,
+                      enabled:
+                        config.leftPanel?.addButton?.enabled ?? true,
+                      mode: checked ? "modal" : "auto",
+                    },
+                  })
+                }
+              />
+              {config.leftPanel?.addButton?.mode === "modal" && (
+                <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                  <div className="flex items-center justify-between py-1">
+                    <span className="text-xs text-muted-foreground">
+                      모달 화면 ID
+                    </span>
+                    <Input
+                      type="number"
+                      value={
+                        config.leftPanel?.addButton?.modalScreenId || ""
+                      }
+                      onChange={(e) =>
+                        updateLeftPanel({
+                          addButton: {
+                            ...config.leftPanel?.addButton!,
+                            modalScreenId:
+                              parseInt(e.target.value) || undefined,
+                          },
+                        })
+                      }
+                      placeholder="화면 ID"
+                      className="h-7 w-[100px] text-xs"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* 패널 헤더 높이 */}
+            <Separator />
+            <div className="space-y-2">
+              <span className="text-xs font-medium">패널 헤더 높이 (px)</span>
+              <div className="grid grid-cols-2 gap-2">
+                <div className="space-y-1">
+                  <Label className="text-[10px]">좌측</Label>
+                  <Input
+                    type="number"
+                    value={config.leftPanel?.panelHeaderHeight || ""}
+                    onChange={(e) =>
+                      updateLeftPanel({
+                        panelHeaderHeight:
+                          parseInt(e.target.value) || undefined,
+                      })
+                    }
+                    placeholder="자동"
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label className="text-[10px]">우측</Label>
+                  <Input
+                    type="number"
+                    value={config.rightPanel?.panelHeaderHeight || ""}
+                    onChange={(e) =>
+                      updateRightPanel({
+                        panelHeaderHeight:
+                          parseInt(e.target.value) || undefined,
+                      })
+                    }
+                    placeholder="자동"
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2SplitPanelLayoutConfigPanel.displayName = "V2SplitPanelLayoutConfigPanel";
+
+export default V2SplitPanelLayoutConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2StatusCountConfigPanel.tsx b/frontend/components/v2/config-panels/V2StatusCountConfigPanel.tsx
new file mode 100644
index 00000000..cc31be06
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2StatusCountConfigPanel.tsx
@@ -0,0 +1,679 @@
+"use client";
+
+/**
+ * V2StatusCount 설정 패널
+ * 토스식 단계별 UX: 데이터 소스 -> 컬럼 매핑 -> 상태 항목 관리 -> 표시 설정(접힘)
+ * 기존 StatusCountConfigPanel의 모든 기능을 자체 UI로 완전 구현
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table2,
+  Columns3,
+  Check,
+  ChevronsUpDown,
+  Loader2,
+  Link2,
+  Plus,
+  Trash2,
+  BarChart3,
+  Type,
+  Maximize2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import { entityJoinApi, type EntityJoinConfig } from "@/lib/api/entityJoin";
+import { apiClient } from "@/lib/api/client";
+import type { StatusCountConfig, StatusCountItem } from "@/lib/registry/components/v2-status-count/types";
+import { STATUS_COLOR_MAP } from "@/lib/registry/components/v2-status-count/types";
+
+const COLOR_OPTIONS = Object.keys(STATUS_COLOR_MAP);
+
+// ─── 카드 크기 선택 카드 ───
+const SIZE_CARDS = [
+  { value: "sm", title: "작게", description: "컴팩트" },
+  { value: "md", title: "보통", description: "기본 크기" },
+  { value: "lg", title: "크게", description: "넓은 카드" },
+] as const;
+
+// ─── 섹션 헤더 컴포넌트 ───
+function SectionHeader({ icon: Icon, title, description }: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && <p className="text-muted-foreground text-[10px]">{description}</p>}
+    </div>
+  );
+}
+
+// ─── 수평 라벨 + 컨트롤 Row ───
+function LabeledRow({ label, description, children }: {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        {description && <p className="text-[10px] text-muted-foreground">{description}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+interface V2StatusCountConfigPanelProps {
+  config: StatusCountConfig;
+  onChange: (config: Partial<StatusCountConfig>) => void;
+}
+
+export const V2StatusCountConfigPanel: React.FC<V2StatusCountConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  // componentConfigChanged 이벤트 발행 래퍼
+  const handleChange = useCallback((newConfig: Partial<StatusCountConfig>) => {
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, ...newConfig } },
+        })
+      );
+    }
+  }, [onChange, config]);
+
+  const updateField = useCallback((key: keyof StatusCountConfig, value: any) => {
+    handleChange({ [key]: value });
+  }, [handleChange]);
+
+  // ─── 상태 ───
+  const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
+  const [columns, setColumns] = useState<Array<{ columnName: string; columnLabel: string }>>([]);
+  const [entityJoins, setEntityJoins] = useState<EntityJoinConfig[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [loadingJoins, setLoadingJoins] = useState(false);
+
+  const [statusCategoryValues, setStatusCategoryValues] = useState<Array<{ value: string; label: string }>>([]);
+  const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
+
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+  const [statusColumnOpen, setStatusColumnOpen] = useState(false);
+  const [relationOpen, setRelationOpen] = useState(false);
+  const items = config.items || [];
+
+  // ─── 테이블 목록 로드 ───
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const result = await tableTypeApi.getTables();
+        setTables(
+          (result || []).map((t: any) => ({
+            tableName: t.tableName || t.table_name,
+            displayName: t.displayName || t.tableName || t.table_name,
+          }))
+        );
+      } catch (err) {
+        console.error("테이블 목록 로드 실패:", err);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // ─── 선택된 테이블의 컬럼 + 엔티티 조인 로드 ───
+  useEffect(() => {
+    if (!config.tableName) {
+      setColumns([]);
+      setEntityJoins([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const result = await tableTypeApi.getColumns(config.tableName);
+        setColumns(
+          (result || []).map((c: any) => ({
+            columnName: c.columnName || c.column_name,
+            columnLabel: c.columnLabel || c.column_label || c.displayName || c.columnName || c.column_name,
+          }))
+        );
+      } catch (err) {
+        console.error("컬럼 목록 로드 실패:", err);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+
+    const loadEntityJoins = async () => {
+      setLoadingJoins(true);
+      try {
+        const result = await entityJoinApi.getEntityJoinConfigs(config.tableName);
+        setEntityJoins(result?.joinConfigs || []);
+      } catch (err) {
+        console.error("엔티티 조인 설정 로드 실패:", err);
+        setEntityJoins([]);
+      } finally {
+        setLoadingJoins(false);
+      }
+    };
+
+    loadColumns();
+    loadEntityJoins();
+  }, [config.tableName]);
+
+  // ─── 상태 컬럼의 카테고리 값 로드 ───
+  useEffect(() => {
+    if (!config.tableName || !config.statusColumn) {
+      setStatusCategoryValues([]);
+      return;
+    }
+
+    const loadCategoryValues = async () => {
+      setLoadingCategoryValues(true);
+      try {
+        const response = await apiClient.get(
+          `/table-categories/${config.tableName}/${config.statusColumn}/values`
+        );
+        if (response.data?.success && response.data?.data) {
+          const flatValues: Array<{ value: string; label: string }> = [];
+          const flatten = (categoryItems: any[]) => {
+            for (const item of categoryItems) {
+              flatValues.push({
+                value: item.valueCode || item.value_code,
+                label: item.valueLabel || item.value_label,
+              });
+              if (item.children?.length > 0) flatten(item.children);
+            }
+          };
+          flatten(response.data.data);
+          setStatusCategoryValues(flatValues);
+        }
+      } catch {
+        setStatusCategoryValues([]);
+      } finally {
+        setLoadingCategoryValues(false);
+      }
+    };
+
+    loadCategoryValues();
+  }, [config.tableName, config.statusColumn]);
+
+  // ─── 엔티티 관계 Combobox 아이템 ───
+  const relationComboItems = useMemo(() => {
+    return entityJoins.map((ej) => {
+      const refTableLabel = tables.find((t) => t.tableName === ej.referenceTable)?.displayName || ej.referenceTable;
+      return {
+        value: `${ej.sourceColumn}::${ej.referenceTable}.${ej.referenceColumn}`,
+        label: `${ej.sourceColumn} -> ${refTableLabel}`,
+        sublabel: `${ej.referenceTable}.${ej.referenceColumn}`,
+      };
+    });
+  }, [entityJoins, tables]);
+
+  const currentRelationValue = useMemo(() => {
+    if (!config.relationColumn) return "";
+    return relationComboItems.find((item) => {
+      const [srcCol] = item.value.split("::");
+      return srcCol === config.relationColumn;
+    })?.value || "";
+  }, [config.relationColumn, relationComboItems]);
+
+  // ─── 상태 항목 관리 ───
+  const addItem = useCallback(() => {
+    updateField("items", [...items, { value: "", label: "새 상태", color: "gray" }]);
+  }, [items, updateField]);
+
+  const removeItem = useCallback((index: number) => {
+    updateField("items", items.filter((_: StatusCountItem, i: number) => i !== index));
+  }, [items, updateField]);
+
+  const updateItem = useCallback((index: number, key: keyof StatusCountItem, value: string) => {
+    const newItems = [...items];
+    newItems[index] = { ...newItems[index], [key]: value };
+    updateField("items", newItems);
+  }, [items, updateField]);
+
+  // ─── 테이블 변경 핸들러 ───
+  const handleTableChange = useCallback((newTableName: string) => {
+    handleChange({ tableName: newTableName, statusColumn: "", relationColumn: "", parentColumn: "" });
+    setTableComboboxOpen(false);
+  }, [handleChange]);
+
+  // ─── 렌더링 ───
+  return (
+    <div className="space-y-4">
+      {/* ═══════════════════════════════════════ */}
+      {/* 1단계: 데이터 소스 (테이블 선택)         */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Table2} title="데이터 소스" description="상태를 집계할 테이블을 선택하세요" />
+        <Separator />
+
+        {/* 제목 */}
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <Type className="h-3.5 w-3.5 text-muted-foreground" />
+            <span className="text-xs font-medium truncate">제목</span>
+          </div>
+          <Input
+            value={config.title || ""}
+            onChange={(e) => updateField("title", e.target.value)}
+            placeholder="예: 일련번호 현황"
+            className="h-7 text-xs"
+          />
+        </div>
+
+        {/* 테이블 선택 */}
+        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={tableComboboxOpen}
+              className="h-8 w-full justify-between text-xs"
+              disabled={loadingTables}
+            >
+              <div className="flex items-center gap-2 truncate">
+                <Table2 className="h-3 w-3 shrink-0" />
+                <span className="truncate">
+                  {loadingTables
+                    ? "테이블 로딩 중..."
+                    : config.tableName
+                      ? tables.find((t) => t.tableName === config.tableName)?.displayName || config.tableName
+                      : "테이블 선택"}
+                </span>
+              </div>
+              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="text-xs" />
+              <CommandList>
+                <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {tables.map((table) => (
+                    <CommandItem
+                      key={table.tableName}
+                      value={`${table.displayName} ${table.tableName}`}
+                      onSelect={() => handleTableChange(table.tableName)}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn("mr-2 h-3 w-3", config.tableName === table.tableName ? "opacity-100" : "opacity-0")}
+                      />
+                      <div className="flex flex-col">
+                        <span>{table.displayName}</span>
+                        {table.displayName !== table.tableName && (
+                          <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 2단계: 컬럼 매핑                         */}
+      {/* ═══════════════════════════════════════ */}
+      {config.tableName && (
+        <div className="space-y-3">
+          <SectionHeader icon={Columns3} title="컬럼 매핑" description="상태 컬럼과 부모 관계를 설정하세요" />
+          <Separator />
+
+          {/* 상태 컬럼 */}
+          <div className="space-y-1">
+            <span className="text-xs font-medium truncate">상태 컬럼 *</span>
+            <Popover open={statusColumnOpen} onOpenChange={setStatusColumnOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={statusColumnOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={loadingColumns}
+                >
+                  <span className="truncate">
+                    {loadingColumns
+                      ? "컬럼 로딩 중..."
+                      : config.statusColumn
+                        ? columns.find((c) => c.columnName === config.statusColumn)?.columnLabel || config.statusColumn
+                        : "상태 컬럼 선택"}
+                  </span>
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command>
+                  <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      {columns.map((col) => (
+                        <CommandItem
+                          key={col.columnName}
+                          value={`${col.columnLabel} ${col.columnName}`}
+                          onSelect={() => {
+                            updateField("statusColumn", col.columnName);
+                            setStatusColumnOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn("mr-2 h-3 w-3", config.statusColumn === col.columnName ? "opacity-100" : "opacity-0")}
+                          />
+                          <div className="flex flex-col">
+                            <span>{col.columnLabel}</span>
+                            {col.columnLabel !== col.columnName && (
+                              <span className="text-[10px] text-muted-foreground/70">{col.columnName}</span>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+
+          {/* 엔티티 관계 */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-xs font-medium truncate">엔티티 관계</span>
+            </div>
+
+            {loadingJoins ? (
+              <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" /> 로딩중...
+              </div>
+            ) : entityJoins.length > 0 ? (
+              <Popover open={relationOpen} onOpenChange={setRelationOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={relationOpen}
+                    className="h-8 w-full justify-between text-xs"
+                  >
+                    <span className="truncate">
+                      {currentRelationValue
+                        ? relationComboItems.find((r) => r.value === currentRelationValue)?.label || "관계 선택"
+                        : "엔티티 관계 선택"}
+                    </span>
+                    <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                  <Command>
+                    <CommandInput placeholder="관계 검색..." className="text-xs" />
+                    <CommandList>
+                      <CommandEmpty className="text-xs">엔티티 관계가 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {relationComboItems.map((item) => (
+                          <CommandItem
+                            key={item.value}
+                            value={`${item.label} ${item.sublabel}`}
+                            onSelect={() => {
+                              if (item.value === currentRelationValue) {
+                                handleChange({ relationColumn: "", parentColumn: "" });
+                              } else {
+                                const [sourceCol, refPart] = item.value.split("::");
+                                const [, refCol] = refPart.split(".");
+                                handleChange({ relationColumn: sourceCol, parentColumn: refCol });
+                              }
+                              setRelationOpen(false);
+                            }}
+                            className="text-xs"
+                          >
+                            <Check
+                              className={cn("mr-2 h-3 w-3", currentRelationValue === item.value ? "opacity-100" : "opacity-0")}
+                            />
+                            <div className="flex flex-col">
+                              <span>{item.label}</span>
+                              <span className="text-[10px] text-muted-foreground/70">{item.sublabel}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            ) : (
+              <div className="rounded-lg border-2 border-dashed py-3 text-center">
+                <p className="text-[10px] text-muted-foreground">설정된 엔티티 관계가 없습니다</p>
+              </div>
+            )}
+
+            {config.relationColumn && config.parentColumn && (
+              <div className="rounded bg-muted/50 px-2 py-1.5 text-[10px] text-muted-foreground">
+                자식 FK: <span className="font-medium text-foreground">{config.relationColumn}</span>
+                {" -> "}
+                부모 매칭: <span className="font-medium text-foreground">{config.parentColumn}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* 테이블 미선택 안내 */}
+      {!config.tableName && (
+        <div className="rounded-lg border-2 border-dashed p-6 text-center">
+          <Table2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+          <p className="text-sm text-muted-foreground">테이블이 선택되지 않았습니다</p>
+          <p className="text-xs text-muted-foreground">위 데이터 소스에서 테이블을 선택하세요</p>
+        </div>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 3단계: 카드 크기 (카드 선택 UI)           */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Maximize2} title="카드 크기" description="상태 카드의 크기를 선택하세요" />
+        <Separator />
+
+        <div className="grid grid-cols-3 gap-2">
+          {SIZE_CARDS.map((card) => {
+            const isSelected = (config.cardSize || "md") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateField("cardSize", card.value)}
+                className={cn(
+                  "flex min-h-[60px] flex-col items-center justify-center rounded-lg border p-2 text-center transition-all",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span className="text-xs font-medium leading-tight">{card.title}</span>
+                <span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 4단계: 상태 항목 관리                     */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <SectionHeader icon={BarChart3} title="상태 항목" description="집계할 상태 값과 표시 스타일을 설정하세요" />
+            <Badge variant="secondary" className="text-[10px] h-5">{items.length}개</Badge>
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addItem}
+            className="h-6 shrink-0 px-2 text-xs"
+          >
+            <Plus className="mr-1 h-3 w-3" />
+            추가
+          </Button>
+        </div>
+        <Separator />
+
+        {loadingCategoryValues && (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <Loader2 className="h-3 w-3 animate-spin" /> 카테고리 값 로딩...
+          </div>
+        )}
+
+        {items.length === 0 ? (
+          <div className="rounded-lg border-2 border-dashed py-6 text-center">
+            <BarChart3 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+            <p className="text-sm text-muted-foreground">아직 상태 항목이 없어요</p>
+            <p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {items.map((item: StatusCountItem, i: number) => (
+              <div key={i} className="space-y-1.5 rounded-md border p-2.5">
+                {/* 첫 번째 줄: 상태값 + 삭제 */}
+                <div className="flex items-center gap-1">
+                  {statusCategoryValues.length > 0 ? (
+                    <Select
+                      value={item.value || ""}
+                      onValueChange={(v) => {
+                        updateItem(i, "value", v);
+                        if (v === "__ALL__" && !item.label) {
+                          updateItem(i, "label", "전체");
+                        } else {
+                          const catVal = statusCategoryValues.find((cv) => cv.value === v);
+                          if (catVal && !item.label) {
+                            updateItem(i, "label", catVal.label);
+                          }
+                        }
+                      }}
+                    >
+                      <SelectTrigger className="h-7 flex-1 text-xs">
+                        <SelectValue placeholder="카테고리 값 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__ALL__" className="text-xs font-medium">
+                          전체
+                        </SelectItem>
+                        {statusCategoryValues.map((cv) => (
+                          <SelectItem key={cv.value} value={cv.value} className="text-xs">
+                            {cv.label} ({cv.value})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Input
+                      value={item.value}
+                      onChange={(e) => updateItem(i, "value", e.target.value)}
+                      placeholder="상태값 (예: IN_USE)"
+                      className="h-7 text-xs"
+                    />
+                  )}
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeItem(i)}
+                    className="h-6 w-6 shrink-0 p-0 text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+
+                {/* 두 번째 줄: 라벨 + 색상 */}
+                <div className="flex gap-1">
+                  <Input
+                    value={item.label}
+                    onChange={(e) => updateItem(i, "label", e.target.value)}
+                    placeholder="표시 라벨"
+                    className="h-7 text-xs"
+                  />
+                  <Select
+                    value={item.color}
+                    onValueChange={(v) => updateItem(i, "color", v)}
+                  >
+                    <SelectTrigger className="h-7 w-24 shrink-0 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {COLOR_OPTIONS.map((c) => (
+                        <SelectItem key={c} value={c} className="text-xs">
+                          <div className="flex items-center gap-1.5">
+                            <div
+                              className={cn("h-3 w-3 rounded-full border", STATUS_COLOR_MAP[c].bg, STATUS_COLOR_MAP[c].border)}
+                            />
+                            {c}
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!loadingCategoryValues && statusCategoryValues.length === 0 && config.tableName && config.statusColumn && (
+          <div className="rounded bg-amber-50 px-2 py-1.5 text-[10px] text-amber-700 dark:bg-amber-950/30 dark:text-amber-400">
+            카테고리 값이 없습니다. 옵션설정 &gt; 카테고리설정에서 값을 추가하거나 직접 입력하세요.
+          </div>
+        )}
+
+        {/* 미리보기 */}
+        {items.length > 0 && (
+          <div className="space-y-1.5">
+            <span className="text-xs text-muted-foreground truncate">미리보기</span>
+            <div className="flex gap-1.5 rounded-md bg-muted/30 p-2">
+              {items.map((item, i) => {
+                const colors = STATUS_COLOR_MAP[item.color] || STATUS_COLOR_MAP.gray;
+                return (
+                  <div
+                    key={i}
+                    className={cn("flex flex-1 flex-col items-center rounded-md border p-1.5", colors.bg, colors.border)}
+                  >
+                    <span className={cn("text-sm font-bold", colors.text)}>0</span>
+                    <span className={cn("text-[10px]", colors.text)}>{item.label || "라벨"}</span>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+V2StatusCountConfigPanel.displayName = "V2StatusCountConfigPanel";
+
+export default V2StatusCountConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx b/frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx
new file mode 100644
index 00000000..8ceacd5f
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx
@@ -0,0 +1,771 @@
+"use client";
+
+/**
+ * V2TableGrouped 설정 패널
+ * 토스식 단계별 UX: 데이터 소스 -> 그룹화 설정 -> 컬럼 선택 -> 표시 설정(접힘) -> 연동 설정(접힘)
+ * 기존 TableGroupedConfigPanel의 모든 기능을 자체 UI로 완전 구현
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table2,
+  Database,
+  Layers,
+  Columns3,
+  Check,
+  ChevronsUpDown,
+  Settings,
+  ChevronDown,
+  Loader2,
+  Link2,
+  Plus,
+  Trash2,
+  FoldVertical,
+  ArrowUpDown,
+  CheckSquare,
+  LayoutGrid,
+  Type,
+  Hash,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import type { TableGroupedConfig, LinkedFilterConfig } from "@/lib/registry/components/v2-table-grouped/types";
+import type { ColumnConfig } from "@/lib/registry/components/v2-table-list/types";
+import {
+  groupHeaderStyleOptions,
+  checkboxModeOptions,
+  sortDirectionOptions,
+} from "@/lib/registry/components/v2-table-grouped/config";
+
+// ─── 섹션 헤더 컴포넌트 ───
+function SectionHeader({ icon: Icon, title, description }: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && <p className="text-muted-foreground text-[10px]">{description}</p>}
+    </div>
+  );
+}
+
+// ─── 수평 Switch Row (토스 패턴) ───
+function SwitchRow({ label, description, checked, onCheckedChange }: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-sm">{label}</p>
+        {description && <p className="text-[11px] text-muted-foreground">{description}</p>}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+// ─── 수평 라벨 + 컨트롤 Row ───
+function LabeledRow({ label, description, children }: {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-xs text-muted-foreground">{label}</p>
+        {description && <p className="text-[10px] text-muted-foreground">{description}</p>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ─── 그룹 헤더 스타일 카드 ───
+const HEADER_STYLE_CARDS = [
+  { value: "default", icon: LayoutGrid, title: "기본", description: "표준 그룹 헤더" },
+  { value: "compact", icon: FoldVertical, title: "컴팩트", description: "간결한 헤더" },
+  { value: "card", icon: Layers, title: "카드", description: "카드 스타일 헤더" },
+] as const;
+
+interface V2TableGroupedConfigPanelProps {
+  config: TableGroupedConfig;
+  onChange: (newConfig: Partial<TableGroupedConfig>) => void;
+}
+
+export const V2TableGroupedConfigPanel: React.FC<V2TableGroupedConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  // componentConfigChanged 이벤트 발행 래퍼
+  const handleChange = useCallback((newConfig: Partial<TableGroupedConfig>) => {
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, ...newConfig } },
+        })
+      );
+    }
+  }, [onChange, config]);
+
+  const updateConfig = useCallback((updates: Partial<TableGroupedConfig>) => {
+    handleChange({ ...config, ...updates });
+  }, [handleChange, config]);
+
+  const updateGroupConfig = useCallback((updates: Partial<TableGroupedConfig["groupConfig"]>) => {
+    handleChange({
+      ...config,
+      groupConfig: { ...config.groupConfig, ...updates },
+    });
+  }, [handleChange, config]);
+
+  // ─── 상태 ───
+  const [tables, setTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
+  const [tableColumns, setTableColumns] = useState<ColumnConfig[]>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+
+  // Collapsible 상태
+  const [displayOpen, setDisplayOpen] = useState(false);
+  const [linkedOpen, setLinkedOpen] = useState(false);
+
+  // ─── 실제 사용할 테이블 이름 ───
+  const targetTableName = useMemo(() => {
+    if (config.useCustomTable && config.customTableName) {
+      return config.customTableName;
+    }
+    return config.selectedTable;
+  }, [config.useCustomTable, config.customTableName, config.selectedTable]);
+
+  // ─── 테이블 목록 로드 ───
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoadingTables(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        if (tableList && Array.isArray(tableList)) {
+          setTables(
+            tableList.map((t: any) => ({
+              tableName: t.tableName || t.table_name,
+              displayName: t.displayName || t.display_name || t.tableName || t.table_name,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("테이블 목록 로드 실패:", err);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  // ─── 선택된 테이블의 컬럼 로드 ───
+  useEffect(() => {
+    if (!targetTableName) {
+      setTableColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      setLoadingColumns(true);
+      try {
+        const columns = await tableTypeApi.getColumns(targetTableName);
+        if (columns && Array.isArray(columns)) {
+          const cols: ColumnConfig[] = columns.map((col: any, idx: number) => ({
+            columnName: col.column_name || col.columnName,
+            displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            visible: true,
+            sortable: true,
+            searchable: false,
+            align: "left" as const,
+            order: idx,
+          }));
+          setTableColumns(cols);
+
+          if (!config.columns || config.columns.length === 0) {
+            updateConfig({ columns: cols });
+          }
+        }
+      } catch (err) {
+        console.error("컬럼 로드 실패:", err);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+    loadColumns();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetTableName]);
+
+  // ─── 테이블 변경 핸들러 ───
+  const handleTableChange = useCallback((newTableName: string) => {
+    if (newTableName === config.selectedTable) return;
+    updateConfig({ selectedTable: newTableName, columns: [] });
+    setTableComboboxOpen(false);
+  }, [config.selectedTable, updateConfig]);
+
+  // ─── 컬럼 가시성 토글 ───
+  const toggleColumnVisibility = useCallback((columnName: string) => {
+    const updatedColumns = (config.columns || []).map((col) =>
+      col.columnName === columnName ? { ...col, visible: !col.visible } : col
+    );
+    updateConfig({ columns: updatedColumns });
+  }, [config.columns, updateConfig]);
+
+  // ─── 합계 컬럼 토글 ───
+  const toggleSumColumn = useCallback((columnName: string) => {
+    const currentSumCols = config.groupConfig?.summary?.sumColumns || [];
+    const newSumCols = currentSumCols.includes(columnName)
+      ? currentSumCols.filter((c) => c !== columnName)
+      : [...currentSumCols, columnName];
+
+    updateGroupConfig({
+      summary: {
+        ...config.groupConfig?.summary,
+        sumColumns: newSumCols,
+      },
+    });
+  }, [config.groupConfig?.summary, updateGroupConfig]);
+
+  // ─── 연결 필터 관리 ───
+  const addLinkedFilter = useCallback(() => {
+    const newFilter: LinkedFilterConfig = {
+      sourceComponentId: "",
+      sourceField: "value",
+      targetColumn: "",
+      enabled: true,
+    };
+    updateConfig({
+      linkedFilters: [...(config.linkedFilters || []), newFilter],
+    });
+  }, [config.linkedFilters, updateConfig]);
+
+  const removeLinkedFilter = useCallback((index: number) => {
+    const filters = [...(config.linkedFilters || [])];
+    filters.splice(index, 1);
+    updateConfig({ linkedFilters: filters });
+  }, [config.linkedFilters, updateConfig]);
+
+  const updateLinkedFilter = useCallback((index: number, updates: Partial<LinkedFilterConfig>) => {
+    const filters = [...(config.linkedFilters || [])];
+    filters[index] = { ...filters[index], ...updates };
+    updateConfig({ linkedFilters: filters });
+  }, [config.linkedFilters, updateConfig]);
+
+  // ─── 렌더링 ───
+  return (
+    <div className="space-y-4">
+      {/* ═══════════════════════════════════════ */}
+      {/* 1단계: 데이터 소스 (테이블 선택)         */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Table2} title="데이터 소스" description="그룹화할 테이블을 선택하세요" />
+        <Separator />
+
+        <SwitchRow
+          label="커스텀 테이블 사용"
+          description="화면 메인 테이블 대신 다른 테이블을 사용합니다"
+          checked={config.useCustomTable ?? false}
+          onCheckedChange={(checked) => updateConfig({ useCustomTable: checked })}
+        />
+
+        {config.useCustomTable ? (
+          <Input
+            value={config.customTableName || ""}
+            onChange={(e) => updateConfig({ customTableName: e.target.value })}
+            placeholder="테이블명을 직접 입력하세요"
+            className="h-8 text-xs"
+          />
+        ) : (
+          <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={tableComboboxOpen}
+                className="h-8 w-full justify-between text-xs"
+                disabled={loadingTables}
+              >
+                <div className="flex items-center gap-2 truncate">
+                  <Table2 className="h-3 w-3 shrink-0" />
+                  <span className="truncate">
+                    {loadingTables
+                      ? "테이블 로딩 중..."
+                      : config.selectedTable
+                        ? tables.find((t) => t.tableName === config.selectedTable)?.displayName || config.selectedTable
+                        : "테이블 선택"}
+                  </span>
+                </div>
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command
+                filter={(value, search) => {
+                  if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+                  return 0;
+                }}
+              >
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {tables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={`${table.displayName} ${table.tableName}`}
+                        onSelect={() => handleTableChange(table.tableName)}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn("mr-2 h-3 w-3", config.selectedTable === table.tableName ? "opacity-100" : "opacity-0")}
+                        />
+                        <div className="flex flex-col">
+                          <span>{table.displayName}</span>
+                          {table.displayName !== table.tableName && (
+                            <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
+                          )}
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 2단계: 그룹화 설정                       */}
+      {/* ═══════════════════════════════════════ */}
+      {targetTableName && (
+        <div className="space-y-3">
+          <SectionHeader icon={Layers} title="그룹화 설정" description="데이터를 어떤 컬럼 기준으로 그룹화할지 설정합니다" />
+          <Separator />
+
+          {/* 그룹화 기준 컬럼 */}
+          <LabeledRow label="그룹화 기준 컬럼 *">
+            <Select
+              value={config.groupConfig?.groupByColumn || ""}
+              onValueChange={(value) => updateGroupConfig({ groupByColumn: value })}
+            >
+              <SelectTrigger className="h-7 w-[160px] text-xs">
+                <SelectValue placeholder="컬럼 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {(loadingColumns ? [] : tableColumns).map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName || col.columnName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </LabeledRow>
+
+          {/* 그룹 라벨 형식 */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <Type className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-xs font-medium truncate">그룹 라벨 형식</span>
+            </div>
+            <Input
+              value={config.groupConfig?.groupLabelFormat || "{value}"}
+              onChange={(e) => updateGroupConfig({ groupLabelFormat: e.target.value })}
+              placeholder="{value} ({컬럼명})"
+              className="h-7 text-xs"
+            />
+            <p className="text-[10px] text-muted-foreground">
+              {"{value}"} = 그룹값, {"{컬럼명}"} = 해당 컬럼 값
+            </p>
+          </div>
+
+          <SwitchRow
+            label="기본 펼침 상태"
+            description="그룹이 기본으로 펼쳐진 상태로 표시됩니다"
+            checked={config.groupConfig?.defaultExpanded ?? true}
+            onCheckedChange={(checked) => updateGroupConfig({ defaultExpanded: checked })}
+          />
+
+          {/* 그룹 정렬 */}
+          <LabeledRow label="그룹 정렬">
+            <Select
+              value={config.groupConfig?.sortDirection || "asc"}
+              onValueChange={(value: string) => updateGroupConfig({ sortDirection: value as "asc" | "desc" })}
+            >
+              <SelectTrigger className="h-7 w-[120px] text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {sortDirectionOptions.map((opt) => (
+                  <SelectItem key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </LabeledRow>
+
+          <SwitchRow
+            label="개수 표시"
+            description="그룹 헤더에 항목 수를 표시합니다"
+            checked={config.groupConfig?.summary?.showCount ?? true}
+            onCheckedChange={(checked) =>
+              updateGroupConfig({
+                summary: { ...config.groupConfig?.summary, showCount: checked },
+              })
+            }
+          />
+
+          {/* 합계 컬럼 */}
+          {tableColumns.length > 0 && (
+            <div className="space-y-1.5">
+              <div className="flex items-center gap-2">
+                <Hash className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-medium truncate">합계 표시 컬럼</span>
+              </div>
+              <p className="text-[10px] text-muted-foreground">그룹별 합계를 계산할 컬럼을 선택하세요</p>
+              <div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border p-2">
+                {tableColumns.map((col) => {
+                  const isChecked = config.groupConfig?.summary?.sumColumns?.includes(col.columnName) ?? false;
+                  return (
+                    <div
+                      key={col.columnName}
+                      className={cn(
+                        "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
+                        isChecked && "bg-primary/10",
+                      )}
+                      onClick={() => toggleSumColumn(col.columnName)}
+                    >
+                      <Checkbox
+                        checked={isChecked}
+                        onCheckedChange={() => toggleSumColumn(col.columnName)}
+                        className="pointer-events-none h-3.5 w-3.5"
+                      />
+                      <span className="truncate text-xs">{col.displayName || col.columnName}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* 테이블 미선택 안내 */}
+      {!targetTableName && (
+        <div className="rounded-lg border-2 border-dashed p-6 text-center">
+          <Table2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+          <p className="text-sm text-muted-foreground">테이블이 선택되지 않았습니다</p>
+          <p className="text-xs text-muted-foreground">위 데이터 소스에서 테이블을 선택하세요</p>
+        </div>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 3단계: 컬럼 선택                         */}
+      {/* ═══════════════════════════════════════ */}
+      {targetTableName && (config.columns || tableColumns).length > 0 && (
+        <div className="space-y-3">
+          <SectionHeader
+            icon={Columns3}
+            title={`컬럼 선택 (${(config.columns || tableColumns).filter((c) => c.visible !== false).length}개 표시)`}
+            description="표시할 컬럼을 선택하세요"
+          />
+          <Separator />
+
+          <div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md border p-2">
+            {(config.columns || tableColumns).map((col) => {
+              const isVisible = col.visible !== false;
+              return (
+                <div
+                  key={col.columnName}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted/50",
+                    isVisible && "bg-primary/10",
+                  )}
+                  onClick={() => toggleColumnVisibility(col.columnName)}
+                >
+                  <Checkbox
+                    checked={isVisible}
+                    onCheckedChange={() => toggleColumnVisibility(col.columnName)}
+                    className="pointer-events-none h-3.5 w-3.5"
+                  />
+                  <Database className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                  <span className="truncate text-xs">{col.displayName || col.columnName}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 4단계: 그룹 헤더 스타일 (카드 선택)       */}
+      {/* ═══════════════════════════════════════ */}
+      {targetTableName && (
+        <div className="space-y-3">
+          <SectionHeader icon={LayoutGrid} title="그룹 헤더 스타일" description="그룹 헤더의 디자인을 선택하세요" />
+          <Separator />
+
+          <div className="grid grid-cols-3 gap-2">
+            {HEADER_STYLE_CARDS.map((card) => {
+              const Icon = card.icon;
+              const isSelected = (config.groupHeaderStyle || "default") === card.value;
+              return (
+                <button
+                  key={card.value}
+                  type="button"
+                  onClick={() => updateConfig({ groupHeaderStyle: card.value as "default" | "compact" | "card" })}
+                  className={cn(
+                    "flex min-h-[70px] flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all",
+                    isSelected
+                      ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                      : "border-border hover:border-primary/50 hover:bg-muted/50"
+                  )}
+                >
+                  <Icon className="mb-1 h-4 w-4 text-primary" />
+                  <span className="text-xs font-medium leading-tight">{card.title}</span>
+                  <span className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{card.description}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 5단계: 표시 설정 (기본 접힘)              */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">표시 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">6개</Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", displayOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+
+            {/* 체크박스 */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <CheckSquare className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-medium truncate">체크박스</span>
+              </div>
+
+              <SwitchRow
+                label="체크박스 표시"
+                description="행 선택용 체크박스를 표시합니다"
+                checked={config.showCheckbox ?? false}
+                onCheckedChange={(checked) => updateConfig({ showCheckbox: checked })}
+              />
+
+              {config.showCheckbox && (
+                <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                  <LabeledRow label="선택 모드">
+                    <Select
+                      value={config.checkboxMode || "multi"}
+                      onValueChange={(value: string) => updateConfig({ checkboxMode: value as "single" | "multi" })}
+                    >
+                      <SelectTrigger className="h-7 w-[120px] text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {checkboxModeOptions.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </LabeledRow>
+                </div>
+              )}
+            </div>
+
+            <Separator />
+
+            {/* UI 옵션 */}
+            <SwitchRow
+              label="펼치기/접기 버튼 표시"
+              description="전체 펼치기/접기 버튼을 상단에 표시합니다"
+              checked={config.showExpandAllButton ?? true}
+              onCheckedChange={(checked) => updateConfig({ showExpandAllButton: checked })}
+            />
+
+            <SwitchRow
+              label="행 클릭 가능"
+              description="행 클릭 시 이벤트를 발생시킵니다"
+              checked={config.rowClickable ?? true}
+              onCheckedChange={(checked) => updateConfig({ rowClickable: checked })}
+            />
+
+            <Separator />
+
+            {/* 높이 및 메시지 */}
+            <LabeledRow label="최대 높이 (px)">
+              <Input
+                type="number"
+                value={typeof config.maxHeight === "number" ? config.maxHeight : 600}
+                onChange={(e) => updateConfig({ maxHeight: parseInt(e.target.value) || 600 })}
+                min={200}
+                max={2000}
+                className="h-7 w-[100px] text-xs"
+              />
+            </LabeledRow>
+
+            <div className="space-y-1">
+              <span className="text-xs text-muted-foreground truncate">빈 데이터 메시지</span>
+              <Input
+                value={config.emptyMessage || ""}
+                onChange={(e) => updateConfig({ emptyMessage: e.target.value })}
+                placeholder="데이터가 없습니다."
+                className="h-7 text-xs"
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 6단계: 연동 설정 (기본 접힘)              */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={linkedOpen} onOpenChange={setLinkedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Link2 className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium truncate">연동 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">{config.linkedFilters?.length || 0}개</Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", linkedOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <p className="text-[10px] text-muted-foreground">
+                다른 컴포넌트(검색필터 등)의 선택 값으로 이 테이블을 필터링합니다
+              </p>
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={addLinkedFilter}
+                className="h-6 shrink-0 px-2 text-xs"
+              >
+                <Plus className="mr-1 h-3 w-3" />
+                추가
+              </Button>
+            </div>
+
+            {(config.linkedFilters || []).length === 0 ? (
+              <div className="rounded-lg border-2 border-dashed py-4 text-center">
+                <Link2 className="mx-auto mb-1 h-6 w-6 text-muted-foreground opacity-30" />
+                <p className="text-xs text-muted-foreground">연결된 필터가 없습니다</p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {(config.linkedFilters || []).map((filter, idx) => (
+                  <div key={idx} className="space-y-2 rounded-md border p-3">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-medium">필터 #{idx + 1}</span>
+                      <div className="flex items-center gap-2">
+                        <Switch
+                          checked={filter.enabled !== false}
+                          onCheckedChange={(checked) => updateLinkedFilter(idx, { enabled: checked })}
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => removeLinkedFilter(idx)}
+                          className="h-5 w-5 p-0 text-destructive hover:text-destructive"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div className="space-y-1">
+                      <span className="text-[10px] text-muted-foreground">소스 컴포넌트 ID</span>
+                      <Input
+                        value={filter.sourceComponentId}
+                        onChange={(e) => updateLinkedFilter(idx, { sourceComponentId: e.target.value })}
+                        placeholder="예: search-filter-1"
+                        className="h-6 text-xs"
+                      />
+                    </div>
+
+                    <div className="space-y-1">
+                      <span className="text-[10px] text-muted-foreground">소스 필드</span>
+                      <Input
+                        value={filter.sourceField || "value"}
+                        onChange={(e) => updateLinkedFilter(idx, { sourceField: e.target.value })}
+                        placeholder="value"
+                        className="h-6 text-xs"
+                      />
+                    </div>
+
+                    <div className="space-y-1">
+                      <span className="text-[10px] text-muted-foreground">대상 컬럼</span>
+                      <Select
+                        value={filter.targetColumn}
+                        onValueChange={(value) => updateLinkedFilter(idx, { targetColumn: value })}
+                      >
+                        <SelectTrigger className="h-6 text-xs">
+                          <SelectValue placeholder="컬럼 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {tableColumns.map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName}>
+                              {col.displayName || col.columnName}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2TableGroupedConfigPanel.displayName = "V2TableGroupedConfigPanel";
+
+export default V2TableGroupedConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx b/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx
new file mode 100644
index 00000000..a815b41c
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2TableListConfigPanel.tsx
@@ -0,0 +1,1466 @@
+"use client";
+
+/**
+ * V2TableList 설정 패널
+ * 토스식 단계별 UX: 데이터 소스 -> 컬럼 선택 -> 조인 컬럼 -> 순서/라벨 -> 고급 설정(접힘)
+ * 기존 TableListConfigPanel의 모든 기능을 자체 UI로 완전 구현
+ */
+
+import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table2,
+  Database,
+  Link2,
+  GripVertical,
+  X,
+  Check,
+  ChevronsUpDown,
+  Lock,
+  Unlock,
+  Settings,
+  ChevronDown,
+  Loader2,
+  Columns3,
+  ArrowUpDown,
+  Filter,
+  LayoutGrid,
+  CheckSquare,
+  Wrench,
+  ScrollText,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { entityJoinApi } from "@/lib/api/entityJoin";
+import { tableTypeApi } from "@/lib/api/screen";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { DataFilterConfigPanel } from "@/components/screen/config-panels/DataFilterConfigPanel";
+import { DndContext, closestCenter, type DragEndEvent } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { TableListConfig, ColumnConfig } from "@/lib/registry/components/v2-table-list/types";
+
+// ─── DnD 정렬 가능한 컬럼 행 (접이식) ───
+function SortableColumnRow({
+  id,
+  col,
+  index,
+  isEntityJoin,
+  onLabelChange,
+  onWidthChange,
+  onRemove,
+}: {
+  id: string;
+  col: ColumnConfig;
+  index: number;
+  isEntityJoin?: boolean;
+  onLabelChange: (value: string) => void;
+  onWidthChange: (value: number) => void;
+  onRemove: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
+  const style = { transform: CSS.Transform.toString(transform), transition };
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "bg-card rounded-md border px-2.5 py-1.5",
+        isDragging && "z-50 opacity-50 shadow-md",
+        isEntityJoin && "border-primary/20 bg-primary/5",
+      )}
+    >
+      <div className="flex items-center gap-1.5">
+        <div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
+          <GripVertical className="h-3 w-3" />
+        </div>
+        {isEntityJoin ? (
+          <Link2 className="h-3 w-3 shrink-0 text-primary" />
+        ) : (
+          <span className="text-muted-foreground text-[10px] font-medium">#{index + 1}</span>
+        )}
+        <button
+          type="button"
+          className="truncate text-xs flex-1 text-left hover:underline"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {col.displayName || col.columnName}
+        </button>
+        {col.width && (
+          <Badge variant="secondary" className="text-[10px] h-5 shrink-0">{col.width}px</Badge>
+        )}
+        <Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
+          <X className="h-3 w-3" />
+        </Button>
+      </div>
+      {expanded && (
+        <div className="grid grid-cols-[1fr_60px] gap-1.5 pl-5 mt-1.5">
+          <Input
+            value={col.displayName || col.columnName}
+            onChange={(e) => onLabelChange(e.target.value)}
+            placeholder="표시명"
+            className="h-7 min-w-0 text-xs"
+          />
+          <Input
+            value={col.width || ""}
+            onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
+            placeholder="너비"
+            className="h-7 shrink-0 text-xs text-center"
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── 섹션 헤더 컴포넌트 ───
+function SectionHeader({ icon: Icon, title, description }: { icon: React.ComponentType<{ className?: string }>; title: string; description?: string }) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && <p className="text-muted-foreground text-[10px]">{description}</p>}
+    </div>
+  );
+}
+
+// ─── 수평 Switch Row (토스 패턴) ───
+function SwitchRow({ label, description, checked, onCheckedChange }: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-sm">{label}</p>
+        {description && <p className="text-[11px] text-muted-foreground">{description}</p>}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+interface V2TableListConfigPanelProps {
+  config: TableListConfig;
+  onChange: (config: Partial<TableListConfig>) => void;
+  screenTableName?: string;
+  tableColumns?: any[];
+  menuObjid?: number;
+}
+
+export const V2TableListConfigPanel: React.FC<V2TableListConfigPanelProps> = ({
+  config: configProp,
+  onChange,
+  screenTableName,
+  tableColumns,
+  menuObjid,
+}) => {
+  const config = configProp || ({} as TableListConfig);
+
+  // componentConfigChanged 이벤트 발행 래퍼
+  const handleChange = useCallback((newConfig: Partial<TableListConfig>) => {
+    onChange(newConfig);
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: { ...config, ...newConfig } },
+        })
+      );
+    }
+  }, [onChange, config]);
+
+  // key-value 형태 업데이트 헬퍼
+  const updateField = useCallback((key: keyof TableListConfig, value: any) => {
+    handleChange({ ...config, [key]: value });
+  }, [handleChange, config]);
+
+  const updateNestedField = useCallback((parentKey: keyof TableListConfig, childKey: string, value: any) => {
+    const parentValue = config[parentKey] as any;
+    handleChange({
+      ...config,
+      [parentKey]: { ...parentValue, [childKey]: value },
+    });
+  }, [handleChange, config]);
+
+  // ─── 상태 ───
+  const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName: string }>>([]);
+  const [loadingTables, setLoadingTables] = useState(false);
+  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
+
+  const [availableColumns, setAvailableColumns] = useState<
+    Array<{ columnName: string; dataType: string; label?: string; input_type?: string }>
+  >([]);
+
+  const [entityJoinColumns, setEntityJoinColumns] = useState<{
+    availableColumns: Array<{
+      tableName: string;
+      columnName: string;
+      columnLabel: string;
+      dataType: string;
+      joinAlias: string;
+      suggestedLabel: string;
+    }>;
+    joinTables: Array<{
+      tableName: string;
+      currentDisplayColumn: string;
+      joinConfig?: any;
+      availableColumns: Array<{
+        columnName: string;
+        columnLabel: string;
+        dataType: string;
+        inputType?: string;
+        description?: string;
+      }>;
+    }>;
+  }>({ availableColumns: [], joinTables: [] });
+  const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);
+
+  const [referenceTableColumns, setReferenceTableColumns] = useState<
+    Array<{ columnName: string; dataType: string; label?: string }>
+  >([]);
+  const [loadingReferenceColumns, setLoadingReferenceColumns] = useState(false);
+
+  const [entityDisplayConfigs, setEntityDisplayConfigs] = useState<
+    Record<string, {
+      sourceColumns: Array<{ columnName: string; displayName: string; dataType: string }>;
+      joinColumns: Array<{ columnName: string; displayName: string; dataType: string }>;
+      selectedColumns: string[];
+      separator: string;
+    }>
+  >({});
+
+  // Collapsible 상태
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [entityDisplayOpen, setEntityDisplayOpen] = useState(false);
+  const [columnSelectOpen, setColumnSelectOpen] = useState(() => (config.columns?.length || 0) > 0);
+  const [entityJoinOpen, setEntityJoinOpen] = useState(false);
+  const [displayColumnsOpen, setDisplayColumnsOpen] = useState(() => (config.columns?.length || 0) > 0);
+  const [columnSearchText, setColumnSearchText] = useState("");
+  const [entityJoinSubOpen, setEntityJoinSubOpen] = useState<Record<number, boolean>>({});
+
+  // 이전 컬럼 개수 추적 (엔티티 감지용)
+  const prevColumnsLengthRef = useRef<number>(0);
+
+  // ─── 실제 사용할 테이블 이름 계산 ───
+  const targetTableName = useMemo(() => {
+    if (config.useCustomTable && config.customTableName) {
+      return config.customTableName;
+    }
+    return config.selectedTable || screenTableName;
+  }, [config.useCustomTable, config.customTableName, config.selectedTable, screenTableName]);
+
+  // ─── 초기화: 화면 테이블명 자동 설정 ───
+  useEffect(() => {
+    if (screenTableName && !config.selectedTable) {
+      handleChange({
+        ...config,
+        selectedTable: screenTableName,
+        columns: config.columns || [],
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenTableName]);
+
+  // ─── 테이블 목록 가져오기 ───
+  useEffect(() => {
+    const fetchTables = async () => {
+      setLoadingTables(true);
+      try {
+        const response = await tableTypeApi.getTables();
+        setAvailableTables(
+          response.map((table: any) => ({
+            tableName: table.tableName,
+            displayName: table.displayName || table.tableName,
+          })),
+        );
+      } catch (error) {
+        console.error("테이블 목록 가져오기 실패:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    fetchTables();
+  }, []);
+
+  // ─── 선택된 테이블의 컬럼 목록 설정 ───
+  useEffect(() => {
+    if (!targetTableName) {
+      setAvailableColumns([]);
+      return;
+    }
+
+    const isUsingDifferentTable = config.selectedTable && screenTableName && config.selectedTable !== screenTableName;
+    const shouldUseTableColumnsProp = !config.useCustomTable && !isUsingDifferentTable && tableColumns && tableColumns.length > 0;
+
+    if (shouldUseTableColumnsProp) {
+      const mappedColumns = tableColumns.map((column: any) => ({
+        columnName: column.columnName || column.name,
+        dataType: column.dataType || column.type || "text",
+        label: column.label || column.displayName || column.columnLabel || column.columnName || column.name,
+        input_type: column.input_type || column.inputType,
+      }));
+      setAvailableColumns(mappedColumns);
+
+      if (!config.selectedTable && screenTableName) {
+        handleChange({
+          ...config,
+          selectedTable: screenTableName,
+          columns: config.columns || [],
+        });
+      }
+    } else {
+      const fetchColumns = async () => {
+        try {
+          const result = await tableManagementApi.getColumnList(targetTableName);
+          if (result.success && result.data) {
+            const columns = Array.isArray(result.data) ? result.data : result.data.columns;
+            if (columns && Array.isArray(columns)) {
+              setAvailableColumns(
+                columns.map((col: any) => ({
+                  columnName: col.columnName,
+                  dataType: col.dataType,
+                  label: col.displayName || col.columnLabel || col.columnName,
+                  input_type: col.input_type || col.inputType,
+                })),
+              );
+            } else {
+              setAvailableColumns([]);
+            }
+          } else {
+            setAvailableColumns([]);
+          }
+        } catch (error) {
+          console.error("컬럼 목록 가져오기 실패:", error);
+          setAvailableColumns([]);
+        }
+      };
+      fetchColumns();
+    }
+  }, [targetTableName, config.useCustomTable, tableColumns]);
+
+  // ─── Entity 조인 컬럼 정보 가져오기 ───
+  useEffect(() => {
+    const fetchEntityJoinColumns = async () => {
+      if (!targetTableName) {
+        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
+        return;
+      }
+      setLoadingEntityJoins(true);
+      try {
+        const result = await entityJoinApi.getEntityJoinColumns(targetTableName);
+        setEntityJoinColumns({
+          availableColumns: result.availableColumns || [],
+          joinTables: result.joinTables || [],
+        });
+      } catch (error) {
+        console.error("Entity 조인 컬럼 조회 오류:", error);
+        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
+      } finally {
+        setLoadingEntityJoins(false);
+      }
+    };
+    fetchEntityJoinColumns();
+  }, [targetTableName]);
+
+  // ─── 제외 필터용 참조 테이블 컬럼 가져오기 ───
+  useEffect(() => {
+    const fetchReferenceColumns = async () => {
+      const refTable = config.excludeFilter?.referenceTable;
+      if (!refTable) {
+        setReferenceTableColumns([]);
+        return;
+      }
+      setLoadingReferenceColumns(true);
+      try {
+        const result = await tableManagementApi.getColumnList(refTable);
+        if (result.success && result.data) {
+          const columns = result.data.columns || [];
+          setReferenceTableColumns(
+            columns.map((col: any) => ({
+              columnName: col.columnName || col.column_name,
+              dataType: col.dataType || col.data_type || "text",
+              label: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+            })),
+          );
+        }
+      } catch (error) {
+        console.error("참조 테이블 컬럼 조회 오류:", error);
+        setReferenceTableColumns([]);
+      } finally {
+        setLoadingReferenceColumns(false);
+      }
+    };
+    fetchReferenceColumns();
+  }, [config.excludeFilter?.referenceTable]);
+
+  // ─── 엔티티 컬럼 자동 로드 ───
+  useEffect(() => {
+    const entityColumns = config.columns?.filter((col) => col.isEntityJoin && col.entityDisplayConfig);
+    if (!entityColumns || entityColumns.length === 0) return;
+
+    entityColumns.forEach((column) => {
+      if (entityDisplayConfigs[column.columnName]) return;
+      loadEntityDisplayConfig(column);
+    });
+  }, [config.columns]);
+
+  // ─── 엔티티 타입 컬럼 자동 감지 ───
+  useEffect(() => {
+    const currentLength = config.columns?.length || 0;
+    const prevLength = prevColumnsLengthRef.current;
+
+    if (!config.columns || !tableColumns || config.columns.length === 0) {
+      prevColumnsLengthRef.current = currentLength;
+      return;
+    }
+
+    if (currentLength === prevLength && prevLength > 0) return;
+
+    const updatedColumns = config.columns.map((column) => {
+      if (column.isEntityJoin) return column;
+
+      const tableColumn = tableColumns.find((tc: any) => tc.columnName === column.columnName);
+      if (tableColumn && (tableColumn.input_type === "entity" || tableColumn.web_type === "entity")) {
+        return {
+          ...column,
+          isEntityJoin: true,
+          entityJoinInfo: {
+            sourceTable: config.selectedTable || screenTableName || "",
+            sourceColumn: column.columnName,
+            joinAlias: column.columnName,
+          },
+          entityDisplayConfig: {
+            displayColumns: [],
+            separator: " - ",
+            sourceTable: config.selectedTable || screenTableName || "",
+            joinTable: tableColumn.reference_table || tableColumn.referenceTable || "",
+          },
+        };
+      }
+      return column;
+    });
+
+    const hasChanges = updatedColumns.some((col, index) => col.isEntityJoin !== config.columns![index].isEntityJoin);
+    if (hasChanges) {
+      updateField("columns", updatedColumns);
+    }
+
+    prevColumnsLengthRef.current = currentLength;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.columns?.length, tableColumns, config.selectedTable]);
+
+  // ─── 엔티티 컬럼의 표시 컬럼 정보 로드 ───
+  const loadEntityDisplayConfig = useCallback(async (column: ColumnConfig) => {
+    const configKey = column.columnName;
+
+    if (entityDisplayConfigs[configKey]) return;
+
+    if (!column.isEntityJoin) {
+      setEntityDisplayConfigs((prev) => ({
+        ...prev,
+        [configKey]: { sourceColumns: [], joinColumns: [], selectedColumns: [], separator: " - " },
+      }));
+      return;
+    }
+
+    const sourceTable =
+      column.entityDisplayConfig?.sourceTable ||
+      column.entityJoinInfo?.sourceTable ||
+      config.selectedTable ||
+      screenTableName;
+
+    if (!sourceTable) {
+      setEntityDisplayConfigs((prev) => ({
+        ...prev,
+        [configKey]: {
+          sourceColumns: [],
+          joinColumns: [],
+          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
+          separator: column.entityDisplayConfig?.separator || " - ",
+        },
+      }));
+      return;
+    }
+
+    let joinTable = column.entityDisplayConfig?.joinTable;
+
+    if (!joinTable) {
+      try {
+        const columnList = await tableTypeApi.getColumns(sourceTable);
+        const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);
+
+        if (columnInfo?.reference_table || columnInfo?.referenceTable) {
+          joinTable = columnInfo.reference_table || columnInfo.referenceTable;
+
+          const updatedDisplayConfig = {
+            ...column.entityDisplayConfig,
+            sourceTable,
+            joinTable,
+            displayColumns: column.entityDisplayConfig?.displayColumns || [],
+            separator: column.entityDisplayConfig?.separator || " - ",
+          };
+
+          const updatedColumns = config.columns?.map((col) =>
+            col.columnName === column.columnName ? { ...col, entityDisplayConfig: updatedDisplayConfig } : col,
+          );
+          if (updatedColumns) updateField("columns", updatedColumns);
+        }
+      } catch (error) {
+        console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
+      }
+    }
+
+    try {
+      const sourceResult = await entityJoinApi.getReferenceTableColumns(sourceTable);
+      const sourceColumns = sourceResult.columns || [];
+
+      let joinColumns: Array<{ columnName: string; displayName: string; dataType: string }> = [];
+      if (joinTable) {
+        try {
+          const joinResult = await entityJoinApi.getReferenceTableColumns(joinTable);
+          joinColumns = joinResult.columns || [];
+        } catch {
+          // 조인 테이블 로드 실패해도 소스 테이블 컬럼은 표시
+        }
+      }
+
+      setEntityDisplayConfigs((prev) => ({
+        ...prev,
+        [configKey]: {
+          sourceColumns,
+          joinColumns,
+          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
+          separator: column.entityDisplayConfig?.separator || " - ",
+        },
+      }));
+    } catch (error) {
+      console.error("엔티티 표시 컬럼 정보 로드 실패:", error);
+      setEntityDisplayConfigs((prev) => ({
+        ...prev,
+        [configKey]: {
+          sourceColumns: [],
+          joinColumns: [],
+          selectedColumns: column.entityDisplayConfig?.displayColumns || [],
+          separator: column.entityDisplayConfig?.separator || " - ",
+        },
+      }));
+    }
+  }, [entityDisplayConfigs, config.selectedTable, config.columns, screenTableName, updateField]);
+
+  // ─── 엔티티 표시 컬럼 선택 토글 ───
+  const toggleEntityDisplayColumn = useCallback((columnName: string, selectedColumn: string) => {
+    const configKey = columnName;
+    const localConfig = entityDisplayConfigs[configKey];
+    if (!localConfig) return;
+
+    const newSelectedColumns = localConfig.selectedColumns.includes(selectedColumn)
+      ? localConfig.selectedColumns.filter((col) => col !== selectedColumn)
+      : [...localConfig.selectedColumns, selectedColumn];
+
+    setEntityDisplayConfigs((prev) => ({
+      ...prev,
+      [configKey]: { ...prev[configKey], selectedColumns: newSelectedColumns },
+    }));
+
+    const updatedColumns = config.columns?.map((col) => {
+      if (col.columnName === columnName && col.entityDisplayConfig) {
+        return { ...col, entityDisplayConfig: { ...col.entityDisplayConfig, displayColumns: newSelectedColumns } };
+      }
+      return col;
+    });
+    if (updatedColumns) updateField("columns", updatedColumns);
+  }, [entityDisplayConfigs, config.columns, updateField]);
+
+  // ─── 엔티티 표시 구분자 업데이트 ───
+  const updateEntityDisplaySeparator = useCallback((columnName: string, separator: string) => {
+    const configKey = columnName;
+    const localConfig = entityDisplayConfigs[configKey];
+    if (!localConfig) return;
+
+    setEntityDisplayConfigs((prev) => ({
+      ...prev,
+      [configKey]: { ...prev[configKey], separator },
+    }));
+
+    const updatedColumns = config.columns?.map((col) => {
+      if (col.columnName === columnName && col.entityDisplayConfig) {
+        return { ...col, entityDisplayConfig: { ...col.entityDisplayConfig, separator } };
+      }
+      return col;
+    });
+    if (updatedColumns) updateField("columns", updatedColumns);
+  }, [entityDisplayConfigs, config.columns, updateField]);
+
+  // ─── 컬럼 추가 ───
+  const addColumn = useCallback((columnName: string) => {
+    const existingColumn = config.columns?.find((col) => col.columnName === columnName);
+    if (existingColumn) return;
+
+    const columnInfo = tableColumns?.find((col: any) => (col.columnName || col.name) === columnName);
+    const availableColumnInfo = availableColumns.find((col) => col.columnName === columnName);
+    const displayName = columnInfo?.label || columnInfo?.displayName || availableColumnInfo?.label || columnName;
+
+    const newColumn: ColumnConfig = {
+      columnName,
+      displayName,
+      visible: true,
+      sortable: true,
+      searchable: true,
+      align: "left",
+      format: "text",
+      order: config.columns?.length || 0,
+    };
+
+    updateField("columns", [...(config.columns || []), newColumn]);
+  }, [config.columns, tableColumns, availableColumns, updateField]);
+
+  // ─── 조인 컬럼 추가 ───
+  const addEntityColumn = useCallback((joinColumn: (typeof entityJoinColumns.availableColumns)[0]) => {
+    const existingColumn = config.columns?.find((col) => col.columnName === joinColumn.joinAlias);
+    if (existingColumn) return;
+
+    const joinTableInfo = entityJoinColumns.joinTables?.find((jt: any) => jt.tableName === joinColumn.tableName);
+    const sourceColumn = (joinTableInfo as any)?.joinConfig?.sourceColumn || "";
+
+    const newColumn: ColumnConfig = {
+      columnName: joinColumn.joinAlias,
+      displayName: joinColumn.columnLabel,
+      visible: true,
+      sortable: true,
+      searchable: true,
+      align: "left",
+      format: "text",
+      order: config.columns?.length || 0,
+      isEntityJoin: false,
+      additionalJoinInfo: {
+        sourceTable: config.selectedTable || screenTableName || "",
+        sourceColumn,
+        referenceTable: joinColumn.tableName,
+        joinAlias: joinColumn.joinAlias,
+      },
+    };
+
+    updateField("columns", [...(config.columns || []), newColumn]);
+  }, [config.columns, entityJoinColumns.joinTables, config.selectedTable, screenTableName, updateField]);
+
+  // ─── 컬럼 제거 ───
+  const removeColumn = useCallback((columnName: string) => {
+    updateField("columns", config.columns?.filter((col) => col.columnName !== columnName) || []);
+  }, [config.columns, updateField]);
+
+  // ─── 컬럼 업데이트 ───
+  const updateColumn = useCallback((columnName: string, updates: Partial<ColumnConfig>) => {
+    const updatedColumns = config.columns?.map((col) =>
+      col.columnName === columnName ? { ...col, ...updates } : col
+    ) || [];
+    updateField("columns", updatedColumns);
+  }, [config.columns, updateField]);
+
+  // ─── 테이블 변경 핸들러 ───
+  const handleTableChange = useCallback((newTableName: string) => {
+    if (newTableName === targetTableName) return;
+    handleChange({
+      ...config,
+      selectedTable: newTableName,
+      columns: [],
+    });
+    setTableComboboxOpen(false);
+  }, [targetTableName, handleChange, config]);
+
+  // ─── 렌더링 ───
+  return (
+    <div className="space-y-4">
+      {/* ═══════════════════════════════════════ */}
+      {/* 1단계: 데이터 소스 (테이블 선택)         */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Table2} title="데이터 소스" description="테이블을 선택하세요. 미선택 시 화면 메인 테이블을 사용합니다." />
+        <Separator />
+
+        <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={tableComboboxOpen}
+              className="h-8 w-full justify-between text-xs"
+              disabled={loadingTables}
+            >
+              <div className="flex items-center gap-2 truncate">
+                <Table2 className="h-3 w-3 shrink-0" />
+                <span className="truncate">
+                  {loadingTables
+                    ? "테이블 로딩 중..."
+                    : targetTableName
+                      ? availableTables.find((t) => t.tableName === targetTableName)?.displayName || targetTableName
+                      : "테이블 선택"}
+                </span>
+              </div>
+              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="text-xs" />
+              <CommandList>
+                <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {availableTables.map((table) => (
+                    <CommandItem
+                      key={table.tableName}
+                      value={`${table.tableName} ${table.displayName}`}
+                      onSelect={() => handleTableChange(table.tableName)}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn("mr-2 h-3 w-3", targetTableName === table.tableName ? "opacity-100" : "opacity-0")}
+                      />
+                      <div className="flex flex-col">
+                        <span>{table.displayName}</span>
+                        {table.displayName !== table.tableName && (
+                          <span className="text-[10px] text-muted-foreground/70">{table.tableName}</span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+
+        {screenTableName && targetTableName !== screenTableName && (
+          <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1 dark:bg-amber-950/30">
+            <span className="text-[10px] text-amber-700 dark:text-amber-400">
+              화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
+            </span>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900 dark:text-amber-400"
+              onClick={() => handleTableChange(screenTableName)}
+            >
+              기본으로
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 2단계: 컬럼 선택 (Collapsible)            */}
+      {/* ═══════════════════════════════════════ */}
+      {targetTableName && availableColumns.length > 0 && (
+        <>
+          <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
+            <CollapsibleTrigger asChild>
+              <button
+                type="button"
+                className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+              >
+                <div className="flex items-center gap-2">
+                  <Columns3 className="h-4 w-4 text-muted-foreground" />
+                  <span className="text-sm font-medium">컬럼 선택</span>
+                  <Badge variant="secondary" className="text-[10px] h-5">
+                    {config.columns?.filter((c) => !c.isEntityJoin && !c.additionalJoinInfo).length || 0}개 선택됨
+                  </Badge>
+                </div>
+                <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", columnSelectOpen && "rotate-180")} />
+              </button>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                <Input
+                  value={columnSearchText}
+                  onChange={(e) => setColumnSearchText(e.target.value)}
+                  placeholder="컬럼 검색..."
+                  className="h-7 text-xs"
+                />
+                <div className="space-y-0.5">
+                  {availableColumns
+                    .filter((column) => {
+                      if (!columnSearchText) return true;
+                      const search = columnSearchText.toLowerCase();
+                      return (
+                        column.columnName.toLowerCase().includes(search) ||
+                        (column.label || "").toLowerCase().includes(search)
+                      );
+                    })
+                    .map((column) => {
+                      const isAdded = config.columns?.some((c) => c.columnName === column.columnName);
+                      return (
+                        <div
+                          key={column.columnName}
+                          className={cn(
+                            "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
+                            isAdded && "bg-primary/10",
+                          )}
+                          onClick={() => {
+                            if (isAdded) {
+                              updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
+                            } else {
+                              addColumn(column.columnName);
+                            }
+                          }}
+                        >
+                          <Checkbox
+                            checked={isAdded}
+                            onCheckedChange={() => {
+                              if (isAdded) {
+                                updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
+                              } else {
+                                addColumn(column.columnName);
+                              }
+                            }}
+                            className="pointer-events-none h-3.5 w-3.5"
+                          />
+                          <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
+                          <span className="truncate text-xs">{column.label || column.columnName}</span>
+                          {isAdded && (
+                            <button
+                              type="button"
+                              title={
+                                config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
+                                  ? "편집 잠금 (클릭하여 해제)"
+                                  : "편집 가능 (클릭하여 잠금)"
+                              }
+                              className={cn(
+                                "ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
+                                config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
+                                  ? "text-destructive hover:bg-destructive/10"
+                                  : "text-muted-foreground hover:bg-muted",
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                const currentCol = config.columns?.find((c) => c.columnName === column.columnName);
+                                if (currentCol) {
+                                  updateColumn(column.columnName, {
+                                    editable: currentCol.editable === false ? undefined : false,
+                                  });
+                                }
+                              }}
+                            >
+                              {config.columns?.find((c) => c.columnName === column.columnName)?.editable === false ? (
+                                <Lock className="h-3 w-3" />
+                              ) : (
+                                <Unlock className="h-3 w-3" />
+                              )}
+                            </button>
+                          )}
+                          <span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
+                            {column.input_type || column.dataType}
+                          </span>
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {/* Entity 조인 컬럼 (Collapsible) */}
+          {entityJoinColumns.joinTables.length > 0 && (
+            <Collapsible open={entityJoinOpen} onOpenChange={setEntityJoinOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div className="flex items-center gap-2">
+                    <Link2 className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-sm font-medium">Entity 조인</span>
+                    <Badge variant="secondary" className="text-[10px] h-5">
+                      {entityJoinColumns.joinTables.length}개 테이블
+                    </Badge>
+                  </div>
+                  <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", entityJoinOpen && "rotate-180")} />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
+                  {entityJoinColumns.joinTables.map((joinTable, tableIndex) => {
+                    const addedCount = joinTable.availableColumns.filter((col) => {
+                      const match = entityJoinColumns.availableColumns.find(
+                        (jc) => jc.tableName === joinTable.tableName && jc.columnName === col.columnName,
+                      );
+                      return match && config.columns?.some((c) => c.columnName === match.joinAlias);
+                    }).length;
+                    const isSubOpen = entityJoinSubOpen[tableIndex] ?? false;
+
+                    return (
+                      <Collapsible key={tableIndex} open={isSubOpen} onOpenChange={(open) => setEntityJoinSubOpen((prev) => ({ ...prev, [tableIndex]: open }))}>
+                        <CollapsibleTrigger asChild>
+                          <button
+                            type="button"
+                            className="flex w-full items-center justify-between rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-left transition-colors hover:bg-primary/10"
+                          >
+                            <div className="flex items-center gap-2">
+                              <Link2 className="h-3 w-3 text-primary" />
+                              <span className="truncate text-xs font-medium">{joinTable.tableName}</span>
+                              <Badge variant="secondary" className="text-[10px] h-5">
+                                {addedCount > 0 ? `${addedCount}/${joinTable.availableColumns.length}개 선택` : `${joinTable.availableColumns.length}개 컬럼`}
+                              </Badge>
+                            </div>
+                            <ChevronDown className={cn("h-3 w-3 text-muted-foreground transition-transform duration-200", isSubOpen && "rotate-180")} />
+                          </button>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent>
+                          <div className="space-y-0.5 rounded-b-md border border-t-0 border-primary/20 bg-primary/5 p-2">
+                            {joinTable.availableColumns.map((column, colIndex) => {
+                              const matchingJoinColumn = entityJoinColumns.availableColumns.find(
+                                (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
+                              );
+                              const isAlreadyAdded = config.columns?.some(
+                                (col) => col.columnName === matchingJoinColumn?.joinAlias,
+                              );
+                              if (!matchingJoinColumn) return null;
+
+                              return (
+                                <div
+                                  key={colIndex}
+                                  className={cn(
+                                    "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10",
+                                    isAlreadyAdded && "bg-primary/10",
+                                  )}
+                                  onClick={() => {
+                                    if (isAlreadyAdded) {
+                                      updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
+                                    } else {
+                                      addEntityColumn(matchingJoinColumn);
+                                    }
+                                  }}
+                                >
+                                  <Checkbox
+                                    checked={isAlreadyAdded}
+                                    onCheckedChange={() => {
+                                      if (isAlreadyAdded) {
+                                        updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
+                                      } else {
+                                        addEntityColumn(matchingJoinColumn);
+                                      }
+                                    }}
+                                    className="pointer-events-none h-3.5 w-3.5"
+                                  />
+                                  <Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
+                                  <span className="truncate text-xs">{column.columnLabel}</span>
+                                  <span className="ml-auto text-[10px] text-primary/80">
+                                    {column.inputType || column.dataType}
+                                  </span>
+                                </div>
+                              );
+                            })}
+                          </div>
+                        </CollapsibleContent>
+                      </Collapsible>
+                    );
+                  })}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          )}
+        </>
+      )}
+
+      {/* 테이블 미선택 또는 컬럼 없음 안내 */}
+      {!targetTableName && (
+        <div className="rounded-lg border-2 border-dashed p-6 text-center">
+          <Table2 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+          <p className="text-sm text-muted-foreground">테이블이 선택되지 않았습니다</p>
+          <p className="text-xs text-muted-foreground">위 데이터 소스에서 테이블을 선택하세요</p>
+        </div>
+      )}
+
+      {targetTableName && availableColumns.length === 0 && (
+        <div className="rounded-lg border-2 border-dashed p-6 text-center">
+          <Columns3 className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
+          <p className="text-sm text-muted-foreground">컬럼 정보를 불러오는 중...</p>
+          <p className="mt-2 text-xs text-primary">현재 화면 테이블: {screenTableName}</p>
+        </div>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 3단계: 표시할 컬럼 (Collapsible + DnD)    */}
+      {/* ═══════════════════════════════════════ */}
+      {config.columns && config.columns.length > 0 && (
+        <Collapsible open={displayColumnsOpen} onOpenChange={setDisplayColumnsOpen}>
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-2">
+                <GripVertical className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">표시할 컬럼</span>
+                <Badge variant="secondary" className="text-[10px] h-5">
+                  {config.columns.length}개 설정됨
+                </Badge>
+              </div>
+              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", displayColumnsOpen && "rotate-180")} />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="rounded-b-lg border border-t-0 p-3">
+              <p className="text-[10px] text-muted-foreground mb-2">드래그하여 순서 변경, 클릭하여 표시명/너비 수정</p>
+              <DndContext
+                collisionDetection={closestCenter}
+                onDragEnd={(event: DragEndEvent) => {
+                  const { active, over } = event;
+                  if (!over || active.id === over.id) return;
+                  const columns = [...(config.columns || [])];
+                  const oldIndex = columns.findIndex((c) => c.columnName === active.id);
+                  const newIndex = columns.findIndex((c) => c.columnName === over.id);
+                  if (oldIndex !== -1 && newIndex !== -1) {
+                    const reordered = arrayMove(columns, oldIndex, newIndex);
+                    reordered.forEach((col, idx) => { col.order = idx; });
+                    updateField("columns", reordered);
+                  }
+                }}
+              >
+                <SortableContext
+                  items={(config.columns || []).map((c) => c.columnName)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-1">
+                    {(config.columns || []).map((column, idx) => {
+                      const resolvedLabel =
+                        column.displayName && column.displayName !== column.columnName
+                          ? column.displayName
+                          : availableColumns.find((c) => c.columnName === column.columnName)?.label || column.displayName || column.columnName;
+                      const colWithLabel = { ...column, displayName: resolvedLabel };
+                      return (
+                        <SortableColumnRow
+                          key={column.columnName}
+                          id={column.columnName}
+                          col={colWithLabel}
+                          index={idx}
+                          isEntityJoin={!!column.isEntityJoin}
+                          onLabelChange={(value) => updateColumn(column.columnName, { displayName: value })}
+                          onWidthChange={(value) => updateColumn(column.columnName, { width: value })}
+                          onRemove={() => removeColumn(column.columnName)}
+                        />
+                      );
+                    })}
+                  </div>
+                </SortableContext>
+              </DndContext>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 엔티티 컬럼 표시 설정 (접이식)            */}
+      {/* ═══════════════════════════════════════ */}
+      {config.columns?.some((col) => col.isEntityJoin) && (
+        <Collapsible open={entityDisplayOpen} onOpenChange={setEntityDisplayOpen}>
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+            >
+              <div className="flex items-center gap-2">
+                <Link2 className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium">엔티티 컬럼 표시 설정</span>
+              </div>
+              <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", entityDisplayOpen && "rotate-180")} />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="rounded-b-lg border border-t-0 p-4 space-y-4">
+              {config.columns
+                ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig)
+                .map((column) => (
+                  <div key={column.columnName} className="space-y-2">
+                    <span className="text-xs font-medium">{column.displayName || column.columnName}</span>
+
+                    {entityDisplayConfigs[column.columnName] ? (
+                      <div className="space-y-2">
+                        {/* 구분자 */}
+                        <div className="flex items-center justify-between">
+                          <span className="text-xs text-muted-foreground">구분자</span>
+                          <Input
+                            value={entityDisplayConfigs[column.columnName].separator}
+                            onChange={(e) => updateEntityDisplaySeparator(column.columnName, e.target.value)}
+                            className="h-6 w-20 text-xs"
+                            placeholder=" - "
+                          />
+                        </div>
+
+                        {/* 표시 컬럼 선택 */}
+                        {entityDisplayConfigs[column.columnName].sourceColumns.length === 0 &&
+                        entityDisplayConfigs[column.columnName].joinColumns.length === 0 ? (
+                          <div className="py-2 text-center text-xs text-muted-foreground/70">
+                            표시 가능한 컬럼이 없습니다.
+                            {!column.entityDisplayConfig?.joinTable && (
+                              <p className="mt-1 text-[10px]">
+                                테이블 타입 관리에서 참조 테이블을 설정하면 더 많은 컬럼을 선택할 수 있습니다.
+                              </p>
+                            )}
+                          </div>
+                        ) : (
+                          <div className="space-y-1">
+                            <span className="text-xs text-muted-foreground">표시할 컬럼 선택</span>
+                            <Popover>
+                              <PopoverTrigger asChild>
+                                <Button variant="outline" className="h-6 w-full justify-between text-xs">
+                                  {entityDisplayConfigs[column.columnName].selectedColumns.length > 0
+                                    ? `${entityDisplayConfigs[column.columnName].selectedColumns.length}개 선택됨`
+                                    : "컬럼 선택"}
+                                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                </Button>
+                              </PopoverTrigger>
+                              <PopoverContent className="w-full p-0" align="start">
+                                <Command>
+                                  <CommandInput placeholder="컬럼 검색..." className="text-xs" />
+                                  <CommandList>
+                                    <CommandEmpty className="text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
+                                    {entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+                                      <CommandGroup
+                                        heading={`기본 테이블: ${column.entityDisplayConfig?.sourceTable || config.selectedTable || screenTableName}`}
+                                      >
+                                        {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => (
+                                          <CommandItem
+                                            key={`source-${col.columnName}`}
+                                            onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                            className="text-xs"
+                                          >
+                                            <Check
+                                              className={cn(
+                                                "mr-2 h-4 w-4",
+                                                entityDisplayConfigs[column.columnName].selectedColumns.includes(col.columnName) ? "opacity-100" : "opacity-0",
+                                              )}
+                                            />
+                                            {col.displayName}
+                                          </CommandItem>
+                                        ))}
+                                      </CommandGroup>
+                                    )}
+                                    {entityDisplayConfigs[column.columnName].joinColumns.length > 0 && (
+                                      <CommandGroup heading={`참조 테이블: ${column.entityDisplayConfig?.joinTable}`}>
+                                        {entityDisplayConfigs[column.columnName].joinColumns.map((col) => (
+                                          <CommandItem
+                                            key={`join-${col.columnName}`}
+                                            onSelect={() => toggleEntityDisplayColumn(column.columnName, col.columnName)}
+                                            className="text-xs"
+                                          >
+                                            <Check
+                                              className={cn(
+                                                "mr-2 h-4 w-4",
+                                                entityDisplayConfigs[column.columnName].selectedColumns.includes(col.columnName) ? "opacity-100" : "opacity-0",
+                                              )}
+                                            />
+                                            {col.displayName}
+                                          </CommandItem>
+                                        ))}
+                                      </CommandGroup>
+                                    )}
+                                  </CommandList>
+                                </Command>
+                              </PopoverContent>
+                            </Popover>
+                          </div>
+                        )}
+
+                        {/* 참조 테이블 미설정 안내 */}
+                        {!column.entityDisplayConfig?.joinTable &&
+                          entityDisplayConfigs[column.columnName].sourceColumns.length > 0 && (
+                            <div className="rounded bg-primary/10 p-2 text-[10px] text-primary">
+                              현재 기본 테이블 컬럼만 표시됩니다. 테이블 타입 관리에서 참조 테이블을 설정하면 조인된 테이블의 컬럼도 선택할 수 있습니다.
+                            </div>
+                          )}
+
+                        {/* 선택된 컬럼 미리보기 */}
+                        {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && (
+                          <div className="space-y-1">
+                            <span className="text-xs text-muted-foreground">미리보기</span>
+                            <div className="flex flex-wrap gap-1 rounded bg-muted p-2 text-xs">
+                              {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => (
+                                <React.Fragment key={colName}>
+                                  <Badge variant="secondary" className="text-xs">{colName}</Badge>
+                                  {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && (
+                                    <span className="text-muted-foreground/70">
+                                      {entityDisplayConfigs[column.columnName].separator}
+                                    </span>
+                                  )}
+                                </React.Fragment>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
+                        <Loader2 className="h-3 w-3 animate-spin" />
+                        컬럼 정보 로딩 중...
+                      </div>
+                    )}
+
+                    {config.columns?.filter((c) => c.isEntityJoin && c.entityDisplayConfig).indexOf(column) !==
+                      (config.columns?.filter((c) => c.isEntityJoin && c.entityDisplayConfig).length || 0) - 1 && (
+                      <Separator className="my-2" />
+                    )}
+                  </div>
+                ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 4단계: 툴바 버튼 설정 (Switch 토글)       */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Wrench} title="툴바 버튼" description="테이블 상단에 표시할 버튼을 선택합니다" />
+        <Separator />
+        <div className="space-y-1">
+          <SwitchRow
+            label="즉시 저장"
+            description="인라인 편집 후 즉시 저장하는 모드 버튼"
+            checked={config.toolbar?.showEditMode ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showEditMode", checked)}
+          />
+          <SwitchRow
+            label="Excel 내보내기"
+            checked={config.toolbar?.showExcel ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showExcel", checked)}
+          />
+          <SwitchRow
+            label="PDF 내보내기"
+            checked={config.toolbar?.showPdf ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showPdf", checked)}
+          />
+          <SwitchRow
+            label="복사"
+            checked={config.toolbar?.showCopy ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showCopy", checked)}
+          />
+          <SwitchRow
+            label="검색"
+            checked={config.toolbar?.showSearch ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showSearch", checked)}
+          />
+          <SwitchRow
+            label="필터"
+            checked={config.toolbar?.showFilter ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showFilter", checked)}
+          />
+          <SwitchRow
+            label="새로고침 (상단)"
+            checked={config.toolbar?.showRefresh ?? false}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showRefresh", checked)}
+          />
+          <SwitchRow
+            label="새로고침 (하단)"
+            checked={config.toolbar?.showPaginationRefresh ?? true}
+            onCheckedChange={(checked) => updateNestedField("toolbar", "showPaginationRefresh", checked)}
+          />
+        </div>
+      </div>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 5단계: 고급 설정 (기본 접힘)              */}
+      {/* ═══════════════════════════════════════ */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", advancedOpen && "rotate-180")}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-5">
+
+            {/* 체크박스 설정 */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <CheckSquare className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-medium">체크박스</span>
+              </div>
+
+              <SwitchRow
+                label="체크박스 표시"
+                description="행 선택용 체크박스를 표시합니다"
+                checked={config.checkbox?.enabled ?? true}
+                onCheckedChange={(checked) => updateNestedField("checkbox", "enabled", checked)}
+              />
+
+              {config.checkbox?.enabled && (
+                <div className="ml-4 space-y-2 border-l-2 border-primary/20 pl-3">
+                  <SwitchRow
+                    label="전체 선택"
+                    description="헤더에 전체 선택/해제 체크박스 표시"
+                    checked={config.checkbox?.selectAll ?? true}
+                    onCheckedChange={(checked) => updateNestedField("checkbox", "selectAll", checked)}
+                  />
+                  <div className="flex items-center justify-between py-1">
+                    <span className="text-xs text-muted-foreground">체크박스 위치</span>
+                    <Select
+                      value={config.checkbox?.position || "left"}
+                      onValueChange={(value) => updateNestedField("checkbox", "position", value)}
+                    >
+                      <SelectTrigger className="h-7 w-[100px] text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="left">왼쪽</SelectItem>
+                        <SelectItem value="right">오른쪽</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <Separator />
+
+            {/* 기본 정렬 설정 */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <ArrowUpDown className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-medium">기본 정렬</span>
+              </div>
+              <p className="text-[10px] text-muted-foreground">테이블 로드 시 기본 정렬 순서를 지정합니다</p>
+
+              <div className="flex items-center justify-between py-1">
+                <span className="text-xs text-muted-foreground">정렬 컬럼</span>
+                <Select
+                  value={config.defaultSort?.columnName || "_none_"}
+                  onValueChange={(value) => {
+                    if (value === "_none_") {
+                      updateField("defaultSort", undefined);
+                    } else {
+                      updateField("defaultSort", {
+                        columnName: value,
+                        direction: config.defaultSort?.direction || "asc",
+                      });
+                    }
+                  }}
+                >
+                  <SelectTrigger className="h-7 w-[160px] text-xs">
+                    <SelectValue placeholder="정렬 없음" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="_none_">정렬 없음</SelectItem>
+                    {availableColumns.map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName}>
+                        {col.label || col.columnName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {config.defaultSort?.columnName && (
+                <div className="flex items-center justify-between py-1">
+                  <span className="text-xs text-muted-foreground">정렬 방향</span>
+                  <Select
+                    value={config.defaultSort?.direction || "asc"}
+                    onValueChange={(value) =>
+                      updateField("defaultSort", {
+                        ...config.defaultSort,
+                        columnName: config.defaultSort?.columnName || "",
+                        direction: value as "asc" | "desc",
+                      })
+                    }
+                  >
+                    <SelectTrigger className="h-7 w-[160px] text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="asc">오름차순 (A→Z, 1→9)</SelectItem>
+                      <SelectItem value="desc">내림차순 (Z→A, 9→1)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
+            </div>
+
+            <Separator />
+
+            {/* 가로 스크롤 */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <ScrollText className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-medium">가로 스크롤 및 컬럼 고정</span>
+              </div>
+
+              <SwitchRow
+                label="가로 스크롤 사용"
+                description="컬럼이 많을 때 가로 스크롤을 활성화합니다"
+                checked={config.horizontalScroll?.enabled ?? false}
+                onCheckedChange={(checked) => updateNestedField("horizontalScroll", "enabled", checked)}
+              />
+
+              {config.horizontalScroll?.enabled && (
+                <div className="ml-4 border-l-2 border-primary/20 pl-3">
+                  <div className="flex items-center justify-between py-1">
+                    <div>
+                      <p className="text-xs">최대 표시 컬럼 수</p>
+                      <p className="text-[10px] text-muted-foreground">이 수를 넘는 컬럼이 있으면 가로 스크롤이 생성됩니다</p>
+                    </div>
+                    <Input
+                      type="number"
+                      value={config.horizontalScroll?.maxVisibleColumns || 8}
+                      onChange={(e) => updateNestedField("horizontalScroll", "maxVisibleColumns", parseInt(e.target.value) || 8)}
+                      min={3}
+                      max={20}
+                      className="h-7 w-[80px] text-xs"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ═══════════════════════════════════════ */}
+      {/* 6단계: 데이터 필터링                      */}
+      {/* ═══════════════════════════════════════ */}
+      <div className="space-y-3">
+        <SectionHeader icon={Filter} title="데이터 필터링" description="특정 컬럼 값으로 데이터를 필터링합니다" />
+        <Separator />
+        <DataFilterConfigPanel
+          tableName={config.selectedTable || screenTableName}
+          columns={availableColumns.map(
+            (col) =>
+              ({
+                columnName: col.columnName,
+                columnLabel: col.label || col.columnName,
+                dataType: col.dataType,
+                input_type: col.input_type,
+              }) as any,
+          )}
+          config={config.dataFilter}
+          onConfigChange={(dataFilter) => updateField("dataFilter", dataFilter)}
+        />
+      </div>
+    </div>
+  );
+};
+
+V2TableListConfigPanel.displayName = "V2TableListConfigPanel";
+
+export default V2TableListConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2TableSearchWidgetConfigPanel.tsx b/frontend/components/v2/config-panels/V2TableSearchWidgetConfigPanel.tsx
new file mode 100644
index 00000000..d477a9f9
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2TableSearchWidgetConfigPanel.tsx
@@ -0,0 +1,563 @@
+"use client";
+
+/**
+ * V2TableSearchWidget 설정 패널
+ * 토스식 단계별 UX: 대상 패널 카드 선택 -> 필터 모드 카드 선택 -> 고정 필터 목록 -> 고급 설정(접힘)
+ */
+
+import React, { useState, useEffect, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  PanelLeft,
+  PanelRight,
+  Layers,
+  Zap,
+  Lock,
+  Plus,
+  Trash2,
+  Settings,
+  ChevronDown,
+  Search,
+  Filter,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ─── 대상 패널 위치 카드 정의 ───
+const PANEL_POSITION_CARDS = [
+  {
+    value: "left",
+    icon: PanelLeft,
+    title: "좌측 패널",
+    description: "카드 디스플레이 등",
+  },
+  {
+    value: "right",
+    icon: PanelRight,
+    title: "우측 패널",
+    description: "테이블 리스트 등",
+  },
+  {
+    value: "auto",
+    icon: Layers,
+    title: "자동",
+    description: "모든 테이블 대상",
+  },
+] as const;
+
+// ─── 필터 모드 카드 정의 ───
+const FILTER_MODE_CARDS = [
+  {
+    value: "dynamic",
+    icon: Zap,
+    title: "동적 모드",
+    description: "사용자가 직접 필터를 선택해요",
+  },
+  {
+    value: "preset",
+    icon: Lock,
+    title: "고정 모드",
+    description: "디자이너가 미리 필터를 지정해요",
+  },
+] as const;
+
+// ─── 필터 타입 옵션 ───
+const FILTER_TYPE_OPTIONS = [
+  { value: "text", label: "텍스트" },
+  { value: "number", label: "숫자" },
+  { value: "date", label: "날짜" },
+  { value: "select", label: "선택" },
+] as const;
+
+interface PresetFilter {
+  id: string;
+  columnName: string;
+  columnLabel: string;
+  filterType: "text" | "number" | "date" | "select";
+  width?: number;
+  multiSelect?: boolean;
+}
+
+// ─── 수평 Switch Row (토스 패턴) ───
+function SwitchRow({
+  label,
+  description,
+  checked,
+  onCheckedChange,
+}: {
+  label: string;
+  description?: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between py-1">
+      <div className="space-y-0.5">
+        <p className="text-sm">{label}</p>
+        {description && (
+          <p className="text-[11px] text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <Switch checked={checked} onCheckedChange={onCheckedChange} />
+    </div>
+  );
+}
+
+// ─── 섹션 헤더 컴포넌트 ───
+function SectionHeader({
+  icon: Icon,
+  title,
+  description,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <h3 className="text-sm font-semibold">{title}</h3>
+      </div>
+      {description && (
+        <p className="text-muted-foreground text-[10px]">{description}</p>
+      )}
+    </div>
+  );
+}
+
+// ─── inputType에서 filterType 추출 헬퍼 ───
+function getFilterTypeFromInputType(
+  inputType: string
+): "text" | "number" | "date" | "select" {
+  if (
+    inputType.includes("number") ||
+    inputType.includes("decimal") ||
+    inputType.includes("integer")
+  ) {
+    return "number";
+  }
+  if (inputType.includes("date") || inputType.includes("time")) {
+    return "date";
+  }
+  if (
+    inputType.includes("select") ||
+    inputType.includes("dropdown") ||
+    inputType.includes("code") ||
+    inputType.includes("category")
+  ) {
+    return "select";
+  }
+  return "text";
+}
+
+interface V2TableSearchWidgetConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  tables?: any[];
+}
+
+export const V2TableSearchWidgetConfigPanel: React.FC<
+  V2TableSearchWidgetConfigPanelProps
+> = ({ config: configProp, onChange, tables = [] }) => {
+  const config = configProp || {};
+
+  // componentConfigChanged 이벤트 발행 래퍼
+  const handleChange = useCallback(
+    (newConfig: Record<string, any>) => {
+      onChange(newConfig);
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent("componentConfigChanged", {
+            detail: { config: newConfig },
+          })
+        );
+      }
+    },
+    [onChange]
+  );
+
+  // key-value 형태 업데이트 헬퍼
+  const updateField = useCallback(
+    (key: string, value: any) => {
+      handleChange({ ...config, [key]: value });
+    },
+    [handleChange, config]
+  );
+
+  // 첫 번째 테이블의 컬럼 목록
+  const availableColumns =
+    tables.length > 0 && tables[0].columns ? tables[0].columns : [];
+
+  // ─── 로컬 상태 ───
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [localPresetFilters, setLocalPresetFilters] = useState<PresetFilter[]>(
+    config.presetFilters ?? []
+  );
+
+  // config 외부 변경 시 로컬 상태 동기화
+  useEffect(() => {
+    setLocalPresetFilters(config.presetFilters ?? []);
+  }, [config.presetFilters]);
+
+  // 현재 config 값들
+  const targetPanelPosition = config.targetPanelPosition ?? "left";
+  const filterMode = config.filterMode ?? "dynamic";
+  const autoSelectFirstTable = config.autoSelectFirstTable ?? true;
+  const showTableSelector = config.showTableSelector ?? true;
+
+  // ─── 고정 필터 CRUD ───
+  const addFilter = useCallback(() => {
+    const newFilter: PresetFilter = {
+      id: `filter_${Date.now()}`,
+      columnName: "",
+      columnLabel: "",
+      filterType: "text",
+      width: 200,
+    };
+    const updated = [...localPresetFilters, newFilter];
+    setLocalPresetFilters(updated);
+    handleChange({ ...config, presetFilters: updated });
+  }, [localPresetFilters, handleChange, config]);
+
+  const removeFilter = useCallback(
+    (id: string) => {
+      const updated = localPresetFilters.filter((f) => f.id !== id);
+      setLocalPresetFilters(updated);
+      handleChange({ ...config, presetFilters: updated });
+    },
+    [localPresetFilters, handleChange, config]
+  );
+
+  const updateFilter = useCallback(
+    (id: string, field: keyof PresetFilter, value: any) => {
+      const updated = localPresetFilters.map((f) =>
+        f.id === id ? { ...f, [field]: value } : f
+      );
+      setLocalPresetFilters(updated);
+      handleChange({ ...config, presetFilters: updated });
+    },
+    [localPresetFilters, handleChange, config]
+  );
+
+  // 컬럼 선택 시 라벨+타입 자동 설정
+  const handleColumnSelect = useCallback(
+    (filterId: string, columnName: string) => {
+      const selectedColumn = availableColumns.find(
+        (col: any) => col.columnName === columnName
+      );
+      const updated = localPresetFilters.map((f) =>
+        f.id === filterId
+          ? {
+              ...f,
+              columnName,
+              columnLabel: selectedColumn?.columnLabel || columnName,
+              filterType: getFilterTypeFromInputType(
+                selectedColumn?.inputType || "text"
+              ),
+            }
+          : f
+      );
+      setLocalPresetFilters(updated);
+      handleChange({ ...config, presetFilters: updated });
+    },
+    [availableColumns, localPresetFilters, handleChange, config]
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 대상 패널 위치 선택 ─── */}
+      <div className="space-y-2">
+        <SectionHeader
+          icon={Search}
+          title="검색 필터 위젯"
+          description="화면 내 테이블을 자동 감지하여 검색, 필터, 그룹 기능을 제공합니다"
+        />
+
+        <p className="text-sm font-medium mt-3">
+          어떤 패널의 테이블을 대상으로 하나요?
+        </p>
+        <div className="grid grid-cols-3 gap-2">
+          {PANEL_POSITION_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = targetPanelPosition === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateField("targetPanelPosition", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 2단계: 필터 모드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">필터를 어떻게 구성할까요?</p>
+        <div className="grid grid-cols-2 gap-2">
+          {FILTER_MODE_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = filterMode === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateField("filterMode", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-3 text-center transition-all min-h-[80px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-5 w-5 mb-1.5 text-primary" />
+                <span className="text-xs font-medium leading-tight">
+                  {card.title}
+                </span>
+                <span className="text-[10px] text-muted-foreground leading-tight mt-0.5">
+                  {card.description}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 3단계: 고정 모드 필터 목록 ─── */}
+      {filterMode === "preset" && (
+        <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Filter className="h-4 w-4 text-primary" />
+              <span className="text-sm font-medium">고정 필터 목록</span>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addFilter}
+              className="h-7 px-2 text-xs"
+            >
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+          </div>
+
+          {localPresetFilters.length === 0 ? (
+            <div className="text-center py-6 text-muted-foreground">
+              <Filter className="mx-auto mb-2 h-8 w-8 opacity-30" />
+              <p className="text-sm">아직 필터가 없어요</p>
+              <p className="text-xs">
+                위의 추가 버튼으로 필터를 만들어보세요
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {localPresetFilters.map((filter) => (
+                <div
+                  key={filter.id}
+                  className="bg-card flex flex-col gap-2 rounded-md border px-3 py-2.5"
+                >
+                  {/* 상단: 컬럼 선택 + 삭제 */}
+                  <div className="flex items-center gap-1.5">
+                    <div className="flex-1">
+                      {availableColumns.length > 0 ? (
+                        <Select
+                          value={filter.columnName || ""}
+                          onValueChange={(value) =>
+                            handleColumnSelect(filter.id, value)
+                          }
+                        >
+                          <SelectTrigger className="h-7 text-xs">
+                            <SelectValue placeholder="컬럼 선택" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {availableColumns.map((col: any) => (
+                              <SelectItem
+                                key={col.columnName}
+                                value={col.columnName}
+                              >
+                                <div className="flex items-center gap-2">
+                                  <span className="font-medium">
+                                    {col.columnLabel}
+                                  </span>
+                                  <span className="text-muted-foreground text-[10px]">
+                                    ({col.columnName})
+                                  </span>
+                                </div>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      ) : (
+                        <Input
+                          value={filter.columnName}
+                          onChange={(e) =>
+                            updateFilter(
+                              filter.id,
+                              "columnName",
+                              e.target.value
+                            )
+                          }
+                          placeholder="예: customer_name"
+                          className="h-7 text-xs"
+                        />
+                      )}
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => removeFilter(filter.id)}
+                      className="text-muted-foreground hover:text-destructive h-7 w-7 shrink-0 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  {/* 하단: 필터 타입 + 너비 */}
+                  <div className="flex items-center gap-1.5">
+                    <Select
+                      value={filter.filterType}
+                      onValueChange={(
+                        value: "text" | "number" | "date" | "select"
+                      ) => updateFilter(filter.id, "filterType", value)}
+                    >
+                      <SelectTrigger className="h-7 flex-1 text-xs">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {FILTER_TYPE_OPTIONS.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>
+                            {opt.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <div className="flex items-center gap-1">
+                      <span className="text-muted-foreground shrink-0 text-[10px]">
+                        너비
+                      </span>
+                      <Input
+                        type="number"
+                        value={filter.width || 200}
+                        onChange={(e) =>
+                          updateFilter(
+                            filter.id,
+                            "width",
+                            parseInt(e.target.value) || 200
+                          )
+                        }
+                        className="h-7 w-16 text-xs"
+                        min={100}
+                        max={500}
+                      />
+                    </div>
+                  </div>
+
+                  {/* 표시명 (컬럼 선택 시 자동 설정, 수동 변경 가능) */}
+                  {filter.columnLabel && (
+                    <p className="text-muted-foreground text-[10px]">
+                      표시명: {filter.columnLabel}
+                    </p>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          <p className="text-[11px] text-muted-foreground">
+            고정 모드에서는 설정 버튼이 숨겨지고 지정된 필터만 표시돼요
+          </p>
+        </div>
+      )}
+
+      {/* 동적 모드 안내 */}
+      {filterMode === "dynamic" && (
+        <div className="rounded-lg border bg-muted/30 p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Zap className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">동적 모드 안내</span>
+          </div>
+          <p className="text-[11px] text-muted-foreground">
+            사용자가 테이블 설정 버튼을 클릭하여 원하는 필터를 직접 선택할 수
+            있어요. 필터 설정은 브라우저에 저장되어 다음 접속 시에도 유지돼요.
+          </p>
+        </div>
+      )}
+
+      {/* ─── 4단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-2">
+            <SwitchRow
+              label="첫 번째 테이블 자동 선택"
+              description="화면 로딩 시 대상 패널의 첫 번째 테이블을 자동으로 선택해요"
+              checked={autoSelectFirstTable}
+              onCheckedChange={(checked) =>
+                updateField("autoSelectFirstTable", checked)
+              }
+            />
+            <SwitchRow
+              label="테이블 선택 드롭다운 표시"
+              description="여러 테이블이 있을 때 사용자가 직접 대상을 선택할 수 있어요"
+              checked={showTableSelector}
+              onCheckedChange={(checked) =>
+                updateField("showTableSelector", checked)
+              }
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2TableSearchWidgetConfigPanel.displayName = "V2TableSearchWidgetConfigPanel";
+
+export default V2TableSearchWidgetConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2TextDisplayConfigPanel.tsx b/frontend/components/v2/config-panels/V2TextDisplayConfigPanel.tsx
new file mode 100644
index 00000000..82291ebb
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2TextDisplayConfigPanel.tsx
@@ -0,0 +1,304 @@
+"use client";
+
+/**
+ * V2TextDisplay 설정 패널
+ * 토스식 단계별 UX: 텍스트 내용 -> 폰트 설정(카드선택) -> 정렬(카드선택) -> 고급 설정(접힘)
+ */
+
+import React, { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+  Settings,
+  ChevronDown,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { TextDisplayConfig } from "@/lib/registry/components/v2-text-display/types";
+
+const FONT_SIZE_CARDS = [
+  { value: "12px", label: "작게", preview: "Aa" },
+  { value: "14px", label: "보통", preview: "Aa" },
+  { value: "18px", label: "크게", preview: "Aa" },
+  { value: "24px", label: "제목", preview: "Aa" },
+] as const;
+
+const FONT_WEIGHT_CARDS = [
+  { value: "lighter", label: "얇게" },
+  { value: "normal", label: "보통" },
+  { value: "bold", label: "굵게" },
+] as const;
+
+const ALIGN_CARDS = [
+  { value: "left", label: "왼쪽", icon: AlignLeft },
+  { value: "center", label: "가운데", icon: AlignCenter },
+  { value: "right", label: "오른쪽", icon: AlignRight },
+] as const;
+
+interface V2TextDisplayConfigPanelProps {
+  config: TextDisplayConfig;
+  onChange: (config: Partial<TextDisplayConfig>) => void;
+}
+
+export const V2TextDisplayConfigPanel: React.FC<V2TextDisplayConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  const updateConfig = (field: keyof TextDisplayConfig, value: any) => {
+    const newConfig = { ...config, [field]: value };
+    onChange({ [field]: value });
+
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("componentConfigChanged", {
+          detail: { config: newConfig },
+        })
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 표시 텍스트 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">표시 텍스트</p>
+        <Input
+          value={config.text || ""}
+          onChange={(e) => updateConfig("text", e.target.value)}
+          placeholder="표시할 텍스트를 입력하세요"
+          className="h-8 text-sm"
+        />
+        <p className="text-[11px] text-muted-foreground">화면에 보여질 텍스트를 입력해요</p>
+      </div>
+
+      {/* ─── 2단계: 폰트 크기 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">폰트 크기</p>
+        <div className="grid grid-cols-4 gap-2">
+          {FONT_SIZE_CARDS.map((card) => {
+            const isSelected = (config.fontSize || "14px") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("fontSize", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[60px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span
+                  className="font-medium"
+                  style={{ fontSize: card.value }}
+                >
+                  {card.preview}
+                </span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+        <div className="flex items-center justify-between pt-1">
+          <span className="text-[11px] text-muted-foreground">직접 입력</span>
+          <Input
+            value={config.fontSize || "14px"}
+            onChange={(e) => updateConfig("fontSize", e.target.value)}
+            placeholder="14px"
+            className="h-7 w-[100px] text-xs"
+          />
+        </div>
+      </div>
+
+      {/* ─── 3단계: 폰트 굵기 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">폰트 굵기</p>
+        <div className="grid grid-cols-3 gap-2">
+          {FONT_WEIGHT_CARDS.map((card) => {
+            const isSelected = (config.fontWeight || "normal") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("fontWeight", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all min-h-[50px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <span
+                  className="text-sm"
+                  style={{ fontWeight: card.value }}
+                >
+                  가나다
+                </span>
+                <span className="text-[10px] text-muted-foreground mt-0.5">
+                  {card.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 4단계: 텍스트 정렬 카드 선택 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">텍스트 정렬</p>
+        <div className="grid grid-cols-3 gap-2">
+          {ALIGN_CARDS.map((card) => {
+            const Icon = card.icon;
+            const isSelected = (config.textAlign || "left") === card.value;
+            return (
+              <button
+                key={card.value}
+                type="button"
+                onClick={() => updateConfig("textAlign", card.value)}
+                className={cn(
+                  "flex flex-col items-center justify-center rounded-lg border p-2.5 text-center transition-all gap-1 min-h-[50px]",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/50 hover:bg-muted/50"
+                )}
+              >
+                <Icon className="h-4 w-4 text-muted-foreground" />
+                <span className="text-[10px] text-muted-foreground">
+                  {card.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* ─── 5단계: 텍스트 색상 ─── */}
+      <div className="space-y-2">
+        <p className="text-sm font-medium">텍스트 색상</p>
+        <div className="rounded-lg border bg-muted/30 p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div
+                className="h-6 w-6 rounded-md border"
+                style={{ backgroundColor: config.color || "#212121" }}
+              />
+              <span className="text-xs text-muted-foreground">
+                {config.color || "#212121"}
+              </span>
+            </div>
+            <Input
+              type="color"
+              value={config.color || "#212121"}
+              onChange={(e) => updateConfig("color", e.target.value)}
+              className="h-7 w-[60px] cursor-pointer p-0.5"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 6단계: 고급 설정 (기본 접혀있음) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">고급 설정</span>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 배경색 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">배경색</span>
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-5 w-5 rounded border"
+                  style={{ backgroundColor: config.backgroundColor || "#ffffff" }}
+                />
+                <Input
+                  type="color"
+                  value={config.backgroundColor || "#ffffff"}
+                  onChange={(e) => updateConfig("backgroundColor", e.target.value)}
+                  className="h-7 w-[60px] cursor-pointer p-0.5"
+                />
+              </div>
+            </div>
+
+            {/* 패딩 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">패딩</span>
+              <Input
+                value={config.padding || ""}
+                onChange={(e) => updateConfig("padding", e.target.value)}
+                placeholder="8px"
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 모서리 둥글기 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">모서리 둥글기</span>
+              <Input
+                value={config.borderRadius || ""}
+                onChange={(e) => updateConfig("borderRadius", e.target.value)}
+                placeholder="4px"
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 테두리 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground">테두리</span>
+              <Input
+                value={config.border || ""}
+                onChange={(e) => updateConfig("border", e.target.value)}
+                placeholder="1px solid #d1d5db"
+                className="h-7 w-[140px] text-xs"
+              />
+            </div>
+
+            {/* 비활성화 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">비활성화</p>
+                <p className="text-[11px] text-muted-foreground">
+                  컴포넌트를 비활성화 상태로 만들어요
+                </p>
+              </div>
+              <Switch
+                checked={config.disabled || false}
+                onCheckedChange={(checked) => updateConfig("disabled", checked)}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2TextDisplayConfigPanel.displayName = "V2TextDisplayConfigPanel";
+
+export default V2TextDisplayConfigPanel;
diff --git a/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx b/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx
new file mode 100644
index 00000000..11815db8
--- /dev/null
+++ b/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx
@@ -0,0 +1,1123 @@
+"use client";
+
+/**
+ * V2 타임라인 스케줄러 설정 패널
+ * 토스식 단계별 UX: 스케줄 데이터 설정 -> 소스 데이터 설정 -> 리소스 설정 -> 표시 설정(접힘) -> 고급 설정(접힘)
+ */
+
+import React, { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Settings, ChevronDown, Check, ChevronsUpDown, Database, Users, Layers } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { tableTypeApi } from "@/lib/api/screen";
+import type { TimelineSchedulerConfig, ScheduleType, SourceDataConfig, ResourceFieldMapping, FieldMapping, ZoomLevel } from "@/lib/registry/components/v2-timeline-scheduler/types";
+import { zoomLevelOptions, scheduleTypeOptions } from "@/lib/registry/components/v2-timeline-scheduler/config";
+
+interface V2TimelineSchedulerConfigPanelProps {
+  config: TimelineSchedulerConfig;
+  onChange: (config: Partial<TimelineSchedulerConfig>) => void;
+}
+
+interface TableInfo {
+  tableName: string;
+  displayName: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  displayName: string;
+}
+
+export const V2TimelineSchedulerConfigPanel: React.FC<V2TimelineSchedulerConfigPanelProps> = ({
+  config,
+  onChange,
+}) => {
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [sourceColumns, setSourceColumns] = useState<ColumnInfo[]>([]);
+  const [resourceColumns, setResourceColumns] = useState<ColumnInfo[]>([]);
+  const [scheduleColumns, setScheduleColumns] = useState<ColumnInfo[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [sourceTableOpen, setSourceTableOpen] = useState(false);
+  const [resourceTableOpen, setResourceTableOpen] = useState(false);
+  const [customTableOpen, setCustomTableOpen] = useState(false);
+  const [scheduleDataOpen, setScheduleDataOpen] = useState(true);
+  const [sourceDataOpen, setSourceDataOpen] = useState(true);
+  const [resourceOpen, setResourceOpen] = useState(true);
+  const [displayOpen, setDisplayOpen] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
+  useEffect(() => {
+    const loadTables = async () => {
+      setLoading(true);
+      try {
+        const tableList = await tableTypeApi.getTables();
+        if (Array.isArray(tableList)) {
+          setTables(
+            tableList.map((t: any) => ({
+              tableName: t.table_name || t.tableName,
+              displayName: t.display_name || t.displayName || t.table_name || t.tableName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("테이블 목록 로드 오류:", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  useEffect(() => {
+    const loadSourceColumns = async () => {
+      if (!config.sourceConfig?.tableName) {
+        setSourceColumns([]);
+        return;
+      }
+      try {
+        const columns = await tableTypeApi.getColumns(config.sourceConfig.tableName);
+        if (Array.isArray(columns)) {
+          setSourceColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("소스 컬럼 로드 오류:", err);
+        setSourceColumns([]);
+      }
+    };
+    loadSourceColumns();
+  }, [config.sourceConfig?.tableName]);
+
+  useEffect(() => {
+    const loadResourceColumns = async () => {
+      if (!config.resourceTable) {
+        setResourceColumns([]);
+        return;
+      }
+      try {
+        const columns = await tableTypeApi.getColumns(config.resourceTable);
+        if (Array.isArray(columns)) {
+          setResourceColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("리소스 컬럼 로드 오류:", err);
+        setResourceColumns([]);
+      }
+    };
+    loadResourceColumns();
+  }, [config.resourceTable]);
+
+  // 커스텀 테이블 또는 schedule_mng 컬럼 로드
+  useEffect(() => {
+    const loadScheduleColumns = async () => {
+      const tableName = config.useCustomTable && config.customTableName
+        ? config.customTableName
+        : "schedule_mng";
+      try {
+        const columns = await tableTypeApi.getColumns(tableName);
+        if (Array.isArray(columns)) {
+          setScheduleColumns(
+            columns.map((col: any) => ({
+              columnName: col.column_name || col.columnName,
+              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
+            }))
+          );
+        }
+      } catch (err) {
+        console.error("스케줄 테이블 컬럼 로드 오류:", err);
+        setScheduleColumns([]);
+      }
+    };
+    loadScheduleColumns();
+  }, [config.useCustomTable, config.customTableName]);
+
+  const updateConfig = (updates: Partial<TimelineSchedulerConfig>) => {
+    onChange({ ...config, ...updates });
+  };
+
+  const updateSourceConfig = (updates: Partial<SourceDataConfig>) => {
+    updateConfig({
+      sourceConfig: {
+        ...config.sourceConfig,
+        ...updates,
+      },
+    });
+  };
+
+  const updateFieldMapping = (field: string, value: string) => {
+    updateConfig({
+      fieldMapping: {
+        ...config.fieldMapping,
+        id: config.fieldMapping?.id || "id",
+        resourceId: config.fieldMapping?.resourceId || "resource_id",
+        title: config.fieldMapping?.title || "title",
+        startDate: config.fieldMapping?.startDate || "start_date",
+        endDate: config.fieldMapping?.endDate || "end_date",
+        [field]: value,
+      },
+    });
+  };
+
+  const updateResourceFieldMapping = (field: string, value: string) => {
+    updateConfig({
+      resourceFieldMapping: {
+        ...config.resourceFieldMapping,
+        id: config.resourceFieldMapping?.id || "id",
+        name: config.resourceFieldMapping?.name || "name",
+        [field]: value,
+      },
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* ─── 1단계: 스케줄 데이터 테이블 설정 ─── */}
+      <Collapsible open={scheduleDataOpen} onOpenChange={setScheduleDataOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Layers className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">스케줄 데이터 테이블</span>
+              <Badge variant="secondary" className="text-[10px] h-5">8개 필드</Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", scheduleDataOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+        {/* 스케줄 타입 */}
+        <div className="flex items-center justify-between py-1">
+          <span className="text-xs text-muted-foreground truncate">스케줄 타입</span>
+          <Select
+            value={config.scheduleType || "PRODUCTION"}
+            onValueChange={(v) => updateConfig({ scheduleType: v as ScheduleType })}
+          >
+            <SelectTrigger className="h-7 w-[140px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {scheduleTypeOptions.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 커스텀 테이블 사용 여부 */}
+        <div className="flex items-center justify-between py-1">
+          <div>
+            <p className="text-xs text-muted-foreground">커스텀 테이블 사용</p>
+            <p className="text-[10px] text-muted-foreground mt-0.5">OFF: schedule_mng 사용</p>
+          </div>
+          <Switch
+            checked={config.useCustomTable ?? false}
+            onCheckedChange={(v) => updateConfig({ useCustomTable: v })}
+          />
+        </div>
+
+        {/* 커스텀 테이블 선택 (Combobox) */}
+        {config.useCustomTable && (
+          <div className="space-y-1">
+            <span className="text-xs text-muted-foreground">커스텀 테이블명</span>
+            <Popover open={customTableOpen} onOpenChange={setCustomTableOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={customTableOpen}
+                  className="h-8 w-full justify-between text-xs"
+                  disabled={loading}
+                >
+                  {config.customTableName
+                    ? tables.find((t) => t.tableName === config.customTableName)?.displayName ||
+                      config.customTableName
+                    : "커스텀 테이블 선택..."}
+                  <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+                <Command
+                  filter={(value, search) => {
+                    return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+                  }}
+                >
+                  <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                  <CommandList>
+                    <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandGroup>
+                      {tables.map((table) => (
+                        <CommandItem
+                          key={table.tableName}
+                          value={`${table.displayName} ${table.tableName}`}
+                          onSelect={() => {
+                            updateConfig({ customTableName: table.tableName, selectedTable: table.tableName });
+                            setCustomTableOpen(false);
+                          }}
+                          className="text-xs"
+                        >
+                          <Check
+                            className={cn(
+                              "mr-2 h-3 w-3",
+                              config.customTableName === table.tableName ? "opacity-100" : "opacity-0"
+                            )}
+                          />
+                          <div className="flex flex-col">
+                            <span>{table.displayName}</span>
+                            <span className="text-muted-foreground text-[10px]">{table.tableName}</span>
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </div>
+        )}
+
+        {/* 디자인 모드 표시용 테이블명 (selectedTable) */}
+        {!config.useCustomTable && (
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">디자인 모드 표시 테이블</span>
+            <Input
+              value={config.selectedTable || "schedule_mng"}
+              onChange={(e) => updateConfig({ selectedTable: e.target.value })}
+              placeholder="schedule_mng"
+              className="h-7 w-[140px] text-xs"
+            />
+          </div>
+        )}
+
+        {/* 스케줄 필드 매핑 */}
+        <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1">
+          <p className="text-xs font-medium text-primary truncate">스케줄 필드 매핑</p>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">ID 필드 *</span>
+            <Select
+              value={config.fieldMapping?.id || "schedule_id"}
+              onValueChange={(v) => updateFieldMapping("id", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">리소스 ID 필드 *</span>
+            <Select
+              value={config.fieldMapping?.resourceId || "resource_id"}
+              onValueChange={(v) => updateFieldMapping("resourceId", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">제목 필드 *</span>
+            <Select
+              value={config.fieldMapping?.title || "schedule_name"}
+              onValueChange={(v) => updateFieldMapping("title", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">시작일 필드 *</span>
+            <Select
+              value={config.fieldMapping?.startDate || "start_date"}
+              onValueChange={(v) => updateFieldMapping("startDate", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">종료일 필드 *</span>
+            <Select
+              value={config.fieldMapping?.endDate || "end_date"}
+              onValueChange={(v) => updateFieldMapping("endDate", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">상태 필드</span>
+            <Select
+              value={config.fieldMapping?.status || ""}
+              onValueChange={(v) => updateFieldMapping("status", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">진행률 필드</span>
+            <Select
+              value={config.fieldMapping?.progress || ""}
+              onValueChange={(v) => updateFieldMapping("progress", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between py-1">
+            <span className="text-xs text-muted-foreground truncate">색상 필드</span>
+            <Select
+              value={config.fieldMapping?.color || ""}
+              onValueChange={(v) => updateFieldMapping("color", v)}
+            >
+              <SelectTrigger className="h-7 w-[130px] text-xs">
+                <SelectValue placeholder="선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {scheduleColumns.map((col) => (
+                  <SelectItem key={col.columnName} value={col.columnName}>
+                    {col.displayName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+
+      {/* ─── 2단계: 소스 데이터 설정 ─── */}
+      <Collapsible open={sourceDataOpen} onOpenChange={setSourceDataOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Database className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">소스 데이터 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {config.sourceConfig?.tableName ? "4개 필드" : "미설정"}
+              </Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", sourceDataOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+        {/* 소스 테이블 Combobox */}
+        <div className="space-y-1">
+          <span className="text-xs text-muted-foreground truncate">소스 테이블 (수주/작업요청 등)</span>
+          <Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={sourceTableOpen}
+                className="h-8 w-full justify-between text-xs"
+                disabled={loading}
+              >
+                {config.sourceConfig?.tableName
+                  ? tables.find((t) => t.tableName === config.sourceConfig?.tableName)?.displayName ||
+                    config.sourceConfig.tableName
+                  : "소스 테이블 선택..."}
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command
+                filter={(value, search) => {
+                  return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+                }}
+              >
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {tables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={`${table.displayName} ${table.tableName}`}
+                        onSelect={() => {
+                          updateSourceConfig({ tableName: table.tableName });
+                          setSourceTableOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            config.sourceConfig?.tableName === table.tableName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <div className="flex flex-col">
+                          <span>{table.displayName}</span>
+                          <span className="text-muted-foreground text-[10px]">{table.tableName}</span>
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* 소스 필드 매핑 (테이블 선택 시) */}
+        {config.sourceConfig?.tableName && (
+          <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1">
+            <p className="text-xs font-medium text-primary truncate">필드 매핑</p>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <span className="text-xs text-muted-foreground truncate">기준일 (마감일/납기일) *</span>
+                <p className="text-[10px] text-muted-foreground mt-0.5">스케줄 종료일로 사용돼요</p>
+              </div>
+              <Select
+                value={config.sourceConfig?.dueDateField || ""}
+                onValueChange={(v) => updateSourceConfig({ dueDateField: v })}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="필수 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {sourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">수량 필드</span>
+              <Select
+                value={config.sourceConfig?.quantityField || ""}
+                onValueChange={(v) => updateSourceConfig({ quantityField: v })}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {sourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">그룹 필드 (품목코드)</span>
+              <Select
+                value={config.sourceConfig?.groupByField || ""}
+                onValueChange={(v) => updateSourceConfig({ groupByField: v })}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {sourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">그룹명 필드 (품목명)</span>
+              <Select
+                value={config.sourceConfig?.groupNameField || ""}
+                onValueChange={(v) => updateSourceConfig({ groupNameField: v })}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {sourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+
+      {/* ─── 3단계: 리소스 설정 ─── */}
+      <Collapsible open={resourceOpen} onOpenChange={setResourceOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Users className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">리소스 설정 (설비/작업자)</span>
+              <Badge variant="secondary" className="text-[10px] h-5">
+                {config.resourceTable ? "3개 필드" : "미설정"}
+              </Badge>
+            </div>
+            <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", resourceOpen && "rotate-180")} />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+        {/* 리소스 테이블 Combobox */}
+        <div className="space-y-1">
+          <span className="text-xs text-muted-foreground truncate">리소스 테이블</span>
+          <Popover open={resourceTableOpen} onOpenChange={setResourceTableOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={resourceTableOpen}
+                className="h-8 w-full justify-between text-xs"
+                disabled={loading}
+              >
+                {config.resourceTable
+                  ? tables.find((t) => t.tableName === config.resourceTable)?.displayName || config.resourceTable
+                  : "리소스 테이블 선택..."}
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+              <Command
+                filter={(value, search) => {
+                  return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+                }}
+              >
+                <CommandInput placeholder="테이블 검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
+                  <CommandGroup>
+                    {tables.map((table) => (
+                      <CommandItem
+                        key={table.tableName}
+                        value={`${table.displayName} ${table.tableName}`}
+                        onSelect={() => {
+                          updateConfig({ resourceTable: table.tableName });
+                          setResourceTableOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3",
+                            config.resourceTable === table.tableName ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <div className="flex flex-col">
+                          <span>{table.displayName}</span>
+                          <span className="text-muted-foreground text-[10px]">{table.tableName}</span>
+                        </div>
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        </div>
+
+        {/* 리소스 필드 매핑 */}
+        {config.resourceTable && (
+          <div className="ml-1 border-l-2 border-primary/20 pl-3 space-y-2 pt-1">
+            <p className="text-xs font-medium text-primary truncate">리소스 필드</p>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">ID 필드</span>
+              <Select
+                value={config.resourceFieldMapping?.id || ""}
+                onValueChange={(v) => updateResourceFieldMapping("id", v)}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {resourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">이름 필드</span>
+              <Select
+                value={config.resourceFieldMapping?.name || ""}
+                onValueChange={(v) => updateResourceFieldMapping("name", v)}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {resourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">그룹 필드</span>
+              <Select
+                value={config.resourceFieldMapping?.group || ""}
+                onValueChange={(v) => updateResourceFieldMapping("group", v)}
+              >
+                <SelectTrigger className="h-7 w-[130px] text-xs">
+                  <SelectValue placeholder="선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {resourceColumns.map((col) => (
+                    <SelectItem key={col.columnName} value={col.columnName}>
+                      {col.displayName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+
+      {/* ─── 4단계: 표시 설정 (Collapsible) ─── */}
+      <Collapsible open={displayOpen} onOpenChange={setDisplayOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">표시 설정</span>
+              <Badge variant="secondary" className="text-[10px] h-5">18개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                displayOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {/* 줌 레벨 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">기본 줌 레벨</span>
+              <Select
+                value={config.defaultZoomLevel || "day"}
+                onValueChange={(v) => updateConfig({ defaultZoomLevel: v as ZoomLevel })}
+              >
+                <SelectTrigger className="h-7 w-[100px] text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {zoomLevelOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* 초기 표시 날짜 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <span className="text-xs text-muted-foreground truncate">초기 표시 날짜</span>
+                <p className="text-[10px] text-muted-foreground mt-0.5">비워두면 오늘 기준</p>
+              </div>
+              <Input
+                type="date"
+                value={config.initialDate || ""}
+                onChange={(e) => updateConfig({ initialDate: e.target.value || undefined })}
+                className="h-7 w-[140px] text-xs"
+              />
+            </div>
+
+            {/* 높이 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">높이 (px)</span>
+              <Input
+                type="number"
+                value={config.height || 500}
+                onChange={(e) => updateConfig({ height: parseInt(e.target.value) || 500 })}
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 최대 높이 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">최대 높이 (px)</span>
+              <Input
+                type="number"
+                value={typeof config.maxHeight === "number" ? config.maxHeight : ""}
+                onChange={(e) => {
+                  const val = e.target.value ? parseInt(e.target.value) : undefined;
+                  updateConfig({ maxHeight: val });
+                }}
+                placeholder="제한 없음"
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 행 높이 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">행 높이 (px)</span>
+              <Input
+                type="number"
+                value={config.rowHeight || 50}
+                onChange={(e) => updateConfig({ rowHeight: parseInt(e.target.value) || 50 })}
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 헤더 높이 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">헤더 높이 (px)</span>
+              <Input
+                type="number"
+                value={config.headerHeight || 60}
+                onChange={(e) => updateConfig({ headerHeight: parseInt(e.target.value) || 60 })}
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 리소스 컬럼 너비 */}
+            <div className="flex items-center justify-between py-1">
+              <span className="text-xs text-muted-foreground truncate">리소스 컬럼 너비 (px)</span>
+              <Input
+                type="number"
+                value={config.resourceColumnWidth || 150}
+                onChange={(e) => updateConfig({ resourceColumnWidth: parseInt(e.target.value) || 150 })}
+                className="h-7 w-[100px] text-xs"
+              />
+            </div>
+
+            {/* 셀 너비 (줌 레벨별) */}
+            <div className="space-y-2 pt-1">
+              <span className="text-xs text-muted-foreground truncate">셀 너비 (줌 레벨별, px)</span>
+              <div className="flex items-center gap-2">
+                <div className="flex-1">
+                  <span className="text-[10px] text-muted-foreground">일</span>
+                  <Input
+                    type="number"
+                    value={config.cellWidth?.day || 60}
+                    onChange={(e) => updateConfig({ cellWidth: { ...config.cellWidth, day: parseInt(e.target.value) || 60 } })}
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div className="flex-1">
+                  <span className="text-[10px] text-muted-foreground">주</span>
+                  <Input
+                    type="number"
+                    value={config.cellWidth?.week || 120}
+                    onChange={(e) => updateConfig({ cellWidth: { ...config.cellWidth, week: parseInt(e.target.value) || 120 } })}
+                    className="h-7 text-xs"
+                  />
+                </div>
+                <div className="flex-1">
+                  <span className="text-[10px] text-muted-foreground">월</span>
+                  <Input
+                    type="number"
+                    value={config.cellWidth?.month || 40}
+                    onChange={(e) => updateConfig({ cellWidth: { ...config.cellWidth, month: parseInt(e.target.value) || 40 } })}
+                    className="h-7 text-xs"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Switch 토글들 */}
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">편집 가능</p>
+                <p className="text-[11px] text-muted-foreground">스케줄을 직접 수정할 수 있어요</p>
+              </div>
+              <Switch
+                checked={config.editable ?? true}
+                onCheckedChange={(v) => updateConfig({ editable: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">드래그 이동</p>
+                <p className="text-[11px] text-muted-foreground">스케줄을 드래그해서 날짜를 변경해요</p>
+              </div>
+              <Switch
+                checked={config.draggable ?? true}
+                onCheckedChange={(v) => updateConfig({ draggable: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">리사이즈</p>
+                <p className="text-[11px] text-muted-foreground">스케줄의 기간을 늘이거나 줄여요</p>
+              </div>
+              <Switch
+                checked={config.resizable ?? true}
+                onCheckedChange={(v) => updateConfig({ resizable: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">오늘 표시선</p>
+                <p className="text-[11px] text-muted-foreground">오늘 날짜에 빨간 세로선을 표시해요</p>
+              </div>
+              <Switch
+                checked={config.showTodayLine ?? true}
+                onCheckedChange={(v) => updateConfig({ showTodayLine: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">진행률 표시</p>
+                <p className="text-[11px] text-muted-foreground">각 스케줄의 진행률 바를 보여줘요</p>
+              </div>
+              <Switch
+                checked={config.showProgress ?? true}
+                onCheckedChange={(v) => updateConfig({ showProgress: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">충돌 표시</p>
+                <p className="text-[11px] text-muted-foreground">스케줄 겹침 시 경고를 표시해요</p>
+              </div>
+              <Switch
+                checked={config.showConflicts ?? true}
+                onCheckedChange={(v) => updateConfig({ showConflicts: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">툴바 표시</p>
+                <p className="text-[11px] text-muted-foreground">상단의 네비게이션/줌 컨트롤을 보여줘요</p>
+              </div>
+              <Switch
+                checked={config.showToolbar ?? true}
+                onCheckedChange={(v) => updateConfig({ showToolbar: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">줌 컨트롤 표시</p>
+                <p className="text-[11px] text-muted-foreground">줌 레벨 변경 버튼을 보여줘요</p>
+              </div>
+              <Switch
+                checked={config.showZoomControls ?? true}
+                onCheckedChange={(v) => updateConfig({ showZoomControls: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">네비게이션 표시</p>
+                <p className="text-[11px] text-muted-foreground">이전/다음/오늘 버튼을 보여줘요</p>
+              </div>
+              <Switch
+                checked={config.showNavigation ?? true}
+                onCheckedChange={(v) => updateConfig({ showNavigation: v })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between py-1">
+              <div>
+                <p className="text-sm">추가 버튼 표시</p>
+                <p className="text-[11px] text-muted-foreground">스케줄 추가 버튼을 보여줘요</p>
+              </div>
+              <Switch
+                checked={config.showAddButton ?? true}
+                onCheckedChange={(v) => updateConfig({ showAddButton: v })}
+              />
+            </div>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+
+      {/* ─── 5단계: 고급 설정 - 상태별 색상 (Collapsible) ─── */}
+      <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+        <CollapsibleTrigger asChild>
+          <button
+            type="button"
+            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
+          >
+            <div className="flex items-center gap-2">
+              <Settings className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm font-medium">상태별 색상</span>
+              <Badge variant="secondary" className="text-[10px] h-5">5개</Badge>
+            </div>
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                advancedOpen && "rotate-180"
+              )}
+            />
+          </button>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
+            {[
+              { key: "planned", label: "계획됨", defaultColor: "#3b82f6" },
+              { key: "in_progress", label: "진행중", defaultColor: "#f59e0b" },
+              { key: "completed", label: "완료", defaultColor: "#10b981" },
+              { key: "delayed", label: "지연", defaultColor: "#ef4444" },
+              { key: "cancelled", label: "취소", defaultColor: "#6b7280" },
+            ].map((status) => (
+              <div key={status.key} className="flex items-center justify-between py-1">
+                <div className="flex items-center gap-2">
+                  <div
+                    className="h-3 w-3 rounded-full"
+                    style={{
+                      backgroundColor:
+                        (config.statusColors as any)?.[status.key] || status.defaultColor,
+                    }}
+                  />
+                  <span className="text-xs text-muted-foreground">{status.label}</span>
+                </div>
+                <div className="flex items-center gap-1.5">
+                  <input
+                    type="color"
+                    value={(config.statusColors as any)?.[status.key] || status.defaultColor}
+                    onChange={(e) =>
+                      updateConfig({
+                        statusColors: {
+                          ...config.statusColors,
+                          [status.key]: e.target.value,
+                        },
+                      })
+                    }
+                    className="h-7 w-7 cursor-pointer rounded border"
+                  />
+                  <Input
+                    value={(config.statusColors as any)?.[status.key] || status.defaultColor}
+                    onChange={(e) =>
+                      updateConfig({
+                        statusColors: {
+                          ...config.statusColors,
+                          [status.key]: e.target.value,
+                        },
+                      })
+                    }
+                    className="h-7 w-[80px] text-xs"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+};
+
+V2TimelineSchedulerConfigPanel.displayName = "V2TimelineSchedulerConfigPanel";
+
+export default V2TimelineSchedulerConfigPanel;
diff --git a/frontend/hooks/pop/executePopAction.ts b/frontend/hooks/pop/executePopAction.ts
index ada6ad77..ad0981b6 100644
--- a/frontend/hooks/pop/executePopAction.ts
+++ b/frontend/hooks/pop/executePopAction.ts
@@ -322,7 +322,9 @@ export async function executeTaskList(
         }
 
         case "custom-event":
-          if (task.eventName) {
+          if (task.flowId) {
+            await apiClient.post(`/dataflow/node-flows/${task.flowId}/execute`, {});
+          } else if (task.eventName) {
             publish(task.eventName, task.eventPayload ?? {});
           }
           break;
diff --git a/frontend/hooks/pop/useConnectionResolver.ts b/frontend/hooks/pop/useConnectionResolver.ts
index 14bd321a..4aa03be3 100644
--- a/frontend/hooks/pop/useConnectionResolver.ts
+++ b/frontend/hooks/pop/useConnectionResolver.ts
@@ -20,7 +20,6 @@ import { usePopEvent } from "./usePopEvent";
 import type { PopDataConnection } from "@/components/pop/designer/types/pop-layout";
 import {
   PopComponentRegistry,
-  type ConnectionMetaItem,
 } from "@/lib/registry/PopComponentRegistry";
 
 interface UseConnectionResolverOptions {
@@ -29,14 +28,21 @@ interface UseConnectionResolverOptions {
   componentTypes?: Map<string, string>;
 }
 
+interface AutoMatchPair {
+  sourceKey: string;
+  targetKey: string;
+  isFilter: boolean;
+}
+
 /**
- * 소스/타겟의 connectionMeta에서 자동 매칭 가능한 이벤트 쌍을 찾는다.
- * 규칙: category="event"이고 key가 동일한 쌍
+ * 소스/타겟의 connectionMeta에서 자동 매칭 가능한 쌍을 찾는다.
+ * 규칙 1: category="event"이고 key가 동일한 쌍 (이벤트 매칭)
+ * 규칙 2: 소스 type="filter_value" + 타겟 type="filter_value" (필터 매칭)
  */
 function getAutoMatchPairs(
   sourceType: string,
   targetType: string
-): { sourceKey: string; targetKey: string }[] {
+): AutoMatchPair[] {
   const sourceDef = PopComponentRegistry.getComponent(sourceType);
   const targetDef = PopComponentRegistry.getComponent(targetType);
 
@@ -44,14 +50,18 @@ function getAutoMatchPairs(
     return [];
   }
 
-  const pairs: { sourceKey: string; targetKey: string }[] = [];
+  const pairs: AutoMatchPair[] = [];
 
   for (const s of sourceDef.connectionMeta.sendable) {
-    if (s.category !== "event") continue;
     for (const r of targetDef.connectionMeta.receivable) {
-      if (r.category !== "event") continue;
-      if (s.key === r.key) {
-        pairs.push({ sourceKey: s.key, targetKey: r.key });
+      if (s.category === "event" && r.category === "event" && s.key === r.key) {
+        pairs.push({ sourceKey: s.key, targetKey: r.key, isFilter: false });
+      }
+      if (s.type === "filter_value" && r.type === "filter_value") {
+        pairs.push({ sourceKey: s.key, targetKey: r.key, isFilter: true });
+      }
+      if (s.type === "all_rows" && r.type === "all_rows") {
+        pairs.push({ sourceKey: s.key, targetKey: r.key, isFilter: false });
       }
     }
   }
@@ -93,10 +103,30 @@ export function useConnectionResolver({
           const targetEvent = `__comp_input__${conn.targetComponent}__${pair.targetKey}`;
 
           const unsub = subscribe(sourceEvent, (payload: unknown) => {
-            publish(targetEvent, {
-              value: payload,
-              _connectionId: conn.id,
-            });
+            if (pair.isFilter) {
+              const data = payload as Record<string, unknown> | null;
+              const fieldName = data?.fieldName as string | undefined;
+              const filterColumns = data?.filterColumns as string[] | undefined;
+              const filterMode = (data?.filterMode as string) || "contains";
+              // conn.filterConfig에 targetColumn이 명시되어 있으면 우선 사용
+              const effectiveColumn = conn.filterConfig?.targetColumn || fieldName;
+              const effectiveMode = conn.filterConfig?.filterMode || filterMode;
+              const baseFilterConfig = effectiveColumn
+                ? { targetColumn: effectiveColumn, targetColumns: conn.filterConfig?.targetColumns || (filterColumns?.length ? filterColumns : [effectiveColumn]), filterMode: effectiveMode }
+                : conn.filterConfig;
+              publish(targetEvent, {
+                value: payload,
+                filterConfig: conn.filterConfig?.isSubTable
+                  ? { ...baseFilterConfig, isSubTable: true }
+                  : baseFilterConfig,
+                _connectionId: conn.id,
+              });
+            } else {
+              publish(targetEvent, {
+                value: payload,
+                _connectionId: conn.id,
+              });
+            }
           });
           unsubscribers.push(unsub);
         }
@@ -121,13 +151,22 @@ export function useConnectionResolver({
         const unsub = subscribe(sourceEvent, (payload: unknown) => {
           const targetEvent = `__comp_input__${conn.targetComponent}__${conn.targetInput || conn.targetField}`;
 
-          const enrichedPayload = {
-            value: payload,
-            filterConfig: conn.filterConfig,
-            _connectionId: conn.id,
-          };
+          let resolvedFilterConfig = conn.filterConfig;
+          if (!resolvedFilterConfig) {
+            const data = payload as Record<string, unknown> | null;
+            const fieldName = data?.fieldName as string | undefined;
+            const filterColumns = data?.filterColumns as string[] | undefined;
+            if (fieldName) {
+              const filterMode = (data?.filterMode as string) || "contains";
+              resolvedFilterConfig = { targetColumn: fieldName, targetColumns: filterColumns?.length ? filterColumns : [fieldName], filterMode: filterMode as "equals" | "contains" | "starts_with" | "range" };
+            }
+          }
 
-          publish(targetEvent, enrichedPayload);
+          publish(targetEvent, {
+            value: payload,
+            filterConfig: resolvedFilterConfig,
+            _connectionId: conn.id,
+          });
         });
         unsubscribers.push(unsub);
       }
diff --git a/frontend/hooks/useLogin.ts b/frontend/hooks/useLogin.ts
index 09c32d5f..bd0cf9a2 100644
--- a/frontend/hooks/useLogin.ts
+++ b/frontend/hooks/useLogin.ts
@@ -20,6 +20,21 @@ export const useLogin = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
+  const [isPopMode, setIsPopMode] = useState(false);
+
+  // localStorage에서 POP 모드 상태 복원
+  useEffect(() => {
+    const saved = localStorage.getItem("popLoginMode");
+    if (saved === "true") setIsPopMode(true);
+  }, []);
+
+  const togglePopMode = useCallback(() => {
+    setIsPopMode((prev) => {
+      const next = !prev;
+      localStorage.setItem("popLoginMode", String(next));
+      return next;
+    });
+  }, []);
 
   /**
    * 폼 입력값 변경 처리
@@ -141,17 +156,22 @@ export const useLogin = () => {
           // 쿠키에도 저장 (미들웨어에서 사용)
           document.cookie = `authToken=${result.data.token}; path=/; max-age=86400; SameSite=Lax`;
 
-          // 로그인 성공 - 첫 번째 접근 가능한 메뉴로 리다이렉트
-          const firstMenuPath = result.data?.firstMenuPath;
-
-          if (firstMenuPath) {
-            // 접근 가능한 메뉴가 있으면 해당 메뉴로 이동
-            console.log("첫 번째 접근 가능한 메뉴로 이동:", firstMenuPath);
-            router.push(firstMenuPath);
+          if (isPopMode) {
+            const popPath = result.data?.popLandingPath;
+            if (popPath) {
+              router.push(popPath);
+            } else {
+              setError("POP 화면이 설정되어 있지 않습니다. 관리자에게 메뉴 관리에서 POP 화면을 설정해달라고 요청하세요.");
+              setIsLoading(false);
+              return;
+            }
           } else {
-            // 접근 가능한 메뉴가 없으면 메인 페이지로 이동
-            console.log("접근 가능한 메뉴가 없어 메인 페이지로 이동");
-            router.push(AUTH_CONFIG.ROUTES.MAIN);
+            const firstMenuPath = result.data?.firstMenuPath;
+            if (firstMenuPath) {
+              router.push(firstMenuPath);
+            } else {
+              router.push(AUTH_CONFIG.ROUTES.MAIN);
+            }
           }
         } else {
           // 로그인 실패
@@ -165,7 +185,7 @@ export const useLogin = () => {
         setIsLoading(false);
       }
     },
-    [formData, validateForm, apiCall, router],
+    [formData, validateForm, apiCall, router, isPopMode],
   );
 
   // 컴포넌트 마운트 시 기존 인증 상태 확인
@@ -179,10 +199,12 @@ export const useLogin = () => {
     isLoading,
     error,
     showPassword,
+    isPopMode,
 
     // 액션
     handleInputChange,
     handleLogin,
     togglePasswordVisibility,
+    togglePopMode,
   };
 };
diff --git a/frontend/lib/api/auditLog.ts b/frontend/lib/api/auditLog.ts
index 96c5463e..dd8c94d7 100644
--- a/frontend/lib/api/auditLog.ts
+++ b/frontend/lib/api/auditLog.ts
@@ -3,6 +3,7 @@ import { apiClient } from "./client";
 export interface AuditLogEntry {
   id: number;
   company_code: string;
+  company_name: string | null;
   user_id: string;
   user_name: string | null;
   action: string;
diff --git a/frontend/lib/api/menu.ts b/frontend/lib/api/menu.ts
index adbd53a0..7ddafaa0 100644
--- a/frontend/lib/api/menu.ts
+++ b/frontend/lib/api/menu.ts
@@ -81,6 +81,23 @@ export interface ApiResponse<T> {
   errorCode?: string;
 }
 
+export interface PopMenuItem {
+  objid: string;
+  menu_name_kor: string;
+  menu_url: string;
+  menu_desc: string;
+  seq: number;
+  company_code: string;
+  status: string;
+  screenId?: number;
+}
+
+export interface PopMenuResponse {
+  parentMenu: PopMenuItem | null;
+  childMenus: PopMenuItem[];
+  landingMenu: PopMenuItem | null;
+}
+
 export const menuApi = {
   // 관리자 메뉴 목록 조회 (좌측 사이드바용 - active만 표시)
   getAdminMenus: async (): Promise<ApiResponse<MenuItem[]>> => {
@@ -96,6 +113,12 @@ export const menuApi = {
     return response.data;
   },
 
+  // POP 메뉴 목록 조회 ([POP] 태그 L1 하위 active 메뉴)
+  getPopMenus: async (): Promise<ApiResponse<PopMenuResponse>> => {
+    const response = await apiClient.get("/admin/pop-menus");
+    return response.data;
+  },
+
   // 관리자 메뉴 목록 조회 (메뉴 관리 화면용 - 모든 상태 표시)
   getAdminMenusForManagement: async (): Promise<ApiResponse<MenuItem[]>> => {
     const response = await apiClient.get("/admin/menus", { params: { menuType: "0", includeInactive: "true" } });
diff --git a/frontend/lib/button-icon-map.tsx b/frontend/lib/button-icon-map.tsx
index d8c38b25..4ddd2f7d 100644
--- a/frontend/lib/button-icon-map.tsx
+++ b/frontend/lib/button-icon-map.tsx
@@ -1,5 +1,8 @@
 import React from "react";
-import DOMPurify from "isomorphic-dompurify";
+let DOMPurify: any = null;
+if (typeof window !== "undefined") {
+  DOMPurify = require("isomorphic-dompurify");
+}
 import {
   Check, Save, CheckCircle, CircleCheck, FileCheck, ShieldCheck,
   Trash2, Trash, XCircle, X, Eraser, CircleX,
@@ -119,6 +122,7 @@ export function addToIconMap(name: string, component: LucideIcon): void {
 // SVG 정화
 // ---------------------------------------------------------------------------
 export function sanitizeSvg(svgString: string): string {
+  if (!DOMPurify) return svgString;
   return DOMPurify.sanitize(svgString, { USE_PROFILES: { svg: true } });
 }
 
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index 8ee1ba20..873b7408 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -235,6 +235,8 @@ export interface DynamicComponentRendererProps {
   // 🆕 분할 패널 내부 컴포넌트 선택 콜백
   onSelectPanelComponent?: (panelSide: "left" | "right", compId: string, comp: any) => void;
   selectedPanelComponentId?: string;
+  // 중첩된 분할패널 내부 컴포넌트 선택 콜백 (탭 안의 분할패널)
+  onNestedPanelSelect?: (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => void;
   flowSelectedStepId?: number | null;
   onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
   // 테이블 새로고침 키
@@ -302,9 +304,16 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
     return type;
   };
 
-  const componentType = mapToV2ComponentType(rawComponentType);
+  const mappedComponentType = mapToV2ComponentType(rawComponentType);
 
-  // 컴포넌트 타입 변환 완료
+  // fieldType 기반 동적 컴포넌트 전환 (통합 필드 설정 패널에서 설정된 값)
+  const componentType = (() => {
+    const ft = (component as any).componentConfig?.fieldType;
+    if (!ft) return mappedComponentType;
+    if (["text", "number", "password", "textarea", "slider", "color", "numbering"].includes(ft)) return "v2-input";
+    if (["select", "category", "entity"].includes(ft)) return "v2-select";
+    return mappedComponentType;
+  })();
 
   // 🆕 조건부 렌더링 체크 (conditionalConfig)
   // componentConfig 또는 overrides에서 conditionalConfig를 가져와서 formData와 비교
@@ -738,7 +747,21 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         // 컬럼 메타데이터 기반 componentConfig 병합 (DB 최신 설정 우선)
         const isEntityJoinColumn = fieldName?.includes(".");
         const baseColumnName = isEntityJoinColumn ? undefined : fieldName;
-        const mergedComponentConfig = mergeColumnMeta(screenTableName, baseColumnName, component.componentConfig || {});
+        const rawMergedConfig = mergeColumnMeta(screenTableName, baseColumnName, component.componentConfig || {});
+
+        // fieldType이 설정된 경우, source/inputType 보조 속성 자동 보완
+        const mergedComponentConfig = (() => {
+          const ft = rawMergedConfig?.fieldType;
+          if (!ft) return rawMergedConfig;
+          const patch: Record<string, any> = {};
+          if (["select", "category", "entity"].includes(ft) && !rawMergedConfig.source) {
+            patch.source = ft === "category" ? "category" : ft === "entity" ? "entity" : "static";
+          }
+          if (["text", "number", "password", "textarea", "slider", "color", "numbering"].includes(ft) && !rawMergedConfig.inputType) {
+            patch.inputType = ft;
+          }
+          return Object.keys(patch).length > 0 ? { ...rawMergedConfig, ...patch } : rawMergedConfig;
+        })();
 
         // NOT NULL 기반 필수 여부를 component.required에 반영
         const notNullRequired = isColumnRequiredByMeta(screenTableName, baseColumnName);
@@ -755,17 +778,16 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onClick,
           onDragStart,
           onDragEnd,
-          size: needsExternalHorizLabel
-            ? { ...(component.size || newComponent.defaultSize), width: undefined, height: undefined }
-            : component.size || newComponent.defaultSize,
-          position: component.position,
           config: mergedComponentConfig,
           componentConfig: mergedComponentConfig,
-          // componentConfig의 모든 속성을 props로 spread (tableName, displayField 등)
+          // componentConfig spread를 먼저 → 이후 명시적 속성이 override
           ...(mergedComponentConfig || {}),
-          // 🔧 style은 맨 마지막에! (componentConfig.style이 있어도 mergedStyle이 우선)
+          // size/position/style/label은 componentConfig spread 이후에 설정 (덮어쓰기 방지)
+          size: needsExternalHorizLabel
+            ? { ...(component.size || newComponent.defaultSize), width: undefined }
+            : component.size || newComponent.defaultSize,
+          position: component.position,
           style: mergedStyle,
-          // 수평 라벨 → 외부에서 처리하므로 label 전달 안 함
           label: needsExternalHorizLabel ? undefined : effectiveLabel,
           // NOT NULL 메타데이터 포함된 필수 여부 (V2Hierarchy 등 직접 props.required 참조하는 컴포넌트용)
           required: effectiveRequired,
@@ -868,6 +890,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 분할 패널 내부 컴포넌트 선택 콜백
           onSelectPanelComponent: props.onSelectPanelComponent,
           selectedPanelComponentId: props.selectedPanelComponentId,
+          onNestedPanelSelect: props.onNestedPanelSelect,
         };
 
         // 렌더러가 클래스인지 함수인지 확인
diff --git a/frontend/lib/registry/PopComponentRegistry.ts b/frontend/lib/registry/PopComponentRegistry.ts
index 3793bc2d..2fe44592 100644
--- a/frontend/lib/registry/PopComponentRegistry.ts
+++ b/frontend/lib/registry/PopComponentRegistry.ts
@@ -35,6 +35,7 @@ export interface PopComponentDefinition {
   preview?: React.ComponentType<{ config?: any }>; // 디자이너 미리보기용
   defaultProps?: Record<string, any>;
   connectionMeta?: ComponentConnectionMeta;
+  getDynamicConnectionMeta?: (config: Record<string, unknown>) => ComponentConnectionMeta;
   // POP 전용 속성
   touchOptimized?: boolean;
   minTouchArea?: number;
diff --git a/frontend/lib/registry/components/common/ConfigField.tsx b/frontend/lib/registry/components/common/ConfigField.tsx
index 0b11780d..954ddc9b 100644
--- a/frontend/lib/registry/components/common/ConfigField.tsx
+++ b/frontend/lib/registry/components/common/ConfigField.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
 import {
@@ -13,7 +13,18 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
-import { Plus, X } from "lucide-react";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { ConfigFieldDefinition, ConfigOption } from "./ConfigPanelTypes";
 
 interface ConfigFieldProps<T = any> {
@@ -29,6 +40,8 @@ export function ConfigField<T>({
   onChange,
   tableColumns,
 }: ConfigFieldProps<T>) {
+  const [comboboxOpen, setComboboxOpen] = useState(false);
+
   const handleChange = (newValue: any) => {
     onChange(field.key, newValue);
   };
@@ -41,7 +54,7 @@ export function ConfigField<T>({
             value={value ?? ""}
             onChange={(e) => handleChange(e.target.value)}
             placeholder={field.placeholder}
-            className="h-8 text-xs"
+            className="h-7 text-xs"
           />
         );
 
@@ -59,7 +72,7 @@ export function ConfigField<T>({
             min={field.min}
             max={field.max}
             step={field.step}
-            className="h-8 text-xs"
+            className="h-7 text-xs"
           />
         );
 
@@ -77,7 +90,7 @@ export function ConfigField<T>({
             value={value ?? ""}
             onValueChange={handleChange}
           >
-            <SelectTrigger className="h-8 text-xs">
+            <SelectTrigger className="h-7 text-xs">
               <SelectValue placeholder={field.placeholder || "선택"} />
             </SelectTrigger>
             <SelectContent>
@@ -103,25 +116,25 @@ export function ConfigField<T>({
 
       case "color":
         return (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             <input
               type="color"
               value={value ?? "#000000"}
               onChange={(e) => handleChange(e.target.value)}
-              className="h-8 w-8 cursor-pointer rounded border"
+              className="h-7 w-7 cursor-pointer rounded border"
             />
             <Input
               value={value ?? ""}
               onChange={(e) => handleChange(e.target.value)}
               placeholder="#000000"
-              className="h-8 flex-1 text-xs"
+              className="h-7 flex-1 text-xs"
             />
           </div>
         );
 
       case "slider":
         return (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1.5">
             <Input
               type="number"
               value={value ?? field.min ?? 0}
@@ -129,17 +142,17 @@ export function ConfigField<T>({
               min={field.min}
               max={field.max}
               step={field.step}
-              className="h-8 w-20 text-xs"
+              className="h-7 w-16 text-xs"
             />
-            <span className="text-muted-foreground text-[10px]">
-              {field.min ?? 0} ~ {field.max ?? 100}
+            <span className="text-muted-foreground text-[9px]">
+              {field.min ?? 0}~{field.max ?? 100}
             </span>
           </div>
         );
 
       case "multi-select":
         return (
-          <div className="space-y-1">
+          <div className="space-y-0.5">
             {(field.options || []).map((opt) => {
               const selected = Array.isArray(value) && value.includes(opt.value);
               return (
@@ -230,7 +243,7 @@ export function ConfigField<T>({
             value={value ?? ""}
             onValueChange={handleChange}
           >
-            <SelectTrigger className="h-8 text-xs">
+            <SelectTrigger className="h-7 text-xs">
               <SelectValue placeholder={field.placeholder || "컬럼 선택"} />
             </SelectTrigger>
             <SelectContent>
@@ -244,21 +257,123 @@ export function ConfigField<T>({
         );
       }
 
+      case "checkbox":
+        return (
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id={`field-${field.key}`}
+              checked={!!value}
+              onCheckedChange={handleChange}
+            />
+            {field.description && (
+              <label
+                htmlFor={`field-${field.key}`}
+                className="cursor-pointer text-xs text-muted-foreground"
+              >
+                {field.description}
+              </label>
+            )}
+          </div>
+        );
+
+      case "combobox": {
+        const options = field.options || [];
+        const selectedLabel = options.find((opt) => opt.value === value)?.label;
+        return (
+          <Popover open={comboboxOpen} onOpenChange={setComboboxOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                role="combobox"
+                aria-expanded={comboboxOpen}
+                className="h-7 w-full justify-between text-xs font-normal"
+              >
+                <span className="truncate">
+                  {selectedLabel || field.placeholder || "선택"}
+                </span>
+                <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              className="p-0"
+              style={{ width: "var(--radix-popover-trigger-width)" }}
+              align="start"
+            >
+              <Command>
+                <CommandInput placeholder="검색..." className="text-xs" />
+                <CommandList>
+                  <CommandEmpty className="py-2 text-center text-xs">
+                    결과 없음
+                  </CommandEmpty>
+                  <CommandGroup>
+                    {options.map((opt) => (
+                      <CommandItem
+                        key={opt.value}
+                        value={opt.value}
+                        onSelect={(currentValue) => {
+                          handleChange(currentValue === value ? "" : currentValue);
+                          setComboboxOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-1.5 h-3 w-3",
+                            value === opt.value ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                        {opt.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+        );
+      }
+
       default:
         return null;
     }
   };
 
-  return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between">
-        <Label className="text-xs font-medium">{field.label}</Label>
-        {field.type === "switch" && renderField()}
+  // textarea, multi-select, key-value는 전체 폭 수직 레이아웃
+  const isFullWidth = ["textarea", "multi-select", "key-value"].includes(field.type);
+  // checkbox는 description을 인라인으로 표시하므로 별도 처리
+  const isCheckbox = field.type === "checkbox";
+
+  if (isFullWidth) {
+    return (
+      <div className="py-1.5">
+        <Label className="mb-1 block text-xs text-muted-foreground">{field.label}</Label>
+        {field.description && !isCheckbox && (
+          <p className="text-muted-foreground/60 mb-1 text-[9px]">{field.description}</p>
+        )}
+        {renderField()}
+      </div>
+    );
+  }
+
+  // switch, checkbox: 라벨 왼쪽, 컨트롤 오른쪽 (고정폭 없이)
+  if (field.type === "switch" || isCheckbox) {
+    return (
+      <div className="flex items-center justify-between py-1.5">
+        <Label className="mr-3 truncate text-xs text-muted-foreground">{field.label}</Label>
+        {renderField()}
+      </div>
+    );
+  }
+
+  // 기본: 수평 property row (라벨 왼쪽, 컨트롤 오른쪽 고정폭)
+  return (
+    <div className="flex items-center justify-between py-1.5">
+      <Label className="mr-3 min-w-0 shrink truncate text-xs text-muted-foreground">
+        {field.label}
+      </Label>
+      <div className="w-[140px] flex-shrink-0">
+        {renderField()}
       </div>
-      {field.description && (
-        <p className="text-muted-foreground text-[10px]">{field.description}</p>
-      )}
-      {field.type !== "switch" && renderField()}
     </div>
   );
 }
diff --git a/frontend/lib/registry/components/common/ConfigPanelBuilder.tsx b/frontend/lib/registry/components/common/ConfigPanelBuilder.tsx
index 5e7509f1..ba921b06 100644
--- a/frontend/lib/registry/components/common/ConfigPanelBuilder.tsx
+++ b/frontend/lib/registry/components/common/ConfigPanelBuilder.tsx
@@ -1,75 +1,144 @@
 "use client";
 
 import React from "react";
-import { ConfigPanelBuilderProps } from "./ConfigPanelTypes";
+import { ConfigPanelBuilderProps, ConfigSectionDefinition } from "./ConfigPanelTypes";
 import { ConfigSection } from "./ConfigSection";
 import { ConfigField } from "./ConfigField";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+function renderSections<T extends Record<string, any>>(
+  sections: ConfigSectionDefinition<T>[],
+  config: T,
+  onChange: (key: string, value: any) => void,
+  tableColumns?: any[],
+) {
+  return sections.map((section) => {
+    if (section.condition && !section.condition(config)) {
+      return null;
+    }
+
+    const visibleFields = section.fields.filter(
+      (field) => !field.condition || field.condition(config),
+    );
+
+    if (visibleFields.length === 0) {
+      return null;
+    }
+
+    return (
+      <ConfigSection key={section.id} section={section}>
+        {visibleFields.map((field) => (
+          <ConfigField
+            key={field.key}
+            field={field}
+            value={(config as any)[field.key]}
+            onChange={onChange}
+            tableColumns={tableColumns}
+          />
+        ))}
+      </ConfigSection>
+    );
+  });
+}
 
 export function ConfigPanelBuilder<T extends Record<string, any>>({
   config,
   onChange,
+  onConfigChange,
   sections,
   presets,
   tableColumns,
   children,
+  mode = "flat",
+  context,
 }: ConfigPanelBuilderProps<T>) {
-  return (
-    <div className="space-y-3">
-      {/* 프리셋 버튼 */}
-      {presets && presets.length > 0 && (
-        <div className="border-b pb-3">
-          <h4 className="mb-2 text-xs font-medium text-muted-foreground">
-            빠른 설정
-          </h4>
-          <div className="flex flex-wrap gap-1">
-            {presets.map((preset, idx) => (
-              <button
-                key={idx}
-                onClick={() => {
-                  Object.entries(preset.values).forEach(([key, value]) => {
-                    onChange(key, value);
-                  });
-                }}
-                className="rounded-full bg-muted px-2.5 py-1 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-primary hover:text-primary-foreground"
-                title={preset.description}
-              >
-                {preset.label}
-              </button>
-            ))}
-          </div>
+  const effectiveTableColumns = tableColumns || context?.tableColumns;
+
+  const presetSection = presets && presets.length > 0 && (
+    <div className="border-b border-border/40 pb-2.5">
+      <h4 className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+        빠른 설정
+      </h4>
+      <div className="flex flex-wrap gap-1">
+        {presets.map((preset, idx) => (
+          <button
+            key={idx}
+            onClick={() => {
+              Object.entries(preset.values).forEach(([key, value]) => {
+                onChange(key, value);
+              });
+              if (onConfigChange) {
+                onConfigChange({ ...config, ...preset.values } as Record<string, any>);
+              }
+            }}
+            className="rounded border border-border bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:border-primary hover:text-primary"
+            title={preset.description}
+          >
+            {preset.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+
+  if (mode === "tabs") {
+    const groupMap = new Map<string, ConfigSectionDefinition<T>[]>();
+    const ungrouped: ConfigSectionDefinition<T>[] = [];
+
+    for (const section of sections) {
+      if (section.group) {
+        const existing = groupMap.get(section.group) || [];
+        existing.push(section);
+        groupMap.set(section.group, existing);
+      } else {
+        ungrouped.push(section);
+      }
+    }
+
+    const tabGroups = Array.from(groupMap.entries());
+
+    if (tabGroups.length === 0) {
+      return (
+        <div className="space-y-1">
+          {presetSection}
+          {renderSections(sections, config, onChange, effectiveTableColumns)}
+          {children}
         </div>
-      )}
+      );
+    }
 
-      {/* 섹션 렌더링 */}
-      {sections.map((section) => {
-        if (section.condition && !section.condition(config)) {
-          return null;
-        }
+    const defaultTab = tabGroups[0]?.[0] || "general";
 
-        const visibleFields = section.fields.filter(
-          (field) => !field.condition || field.condition(config),
-        );
+    return (
+      <div className="space-y-1">
+        {presetSection}
 
-        if (visibleFields.length === 0) {
-          return null;
-        }
+        {ungrouped.length > 0 && renderSections(ungrouped, config, onChange, effectiveTableColumns)}
 
-        return (
-          <ConfigSection key={section.id} section={section}>
-            {visibleFields.map((field) => (
-              <ConfigField
-                key={field.key}
-                field={field}
-                value={(config as any)[field.key]}
-                onChange={onChange}
-                tableColumns={tableColumns}
-              />
+        <Tabs defaultValue={defaultTab} className="w-full">
+          <TabsList className="h-7 w-full">
+            {tabGroups.map(([groupName]) => (
+              <TabsTrigger key={groupName} value={groupName} className="h-6 text-xs">
+                {groupName}
+              </TabsTrigger>
             ))}
-          </ConfigSection>
-        );
-      })}
+          </TabsList>
+          {tabGroups.map(([groupName, groupSections]) => (
+            <TabsContent key={groupName} value={groupName} className="mt-1">
+              {renderSections(groupSections, config, onChange, effectiveTableColumns)}
+            </TabsContent>
+          ))}
+        </Tabs>
 
-      {/* 커스텀 children */}
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      {presetSection}
+      {renderSections(sections, config, onChange, effectiveTableColumns)}
       {children}
     </div>
   );
diff --git a/frontend/lib/registry/components/common/ConfigPanelTypes.ts b/frontend/lib/registry/components/common/ConfigPanelTypes.ts
index a60aa987..15179583 100644
--- a/frontend/lib/registry/components/common/ConfigPanelTypes.ts
+++ b/frontend/lib/registry/components/common/ConfigPanelTypes.ts
@@ -10,7 +10,9 @@ export type ConfigFieldType =
   | "slider"
   | "multi-select"
   | "key-value"
-  | "column-picker";
+  | "column-picker"
+  | "checkbox"
+  | "combobox";
 
 export interface ConfigOption {
   label: string;
@@ -40,11 +42,13 @@ export interface ConfigSectionDefinition<T = any> {
   defaultOpen?: boolean;
   fields: ConfigFieldDefinition<T>[];
   condition?: (config: T) => boolean;
+  group?: string;
 }
 
 export interface ConfigPanelBuilderProps<T = any> {
   config: T;
   onChange: (key: string, value: any) => void;
+  onConfigChange?: (config: Record<string, any>) => void;
   sections: ConfigSectionDefinition<T>[];
   presets?: Array<{
     label: string;
@@ -53,4 +57,30 @@ export interface ConfigPanelBuilderProps<T = any> {
   }>;
   tableColumns?: ConfigOption[];
   children?: React.ReactNode;
+  mode?: "flat" | "tabs";
+  context?: ConfigPanelContext;
+}
+
+/**
+ * 설정 패널에 전달되는 화면/컴포넌트 컨텍스트 정보
+ */
+export interface ConfigPanelContext {
+  tables?: any[];
+  tableColumns?: any[];
+  screenTableName?: string;
+  menuObjid?: number;
+  allComponents?: any[];
+  currentComponent?: any;
+  allTables?: any[];
+  screenComponents?: any[];
+  currentScreenCompanyCode?: string;
+}
+
+/**
+ * 모든 ConfigPanel이 공통으로 받는 표준 Props
+ */
+export interface StandardConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+  context?: ConfigPanelContext;
 }
diff --git a/frontend/lib/registry/components/common/ConfigSection.tsx b/frontend/lib/registry/components/common/ConfigSection.tsx
index 2f8275c9..3dd60c05 100644
--- a/frontend/lib/registry/components/common/ConfigSection.tsx
+++ b/frontend/lib/registry/components/common/ConfigSection.tsx
@@ -14,39 +14,45 @@ export function ConfigSection({ section, children }: ConfigSectionProps) {
 
   if (section.collapsible) {
     return (
-      <div className="border-b pb-3">
+      <div className="border-b border-border/40 py-2.5">
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className="flex w-full items-center gap-1.5 py-1 text-left"
+          className="flex w-full items-center justify-between py-0.5 text-left"
         >
-          {isOpen ? (
-            <ChevronDown className="h-3.5 w-3.5 shrink-0" />
-          ) : (
-            <ChevronRight className="h-3.5 w-3.5 shrink-0" />
-          )}
-          <span className="text-sm font-medium">{section.title}</span>
-          {section.description && (
-            <span className="text-muted-foreground ml-auto text-[10px]">
-              {section.description}
-            </span>
-          )}
+          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            {section.title}
+          </span>
+          <div className="flex items-center gap-1.5">
+            {section.description && (
+              <span className="text-muted-foreground/60 text-[9px]">
+                {section.description}
+              </span>
+            )}
+            {isOpen ? (
+              <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground/50" />
+            ) : (
+              <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground/50" />
+            )}
+          </div>
         </button>
-        {isOpen && <div className="mt-2 space-y-3">{children}</div>}
+        {isOpen && <div className="mt-1.5 space-y-1">{children}</div>}
       </div>
     );
   }
 
   return (
-    <div className="border-b pb-3">
-      <div className="mb-2">
-        <h4 className="text-sm font-medium">{section.title}</h4>
+    <div className="border-b border-border/40 py-2.5">
+      <div className="mb-1.5 flex items-center justify-between">
+        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          {section.title}
+        </h4>
         {section.description && (
-          <p className="text-muted-foreground text-[10px]">
+          <span className="text-muted-foreground/60 text-[9px]">
             {section.description}
-          </p>
+          </span>
         )}
       </div>
-      <div className="space-y-3">{children}</div>
+      <div className="space-y-1">{children}</div>
     </div>
   );
 }
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
index 4c3d3112..63a4288a 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureComponent.tsx
@@ -20,7 +20,6 @@ import {
   GeneratedLocation,
   RackStructureContext,
 } from "./types";
-import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN } from "./patternUtils";
 
 // 기존 위치 데이터 타입
 interface ExistingLocation {
@@ -513,27 +512,23 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
     return { totalLocations, totalRows, maxLevel };
   }, [conditions]);
 
-  // 위치 코드 생성 (패턴 기반)
+  // 위치 코드 생성
   const generateLocationCode = useCallback(
     (row: number, level: number): { code: string; name: string } => {
-      const vars = {
-        warehouse: context?.warehouseCode || "WH001",
-        warehouseName: context?.warehouseName || "",
-        floor: context?.floor || "1",
-        zone: context?.zone || "A",
-        row,
-        level,
-      };
+      const warehouseCode = context?.warehouseCode || "WH001";
+      const floor = context?.floor || "1";
+      const zone = context?.zone || "A";
 
-      const codePattern = config.codePattern || DEFAULT_CODE_PATTERN;
-      const namePattern = config.namePattern || DEFAULT_NAME_PATTERN;
+      // 코드 생성 (예: WH001-1층D구역-01-1)
+      const code = `${warehouseCode}-${floor}${zone}-${row.toString().padStart(2, "0")}-${level}`;
 
-      return {
-        code: applyLocationPattern(codePattern, vars),
-        name: applyLocationPattern(namePattern, vars),
-      };
+      // 이름 생성 - zone에 이미 "구역"이 포함되어 있으면 그대로 사용
+      const zoneName = zone.includes("구역") ? zone : `${zone}구역`;
+      const name = `${zoneName}-${row.toString().padStart(2, "0")}열-${level}단`;
+
+      return { code, name };
     },
-    [context, config.codePattern, config.namePattern],
+    [context],
   );
 
   // 미리보기 생성
diff --git a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
index ddaebfa2..17e1a781 100644
--- a/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/rack-structure/RackStructureConfigPanel.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -12,47 +12,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { RackStructureComponentConfig, FieldMapping } from "./types";
-import { applyLocationPattern, DEFAULT_CODE_PATTERN, DEFAULT_NAME_PATTERN, PATTERN_VARIABLES } from "./patternUtils";
-
-// 패턴 미리보기 서브 컴포넌트
-const PatternPreview: React.FC<{
-  codePattern?: string;
-  namePattern?: string;
-}> = ({ codePattern, namePattern }) => {
-  const sampleVars = {
-    warehouse: "WH002",
-    warehouseName: "2창고",
-    floor: "2층",
-    zone: "A구역",
-    row: 1,
-    level: 3,
-  };
-
-  const previewCode = useMemo(
-    () => applyLocationPattern(codePattern || DEFAULT_CODE_PATTERN, sampleVars),
-    [codePattern],
-  );
-  const previewName = useMemo(
-    () => applyLocationPattern(namePattern || DEFAULT_NAME_PATTERN, sampleVars),
-    [namePattern],
-  );
-
-  return (
-    <div className="rounded-md border border-primary/20 bg-primary/5 p-2.5">
-      <div className="mb-1.5 text-[10px] font-medium text-primary">미리보기 (2창고 / 2층 / A구역 / 1열 / 3단)</div>
-      <div className="space-y-1">
-        <div className="flex items-center gap-2 text-xs">
-          <span className="w-14 shrink-0 text-muted-foreground">위치코드:</span>
-          <code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewCode}</code>
-        </div>
-        <div className="flex items-center gap-2 text-xs">
-          <span className="w-14 shrink-0 text-muted-foreground">위치명:</span>
-          <code className="rounded bg-background px-1.5 py-0.5 font-mono text-foreground">{previewName}</code>
-        </div>
-      </div>
-    </div>
-  );
-};
 
 interface RackStructureConfigPanelProps {
   config: RackStructureComponentConfig;
@@ -246,61 +205,6 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
         </div>
       </div>
 
-      {/* 위치코드 패턴 설정 */}
-      <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-foreground">위치코드/위치명 패턴</div>
-        <p className="text-xs text-muted-foreground">
-          변수를 조합하여 위치코드와 위치명 생성 규칙을 설정하세요
-        </p>
-
-        {/* 위치코드 패턴 */}
-        <div>
-          <Label className="text-xs">위치코드 패턴</Label>
-          <Input
-            value={config.codePattern || ""}
-            onChange={(e) => handleChange("codePattern", e.target.value || undefined)}
-            placeholder="{warehouse}-{floor}{zone}-{row:02}-{level}"
-            className="h-8 font-mono text-xs"
-          />
-          <p className="mt-1 text-[10px] text-muted-foreground">
-            비워두면 기본값: {"{warehouse}-{floor}{zone}-{row:02}-{level}"}
-          </p>
-        </div>
-
-        {/* 위치명 패턴 */}
-        <div>
-          <Label className="text-xs">위치명 패턴</Label>
-          <Input
-            value={config.namePattern || ""}
-            onChange={(e) => handleChange("namePattern", e.target.value || undefined)}
-            placeholder="{zone}-{row:02}열-{level}단"
-            className="h-8 font-mono text-xs"
-          />
-          <p className="mt-1 text-[10px] text-muted-foreground">
-            비워두면 기본값: {"{zone}-{row:02}열-{level}단"}
-          </p>
-        </div>
-
-        {/* 실시간 미리보기 */}
-        <PatternPreview
-          codePattern={config.codePattern}
-          namePattern={config.namePattern}
-        />
-
-        {/* 사용 가능한 변수 목록 */}
-        <div className="rounded-md border bg-muted/50 p-2">
-          <div className="mb-1 text-[10px] font-medium text-foreground">사용 가능한 변수</div>
-          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
-            {PATTERN_VARIABLES.map((v) => (
-              <div key={v.token} className="flex items-center gap-1 text-[10px]">
-                <code className="rounded bg-primary/10 px-1 font-mono text-primary">{v.token}</code>
-                <span className="text-muted-foreground">{v.description}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
       {/* 제한 설정 */}
       <div className="space-y-3 border-t pt-3">
         <div className="text-sm font-medium text-foreground">제한 설정</div>
diff --git a/frontend/lib/registry/components/rack-structure/patternUtils.ts b/frontend/lib/registry/components/rack-structure/patternUtils.ts
deleted file mode 100644
index b5139c0b..00000000
--- a/frontend/lib/registry/components/rack-structure/patternUtils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// rack-structure는 v2-rack-structure의 patternUtils를 재사용
-export {
-  applyLocationPattern,
-  DEFAULT_CODE_PATTERN,
-  DEFAULT_NAME_PATTERN,
-  PATTERN_VARIABLES,
-} from "../v2-rack-structure/patternUtils";
diff --git a/frontend/lib/registry/components/selected-items-detail-input/index.ts b/frontend/lib/registry/components/selected-items-detail-input/index.ts
index e4bca645..cced07d7 100644
--- a/frontend/lib/registry/components/selected-items-detail-input/index.ts
+++ b/frontend/lib/registry/components/selected-items-detail-input/index.ts
@@ -1,11 +1,9 @@
 "use client";
 
-import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
-import type { WebType } from "@/types/screen";
 import { SelectedItemsDetailInputWrapper } from "./SelectedItemsDetailInputComponent";
-import { SelectedItemsDetailInputConfigPanel } from "./SelectedItemsDetailInputConfigPanel";
+import { V2SelectedItemsDetailInputConfigPanel } from "@/components/v2/config-panels/V2SelectedItemsDetailInputConfigPanel";
 import { SelectedItemsDetailInputConfig } from "./types";
 
 /**
@@ -33,7 +31,7 @@ export const SelectedItemsDetailInputDefinition = createComponentDefinition({
     readonly: false,
   } as SelectedItemsDetailInputConfig,
   defaultSize: { width: 800, height: 400 },
-  configPanel: SelectedItemsDetailInputConfigPanel,
+  configPanel: V2SelectedItemsDetailInputConfigPanel,
   icon: "Table",
   tags: ["선택", "상세입력", "반복", "테이블", "데이터전달"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx b/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
index ae6c4093..145542a1 100644
--- a/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/ColumnConfigModal.tsx
@@ -607,18 +607,20 @@ export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
                 </div>
 
                 <div>
-                  <Label className="text-xs">컬럼 너비 (px)</Label>
+                  <Label className="text-xs">컬럼 너비 (%)</Label>
                   <Input
                     type="number"
-                    value={editingColumn.width || ""}
+                    value={editingColumn.width && editingColumn.width <= 100 ? editingColumn.width : ""}
                     onChange={(e) =>
                       setEditingColumn({
                         ...editingColumn,
-                        width: e.target.value ? parseInt(e.target.value) : undefined,
+                        width: e.target.value ? Math.min(100, Math.max(5, parseInt(e.target.value) || 20)) : undefined,
                       })
                     }
                     placeholder="자동"
                     className="mt-1 h-9"
+                    min={5}
+                    max={100}
                   />
                 </div>
               </div>
diff --git a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
index f5d5666b..a36836a6 100644
--- a/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
+++ b/frontend/lib/registry/components/split-panel-layout2/SplitPanelLayout2Component.tsx
@@ -1751,7 +1751,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
           <TableHeader>
             <TableRow>
               {displayColumns.map((col, idx) => (
-                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
+                <TableHead key={idx} style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}>
                   {col.label || col.name}
                 </TableHead>
               ))}
@@ -1952,7 +1952,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
                 </TableHead>
               )}
               {displayColumns.map((col, idx) => (
-                <TableHead key={idx} style={{ width: col.width ? `${col.width}px` : "auto" }}>
+                <TableHead key={idx} style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}>
                   {col.label || col.name}
                 </TableHead>
               ))}
diff --git a/frontend/lib/registry/components/v2-aggregation-widget/index.ts b/frontend/lib/registry/components/v2-aggregation-widget/index.ts
index 75eb0e52..50933f59 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/index.ts
+++ b/frontend/lib/registry/components/v2-aggregation-widget/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { AggregationWidgetWrapper } from "./AggregationWidgetComponent";
-import { AggregationWidgetConfigPanel } from "./AggregationWidgetConfigPanel";
+import { V2AggregationWidgetConfigPanel } from "@/components/v2/config-panels/V2AggregationWidgetConfigPanel";
 import type { AggregationWidgetConfig } from "./types";
 
 /**
@@ -34,7 +34,7 @@ export const V2AggregationWidgetDefinition = createComponentDefinition({
     refreshOnFormChange: true, // 폼 변경 시 자동 새로고침
   } as Partial<AggregationWidgetConfig>,
   defaultSize: { width: 400, height: 60 },
-  configPanel: AggregationWidgetConfigPanel,
+  configPanel: V2AggregationWidgetConfigPanel,
   icon: "Calculator",
   tags: ["집계", "합계", "평균", "개수", "통계", "데이터", "필터"],
   version: "1.1.0",
diff --git a/frontend/lib/registry/components/v2-approval-step/index.ts b/frontend/lib/registry/components/v2-approval-step/index.ts
index 01225a23..84475b90 100644
--- a/frontend/lib/registry/components/v2-approval-step/index.ts
+++ b/frontend/lib/registry/components/v2-approval-step/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { ApprovalStepWrapper } from "./ApprovalStepComponent";
-import { ApprovalStepConfigPanel } from "./ApprovalStepConfigPanel";
+import { V2ApprovalStepConfigPanel as ApprovalStepConfigPanel } from "@/components/v2/config-panels/V2ApprovalStepConfigPanel";
 import { ApprovalStepConfig } from "./types";
 
 /**
diff --git a/frontend/lib/registry/components/v2-button-primary/index.ts b/frontend/lib/registry/components/v2-button-primary/index.ts
index 57e57d34..44600ee5 100644
--- a/frontend/lib/registry/components/v2-button-primary/index.ts
+++ b/frontend/lib/registry/components/v2-button-primary/index.ts
@@ -1,11 +1,9 @@
 "use client";
 
-import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
-import type { WebType } from "@/types/screen";
 import { ButtonPrimaryWrapper } from "./ButtonPrimaryComponent";
-import { ButtonPrimaryConfig } from "./types";
+import { V2ButtonConfigPanel } from "@/components/v2/config-panels/V2ButtonConfigPanel";
 
 /**
  * ButtonPrimary 컴포넌트 정의
@@ -30,7 +28,7 @@ export const V2ButtonPrimaryDefinition = createComponentDefinition({
     },
   },
   defaultSize: { width: 120, height: 40 },
-  configPanel: undefined, // 상세 설정 패널(ButtonConfigPanel)이 대신 사용됨
+  configPanel: V2ButtonConfigPanel,
   icon: "MousePointer",
   tags: ["버튼", "액션", "클릭"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-card-display/index.ts b/frontend/lib/registry/components/v2-card-display/index.ts
index 4e219fee..fe3b9fd1 100644
--- a/frontend/lib/registry/components/v2-card-display/index.ts
+++ b/frontend/lib/registry/components/v2-card-display/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { CardDisplayComponent } from "./CardDisplayComponent";
-import { CardDisplayConfigPanel } from "./CardDisplayConfigPanel";
+import { V2CardDisplayConfigPanel } from "@/components/v2/config-panels/V2CardDisplayConfigPanel";
 import { CardDisplayConfig } from "./types";
 
 /**
@@ -38,7 +38,7 @@ export const V2CardDisplayDefinition = createComponentDefinition({
     staticData: [],
   },
   defaultSize: { width: 800, height: 400 },
-  configPanel: CardDisplayConfigPanel,
+  configPanel: V2CardDisplayConfigPanel,
   icon: "Grid3x3",
   tags: ["card", "display", "table", "grid"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-category-manager/index.ts b/frontend/lib/registry/components/v2-category-manager/index.ts
index 3f8a9be3..6cbd5437 100644
--- a/frontend/lib/registry/components/v2-category-manager/index.ts
+++ b/frontend/lib/registry/components/v2-category-manager/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { V2CategoryManagerComponent } from "./V2CategoryManagerComponent";
-import { V2CategoryManagerConfigPanel } from "./V2CategoryManagerConfigPanel";
+import { V2CategoryManagerConfigPanel } from "@/components/v2/config-panels/V2CategoryManagerConfigPanel";
 import { defaultV2CategoryManagerConfig } from "./types";
 
 /**
@@ -32,5 +32,5 @@ export const V2CategoryManagerDefinition = createComponentDefinition({
 // 타입 내보내기
 export type { V2CategoryManagerConfig, CategoryValue, ViewMode } from "./types";
 export { V2CategoryManagerComponent } from "./V2CategoryManagerComponent";
-export { V2CategoryManagerConfigPanel } from "./V2CategoryManagerConfigPanel";
+export { V2CategoryManagerConfigPanel } from "@/components/v2/config-panels/V2CategoryManagerConfigPanel";
 
diff --git a/frontend/lib/registry/components/v2-divider-line/index.ts b/frontend/lib/registry/components/v2-divider-line/index.ts
index 274cded1..9ade43ea 100644
--- a/frontend/lib/registry/components/v2-divider-line/index.ts
+++ b/frontend/lib/registry/components/v2-divider-line/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { DividerLineWrapper } from "./DividerLineComponent";
-import { DividerLineConfigPanel } from "./DividerLineConfigPanel";
+import { V2DividerLineConfigPanel } from "@/components/v2/config-panels/V2DividerLineConfigPanel";
 import { DividerLineConfig } from "./types";
 
 /**
@@ -25,7 +25,7 @@ export const V2DividerLineDefinition = createComponentDefinition({
     maxLength: 255,
   },
   defaultSize: { width: 400, height: 2 },
-  configPanel: DividerLineConfigPanel,
+  configPanel: V2DividerLineConfigPanel,
   icon: "Layout",
   tags: [],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-file-upload/index.ts b/frontend/lib/registry/components/v2-file-upload/index.ts
index 0bf109bb..1ad56db1 100644
--- a/frontend/lib/registry/components/v2-file-upload/index.ts
+++ b/frontend/lib/registry/components/v2-file-upload/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { FileUploadComponent } from "./FileUploadComponent";
-import { FileUploadConfigPanel } from "./FileUploadConfigPanel";
+import { V2FileUploadConfigPanel } from "@/components/v2/config-panels/V2FileUploadConfigPanel";
 import { FileUploadConfig } from "./types";
 
 /**
@@ -27,7 +27,7 @@ export const V2FileUploadDefinition = createComponentDefinition({
     maxSize: 10 * 1024 * 1024, // 10MB
   },
   defaultSize: { width: 350, height: 240 },
-  configPanel: FileUploadConfigPanel,
+  configPanel: V2FileUploadConfigPanel,
   icon: "Upload",
   tags: ["file", "upload", "attachment", "v2"],
   version: "2.0.0",
diff --git a/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx b/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
index b6f929be..03997ce0 100644
--- a/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
+++ b/frontend/lib/registry/components/v2-input/V2InputRenderer.tsx
@@ -5,71 +5,45 @@ import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponent
 import { V2InputDefinition } from "./index";
 import { V2Input } from "@/components/v2/V2Input";
 import { isColumnRequiredByMeta } from "../../DynamicComponentRenderer";
-import { v2EventBus, V2_EVENTS } from "@/lib/v2-core";
 
 /**
  * dataBinding이 설정된 v2-input을 위한 wrapper
- * v2-table-list의 TABLE_DATA_CHANGE 이벤트를 구독하여
+ * v2-table-list의 선택 이벤트를 window CustomEvent로 수신하여
  * 선택된 행의 특정 컬럼 값을 자동으로 formData에 반영
  */
 function DataBindingWrapper({
   dataBinding,
   columnName,
   onFormDataChange,
-  isInteractive,
   children,
 }: {
   dataBinding: { sourceComponentId: string; sourceColumn: string };
   columnName: string;
   onFormDataChange?: (field: string, value: any) => void;
-  isInteractive?: boolean;
   children: React.ReactNode;
 }) {
   const lastBoundValueRef = useRef<any>(null);
+  const onFormDataChangeRef = useRef(onFormDataChange);
+  onFormDataChangeRef.current = onFormDataChange;
 
   useEffect(() => {
     if (!dataBinding?.sourceComponentId || !dataBinding?.sourceColumn) return;
 
-    console.log("[DataBinding] 구독 시작:", {
-      sourceComponentId: dataBinding.sourceComponentId,
-      sourceColumn: dataBinding.sourceColumn,
-      targetColumn: columnName,
-      isInteractive,
-      hasOnFormDataChange: !!onFormDataChange,
-    });
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      if (!detail || detail.source !== dataBinding.sourceComponentId) return;
 
-    const unsubscribe = v2EventBus.subscribe(V2_EVENTS.TABLE_DATA_CHANGE, (payload: any) => {
-      console.log("[DataBinding] TABLE_DATA_CHANGE 수신:", {
-        payloadSource: payload.source,
-        expectedSource: dataBinding.sourceComponentId,
-        dataLength: payload.data?.length,
-        match: payload.source === dataBinding.sourceComponentId,
-      });
-
-      if (payload.source !== dataBinding.sourceComponentId) return;
-
-      const selectedData = payload.data;
-      if (selectedData && selectedData.length > 0) {
-        const value = selectedData[0][dataBinding.sourceColumn];
-        console.log("[DataBinding] 바인딩 값:", { column: dataBinding.sourceColumn, value, columnName });
-        if (value !== lastBoundValueRef.current) {
-          lastBoundValueRef.current = value;
-          if (onFormDataChange && columnName) {
-            onFormDataChange(columnName, value ?? "");
-          }
-        }
-      } else {
-        if (lastBoundValueRef.current !== null) {
-          lastBoundValueRef.current = null;
-          if (onFormDataChange && columnName) {
-            onFormDataChange(columnName, "");
-          }
-        }
+      const selectedRow = detail.data?.[0];
+      const value = selectedRow?.[dataBinding.sourceColumn] ?? "";
+      if (value !== lastBoundValueRef.current) {
+        lastBoundValueRef.current = value;
+        onFormDataChangeRef.current?.(columnName, value);
       }
-    });
+    };
 
-    return () => unsubscribe();
-  }, [dataBinding?.sourceComponentId, dataBinding?.sourceColumn, columnName, onFormDataChange, isInteractive]);
+    window.addEventListener("v2-table-selection", handler);
+    return () => window.removeEventListener("v2-table-selection", handler);
+  }, [dataBinding?.sourceComponentId, dataBinding?.sourceColumn, columnName]);
 
   return <>{children}</>;
 }
@@ -102,18 +76,6 @@ export class V2InputRenderer extends AutoRegisteringComponentRenderer {
 
     const dataBinding = config.dataBinding || (component as any).dataBinding || config.componentConfig?.dataBinding;
 
-    if (dataBinding || (config as any).dataBinding || (component as any).dataBinding) {
-      console.log("[V2InputRenderer] dataBinding 탐색:", {
-        componentId: component.id,
-        columnName,
-        configKeys: Object.keys(config),
-        configDataBinding: config.dataBinding,
-        componentDataBinding: (component as any).dataBinding,
-        nestedDataBinding: config.componentConfig?.dataBinding,
-        finalDataBinding: dataBinding,
-      });
-    }
-
     const inputElement = (
       <V2Input
         id={component.id}
@@ -153,7 +115,6 @@ export class V2InputRenderer extends AutoRegisteringComponentRenderer {
           dataBinding={dataBinding}
           columnName={columnName}
           onFormDataChange={onFormDataChange}
-          isInteractive={isInteractive}
         >
           {inputElement}
         </DataBindingWrapper>
diff --git a/frontend/lib/registry/components/v2-input/index.ts b/frontend/lib/registry/components/v2-input/index.ts
index c6650717..4b7bbc78 100644
--- a/frontend/lib/registry/components/v2-input/index.ts
+++ b/frontend/lib/registry/components/v2-input/index.ts
@@ -6,7 +6,7 @@
 
 import { ComponentCategory } from "@/types/component";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
-import { V2InputConfigPanel } from "@/components/v2/config-panels/V2InputConfigPanel";
+import { V2FieldConfigPanel } from "@/components/v2/config-panels/V2FieldConfigPanel";
 import { V2Input } from "@/components/v2/V2Input";
 
 export const V2InputDefinition = createComponentDefinition({
@@ -72,7 +72,7 @@ export const V2InputDefinition = createComponentDefinition({
   tags: ["input", "text", "number", "v2"],
 
   // 설정 패널
-  configPanel: V2InputConfigPanel,
+  configPanel: V2FieldConfigPanel,
 });
 
 export default V2InputDefinition;
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx b/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
index a8f752f9..d0144d0b 100644
--- a/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
+++ b/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
@@ -1,217 +1,203 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Search, Plus, Trash2, Edit, ListOrdered, Package, Star } from "lucide-react";
+import React, { useState, useEffect, useCallback } from "react";
+import { Search, Plus, Trash2, Edit, ListOrdered, Package, Star, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
 } from "@/components/ui/table";
 import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import {
+  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";
-import { ItemRoutingConfig, ItemRoutingComponentProps } from "./types";
-import { defaultConfig } from "./config";
+import { ItemRoutingComponentProps, ColumnDef } from "./types";
 import { useItemRouting } from "./hooks/useItemRouting";
 
+const DEFAULT_ITEM_COLS: ColumnDef[] = [
+  { name: "item_name", label: "품명" },
+  { name: "item_code", label: "품번", width: 100 },
+];
+
 export function ItemRoutingComponent({
   config: configProp,
   isPreview,
+  screenId,
 }: ItemRoutingComponentProps) {
   const { toast } = useToast();
 
+  const resolvedConfig = React.useMemo(() => {
+    if (configProp?.itemListMode === "registered" && !configProp?.screenCode && screenId) {
+      return { ...configProp, screenCode: `screen_${screenId}` };
+    }
+    return configProp;
+  }, [configProp, screenId]);
+
   const {
-    config,
-    items,
-    versions,
-    details,
-    loading,
-    selectedItemCode,
-    selectedItemName,
-    selectedVersionId,
-    fetchItems,
-    selectItem,
-    selectVersion,
-    refreshVersions,
-    refreshDetails,
-    deleteDetail,
-    deleteVersion,
-    setDefaultVersion,
-    unsetDefaultVersion,
-  } = useItemRouting(configProp || {});
+    config, items, allItems, versions, details, loading,
+    selectedItemCode, selectedItemName, selectedVersionId, isRegisteredMode,
+    fetchItems, fetchRegisteredItems, fetchAllItems,
+    registerItemsBatch, unregisterItem,
+    selectItem, selectVersion, refreshVersions, refreshDetails,
+    deleteDetail, deleteVersion, setDefaultVersion, unsetDefaultVersion,
+  } = useItemRouting(resolvedConfig || {});
 
   const [searchText, setSearchText] = useState("");
   const [deleteTarget, setDeleteTarget] = useState<{
-    type: "version" | "detail";
-    id: string;
-    name: string;
+    type: "version" | "detail"; id: string; name: string;
   } | null>(null);
 
-  // 초기 로딩 (마운트 시 1회만)
+  // 품목 추가 다이얼로그
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [addSearchText, setAddSearchText] = useState("");
+  const [selectedAddItems, setSelectedAddItems] = useState<Set<string>>(new Set());
+  const [addLoading, setAddLoading] = useState(false);
+
+  const itemDisplayCols = config.itemDisplayColumns?.length
+    ? config.itemDisplayColumns : DEFAULT_ITEM_COLS;
+  const modalDisplayCols = config.modalDisplayColumns?.length
+    ? config.modalDisplayColumns : DEFAULT_ITEM_COLS;
+
+  // 초기 로딩
   const mountedRef = React.useRef(false);
   useEffect(() => {
     if (!mountedRef.current) {
       mountedRef.current = true;
-      fetchItems();
+      if (isRegisteredMode) fetchRegisteredItems();
+      else fetchItems();
     }
-  }, [fetchItems]);
+  }, [fetchItems, fetchRegisteredItems, isRegisteredMode]);
 
-  // 모달 저장 성공 감지 -> 데이터 새로고침
+  // 모달 저장 성공 감지
   const refreshVersionsRef = React.useRef(refreshVersions);
   const refreshDetailsRef = React.useRef(refreshDetails);
   refreshVersionsRef.current = refreshVersions;
   refreshDetailsRef.current = refreshDetails;
-
   useEffect(() => {
-    const handleSaveSuccess = () => {
-      refreshVersionsRef.current();
-      refreshDetailsRef.current();
-    };
-    window.addEventListener("saveSuccessInModal", handleSaveSuccess);
-    return () => {
-      window.removeEventListener("saveSuccessInModal", handleSaveSuccess);
-    };
+    const h = () => { refreshVersionsRef.current(); refreshDetailsRef.current(); };
+    window.addEventListener("saveSuccessInModal", h);
+    return () => window.removeEventListener("saveSuccessInModal", h);
   }, []);
 
-  // 품목 검색
+  // 검색
   const handleSearch = useCallback(() => {
-    fetchItems(searchText || undefined);
-  }, [fetchItems, searchText]);
+    if (isRegisteredMode) fetchRegisteredItems(searchText || undefined);
+    else fetchItems(searchText || undefined);
+  }, [fetchItems, fetchRegisteredItems, isRegisteredMode, searchText]);
 
-  const handleSearchKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter") handleSearch();
+  // ──── 품목 추가 모달 ────
+  const handleOpenAddDialog = useCallback(() => {
+    setAddSearchText(""); setSelectedAddItems(new Set()); setAddDialogOpen(true);
+    fetchAllItems();
+  }, [fetchAllItems]);
+
+  const handleToggleAddItem = useCallback((itemId: string) => {
+    setSelectedAddItems((prev) => {
+      const next = new Set(prev);
+      next.has(itemId) ? next.delete(itemId) : next.add(itemId);
+      return next;
+    });
+  }, []);
+
+  const handleConfirmAdd = useCallback(async () => {
+    if (selectedAddItems.size === 0) return;
+    setAddLoading(true);
+    const itemList = allItems
+      .filter((item) => selectedAddItems.has(item.id))
+      .map((item) => ({
+        itemId: item.id,
+        itemCode: item.item_code || item[config.dataSource.itemCodeColumn] || "",
+      }));
+    const success = await registerItemsBatch(itemList);
+    setAddLoading(false);
+    if (success) {
+      toast({ title: `${itemList.length}개 품목이 등록되었습니다` });
+      setAddDialogOpen(false);
+    } else {
+      toast({ title: "품목 등록 실패", variant: "destructive" });
+    }
+  }, [selectedAddItems, allItems, config.dataSource.itemCodeColumn, registerItemsBatch, toast]);
+
+  const handleUnregisterItem = useCallback(
+    async (registeredId: string, itemName: string) => {
+      const success = await unregisterItem(registeredId);
+      if (success) toast({ title: `${itemName} 등록 해제됨` });
+      else toast({ title: "등록 해제 실패", variant: "destructive" });
     },
-    [handleSearch]
+    [unregisterItem, toast]
   );
 
-  // 버전 추가 모달
+  // ──── 기존 핸들러 ────
   const handleAddVersion = useCallback(() => {
-    if (!selectedItemCode) {
-      toast({ title: "품목을 먼저 선택해주세요", variant: "destructive" });
-      return;
-    }
-    const screenId = config.modals.versionAddScreenId;
-    if (!screenId) return;
-
-    window.dispatchEvent(
-      new CustomEvent("openScreenModal", {
-        detail: {
-          screenId,
-          urlParams: { mode: "add", tableName: config.dataSource.routingVersionTable },
-          splitPanelParentData: {
-            [config.dataSource.routingVersionFkColumn]: selectedItemCode,
-          },
-        },
-      })
-    );
+    if (!selectedItemCode) { toast({ title: "품목을 먼저 선택해주세요", variant: "destructive" }); return; }
+    const sid = config.modals.versionAddScreenId;
+    if (!sid) return;
+    window.dispatchEvent(new CustomEvent("openScreenModal", {
+      detail: { screenId: sid, urlParams: { mode: "add", tableName: config.dataSource.routingVersionTable },
+        splitPanelParentData: { [config.dataSource.routingVersionFkColumn]: selectedItemCode } },
+    }));
   }, [selectedItemCode, config, toast]);
 
-  // 공정 추가 모달
   const handleAddProcess = useCallback(() => {
-    if (!selectedVersionId) {
-      toast({ title: "라우팅 버전을 먼저 선택해주세요", variant: "destructive" });
-      return;
-    }
-    const screenId = config.modals.processAddScreenId;
-    if (!screenId) return;
-
-    window.dispatchEvent(
-      new CustomEvent("openScreenModal", {
-        detail: {
-          screenId,
-          urlParams: { mode: "add", tableName: config.dataSource.routingDetailTable },
-          splitPanelParentData: {
-            [config.dataSource.routingDetailFkColumn]: selectedVersionId,
-          },
-        },
-      })
-    );
+    if (!selectedVersionId) { toast({ title: "라우팅 버전을 먼저 선택해주세요", variant: "destructive" }); return; }
+    const sid = config.modals.processAddScreenId;
+    if (!sid) return;
+    window.dispatchEvent(new CustomEvent("openScreenModal", {
+      detail: { screenId: sid, urlParams: { mode: "add", tableName: config.dataSource.routingDetailTable },
+        splitPanelParentData: { [config.dataSource.routingDetailFkColumn]: selectedVersionId } },
+    }));
   }, [selectedVersionId, config, toast]);
 
-  // 공정 수정 모달
   const handleEditProcess = useCallback(
     (detail: Record<string, any>) => {
-      const screenId = config.modals.processEditScreenId;
-      if (!screenId) return;
-
-      window.dispatchEvent(
-        new CustomEvent("openScreenModal", {
-          detail: {
-            screenId,
-            urlParams: { mode: "edit", tableName: config.dataSource.routingDetailTable },
-            editData: detail,
-          },
-        })
-      );
-    },
-    [config]
+      const sid = config.modals.processEditScreenId;
+      if (!sid) return;
+      window.dispatchEvent(new CustomEvent("openScreenModal", {
+        detail: { screenId: sid, urlParams: { mode: "edit", tableName: config.dataSource.routingDetailTable }, editData: detail },
+      }));
+    }, [config]
   );
 
-  // 기본 버전 토글
   const handleToggleDefault = useCallback(
     async (versionId: string, currentIsDefault: boolean) => {
-      let success: boolean;
-      if (currentIsDefault) {
-        success = await unsetDefaultVersion(versionId);
-        if (success) toast({ title: "기본 버전이 해제되었습니다" });
-      } else {
-        success = await setDefaultVersion(versionId);
-        if (success) toast({ title: "기본 버전으로 설정되었습니다" });
-      }
-      if (!success) {
-        toast({ title: "기본 버전 변경 실패", variant: "destructive" });
-      }
+      const success = currentIsDefault ? await unsetDefaultVersion(versionId) : await setDefaultVersion(versionId);
+      if (success) toast({ title: currentIsDefault ? "기본 버전이 해제되었습니다" : "기본 버전으로 설정되었습니다" });
+      else toast({ title: "기본 버전 변경 실패", variant: "destructive" });
     },
     [setDefaultVersion, unsetDefaultVersion, toast]
   );
 
-  // 삭제 확인
   const handleConfirmDelete = useCallback(async () => {
     if (!deleteTarget) return;
-
-    let success = false;
-    if (deleteTarget.type === "version") {
-      success = await deleteVersion(deleteTarget.id);
-    } else {
-      success = await deleteDetail(deleteTarget.id);
-    }
-
-    if (success) {
-      toast({ title: `${deleteTarget.name} 삭제 완료` });
-    } else {
-      toast({ title: "삭제 실패", variant: "destructive" });
-    }
+    const success = deleteTarget.type === "version"
+      ? await deleteVersion(deleteTarget.id) : await deleteDetail(deleteTarget.id);
+    toast({ title: success ? `${deleteTarget.name} 삭제 완료` : "삭제 실패", variant: success ? undefined : "destructive" });
     setDeleteTarget(null);
   }, [deleteTarget, deleteVersion, deleteDetail, toast]);
 
   const splitRatio = config.splitRatio || 40;
+  const registeredItemIds = React.useMemo(() => new Set(items.map((i) => i.id)), [items]);
+
+  // ──── 셀 값 추출 헬퍼 ────
+  const getCellValue = (item: Record<string, any>, colName: string) => {
+    return item[colName] ?? item[`item_${colName}`] ?? "-";
+  };
 
   if (isPreview) {
     return (
       <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/20 bg-muted/10 p-4">
         <div className="text-center">
           <ListOrdered className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
-          <p className="text-sm font-medium text-muted-foreground">
-            품목별 라우팅 관리
-          </p>
+          <p className="text-sm font-medium text-muted-foreground">품목별 라우팅 관리</p>
           <p className="mt-1 text-xs text-muted-foreground/70">
-            품목 선택 - 라우팅 버전 - 공정 순서
+            {isRegisteredMode ? "등록 품목 모드" : "전체 품목 모드"}
           </p>
         </div>
       </div>
@@ -221,94 +207,111 @@ export function ItemRoutingComponent({
   return (
     <div className="flex h-full flex-col overflow-hidden rounded-lg border bg-background">
       <div className="flex flex-1 overflow-hidden">
-        {/* 좌측 패널: 품목 목록 */}
-        <div
-          style={{ width: `${splitRatio}%` }}
-          className="flex shrink-0 flex-col overflow-hidden border-r"
-        >
-          <div className="border-b px-3 py-2">
+        {/* ════ 좌측 패널: 품목 목록 (테이블) ════ */}
+        <div style={{ width: `${splitRatio}%` }} className="flex shrink-0 flex-col overflow-hidden border-r">
+          <div className="flex items-center justify-between border-b px-3 py-2">
             <h3 className="text-sm font-semibold">
               {config.leftPanelTitle || "품목 목록"}
+              {isRegisteredMode && (
+                <span className="ml-1.5 text-[10px] font-normal text-muted-foreground">(등록 모드)</span>
+              )}
             </h3>
+            {isRegisteredMode && !config.readonly && (
+              <Button variant="outline" size="sm" className="h-6 gap-1 text-[10px]" onClick={handleOpenAddDialog}>
+                <Plus className="h-3 w-3" /> 품목 추가
+              </Button>
+            )}
           </div>
 
-          {/* 검색 */}
           <div className="flex gap-1.5 border-b px-3 py-2">
-            <Input
-              value={searchText}
-              onChange={(e) => setSearchText(e.target.value)}
-              onKeyDown={handleSearchKeyDown}
-              placeholder="품목명/품번 검색"
-              className="h-8 text-xs"
-            />
+            <Input value={searchText} onChange={(e) => setSearchText(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명/품번 검색" className="h-8 text-xs" />
             <Button variant="outline" size="icon" className="h-8 w-8 shrink-0" onClick={handleSearch}>
               <Search className="h-3.5 w-3.5" />
             </Button>
           </div>
 
-          {/* 품목 리스트 */}
-          <div className="flex-1 overflow-y-auto">
+          {/* 품목 테이블 */}
+          <div className="flex-1 overflow-auto">
             {items.length === 0 ? (
-              <div className="flex h-full items-center justify-center p-4">
+              <div className="flex h-full flex-col items-center justify-center gap-2 p-4">
                 <p className="text-xs text-muted-foreground">
-                  {loading ? "로딩 중..." : "품목이 없습니다"}
+                  {loading ? "로딩 중..." : isRegisteredMode ? "등록된 품목이 없습니다" : "품목이 없습니다"}
                 </p>
+                {isRegisteredMode && !loading && !config.readonly && (
+                  <Button variant="outline" size="sm" className="h-7 gap-1 text-xs" onClick={handleOpenAddDialog}>
+                    <Plus className="h-3 w-3" /> 품목 추가하기
+                  </Button>
+                )}
               </div>
             ) : (
-              <div className="divide-y">
-                {items.map((item) => {
-                  const itemCode =
-                    item[config.dataSource.itemCodeColumn] || item.item_code || item.item_number;
-                  const itemName =
-                    item[config.dataSource.itemNameColumn] || item.item_name;
-                  const isSelected = selectedItemCode === itemCode;
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    {itemDisplayCols.map((col) => (
+                      <TableHead key={col.name}
+                        style={{ width: col.width ? `${col.width}px` : undefined }}
+                        className={cn("text-[11px] py-1.5", col.align === "center" && "text-center", col.align === "right" && "text-right")}>
+                        {col.label}
+                      </TableHead>
+                    ))}
+                    {isRegisteredMode && !config.readonly && (
+                      <TableHead className="w-[36px] py-1.5" />
+                    )}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {items.map((item) => {
+                    const itemCode = item[config.dataSource.itemCodeColumn] || item.item_code || item.item_number;
+                    const itemName = item[config.dataSource.itemNameColumn] || item.item_name;
+                    const isSelected = selectedItemCode === itemCode;
 
-                  return (
-                    <button
-                      key={item.id}
-                      className={cn(
-                        "flex w-full items-center gap-2 px-3 py-2 text-left text-xs transition-colors hover:bg-muted/50",
-                        isSelected && "bg-primary/10 font-medium"
-                      )}
-                      onClick={() => selectItem(itemCode, itemName)}
-                    >
-                      <Package className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                      <div className="min-w-0 flex-1">
-                        <p className="truncate font-medium">{itemName}</p>
-                        <p className="truncate text-muted-foreground">{itemCode}</p>
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
+                    return (
+                      <TableRow key={item.registered_id || item.id}
+                        className={cn("cursor-pointer group", isSelected && "bg-primary/10")}
+                        onClick={() => selectItem(itemCode, itemName)}>
+                        {itemDisplayCols.map((col) => (
+                          <TableCell key={col.name}
+                            className={cn("text-xs py-1.5", col.align === "center" && "text-center", col.align === "right" && "text-right")}>
+                            {getCellValue(item, col.name)}
+                          </TableCell>
+                        ))}
+                        {isRegisteredMode && !config.readonly && item.registered_id && (
+                          <TableCell className="py-1.5 text-center">
+                            <Button variant="ghost" size="icon"
+                              className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity"
+                              onClick={(e) => { e.stopPropagation(); handleUnregisterItem(item.registered_id, itemName); }}
+                              title="등록 해제">
+                              <X className="h-3 w-3 text-muted-foreground hover:text-destructive" />
+                            </Button>
+                          </TableCell>
+                        )}
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
             )}
           </div>
         </div>
 
-        {/* 우측 패널: 버전 + 공정 */}
+        {/* ════ 우측 패널: 버전 + 공정 ════ */}
         <div className="flex flex-1 flex-col overflow-hidden">
           {selectedItemCode ? (
             <>
-              {/* 헤더: 선택된 품목 + 버전 추가 */}
               <div className="flex items-center justify-between border-b px-4 py-2">
                 <div>
                   <h3 className="text-sm font-semibold">{selectedItemName}</h3>
                   <p className="text-xs text-muted-foreground">{selectedItemCode}</p>
                 </div>
                 {!config.readonly && (
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-7 gap-1 text-xs"
-                    onClick={handleAddVersion}
-                  >
-                    <Plus className="h-3 w-3" />
-                    {config.versionAddButtonText || "+ 라우팅 버전 추가"}
+                  <Button variant="outline" size="sm" className="h-7 gap-1 text-xs" onClick={handleAddVersion}>
+                    <Plus className="h-3 w-3" /> {config.versionAddButtonText || "+ 라우팅 버전 추가"}
                   </Button>
                 )}
               </div>
 
-              {/* 버전 선택 버튼들 */}
               {versions.length > 0 ? (
                 <div className="flex flex-wrap items-center gap-1.5 border-b px-4 py-2">
                   <span className="mr-1 text-xs text-muted-foreground">버전:</span>
@@ -317,50 +320,24 @@ export function ItemRoutingComponent({
                     const isDefault = ver.is_default === true;
                     return (
                       <div key={ver.id} className="flex items-center gap-0.5">
-                        <Badge
-                          variant={isActive ? "default" : "outline"}
-                          className={cn(
-                            "cursor-pointer px-2.5 py-0.5 text-xs transition-colors",
+                        <Badge variant={isActive ? "default" : "outline"}
+                          className={cn("cursor-pointer px-2.5 py-0.5 text-xs transition-colors",
                             isActive && "bg-primary text-primary-foreground",
-                            isDefault && !isActive && "border-amber-400 bg-amber-50 text-amber-700"
-                          )}
-                          onClick={() => selectVersion(ver.id)}
-                        >
+                            isDefault && !isActive && "border-amber-400 bg-amber-50 text-amber-700")}
+                          onClick={() => selectVersion(ver.id)}>
                           {isDefault && <Star className="mr-1 h-3 w-3 fill-current" />}
                           {ver[config.dataSource.routingVersionNameColumn] || ver.version_name || ver.id}
                         </Badge>
                         {!config.readonly && (
                           <>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className={cn(
-                                "h-5 w-5",
-                                isDefault
-                                  ? "text-amber-500 hover:text-amber-600"
-                                  : "text-muted-foreground hover:text-amber-500"
-                              )}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleToggleDefault(ver.id, isDefault);
-                              }}
-                              title={isDefault ? "기본 버전 해제" : "기본 버전으로 설정"}
-                            >
+                            <Button variant="ghost" size="icon"
+                              className={cn("h-5 w-5", isDefault ? "text-amber-500 hover:text-amber-600" : "text-muted-foreground hover:text-amber-500")}
+                              onClick={(e) => { e.stopPropagation(); handleToggleDefault(ver.id, isDefault); }}
+                              title={isDefault ? "기본 버전 해제" : "기본 버전으로 설정"}>
                               <Star className={cn("h-3 w-3", isDefault && "fill-current")} />
                             </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon"
-                              className="h-5 w-5 text-muted-foreground hover:text-destructive"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                setDeleteTarget({
-                                  type: "version",
-                                  id: ver.id,
-                                  name: ver.version_name || ver.id,
-                                });
-                              }}
-                            >
+                            <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground hover:text-destructive"
+                              onClick={(e) => { e.stopPropagation(); setDeleteTarget({ type: "version", id: ver.id, name: ver.version_name || ver.id }); }}>
                               <Trash2 className="h-3 w-3" />
                             </Button>
                           </>
@@ -371,112 +348,65 @@ export function ItemRoutingComponent({
                 </div>
               ) : (
                 <div className="border-b px-4 py-3 text-center">
-                  <p className="text-xs text-muted-foreground">
-                    라우팅 버전이 없습니다. 버전을 추가해주세요.
-                  </p>
+                  <p className="text-xs text-muted-foreground">라우팅 버전이 없습니다. 버전을 추가해주세요.</p>
                 </div>
               )}
 
-              {/* 공정 테이블 */}
               {selectedVersionId ? (
                 <div className="flex flex-1 flex-col overflow-hidden">
-                  {/* 공정 테이블 헤더 */}
                   <div className="flex items-center justify-between px-4 py-2">
                     <h4 className="text-xs font-medium text-muted-foreground">
                       {config.rightPanelTitle || "공정 순서"} ({details.length}건)
                     </h4>
                     {!config.readonly && (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-7 gap-1 text-xs"
-                        onClick={handleAddProcess}
-                      >
-                        <Plus className="h-3 w-3" />
-                        {config.processAddButtonText || "+ 공정 추가"}
+                      <Button variant="outline" size="sm" className="h-7 gap-1 text-xs" onClick={handleAddProcess}>
+                        <Plus className="h-3 w-3" /> {config.processAddButtonText || "+ 공정 추가"}
                       </Button>
                     )}
                   </div>
-
-                  {/* 테이블 */}
                   <div className="flex-1 overflow-auto px-4 pb-4">
                     {details.length === 0 ? (
                       <div className="flex h-32 items-center justify-center">
-                        <p className="text-xs text-muted-foreground">
-                          {loading ? "로딩 중..." : "등록된 공정이 없습니다"}
-                        </p>
+                        <p className="text-xs text-muted-foreground">{loading ? "로딩 중..." : "등록된 공정이 없습니다"}</p>
                       </div>
                     ) : (
                       <Table>
                         <TableHeader>
                           <TableRow>
                             {config.processColumns.map((col) => (
-                              <TableHead
-                                key={col.name}
+                              <TableHead key={col.name}
                                 style={{ width: col.width ? `${col.width}px` : undefined }}
-                                className={cn(
-                                  "text-xs",
-                                  col.align === "center" && "text-center",
-                                  col.align === "right" && "text-right"
-                                )}
-                              >
+                                className={cn("text-xs", col.align === "center" && "text-center", col.align === "right" && "text-right")}>
                                 {col.label}
                               </TableHead>
                             ))}
-                            {!config.readonly && (
-                              <TableHead className="w-[80px] text-center text-xs">
-                                관리
-                              </TableHead>
-                            )}
+                            {!config.readonly && <TableHead className="w-[80px] text-center text-xs">관리</TableHead>}
                           </TableRow>
                         </TableHeader>
                         <TableBody>
                           {details.map((detail) => (
                             <TableRow key={detail.id}>
                               {config.processColumns.map((col) => {
-                                let cellValue = detail[col.name];
-                                if (cellValue == null) {
-                                  const aliasKey = Object.keys(detail).find(
-                                    (k) => k.endsWith(`_${col.name}`)
-                                  );
-                                  if (aliasKey) cellValue = detail[aliasKey];
+                                let v = detail[col.name];
+                                if (v == null) {
+                                  const ak = Object.keys(detail).find((k) => k.endsWith(`_${col.name}`));
+                                  if (ak) v = detail[ak];
                                 }
                                 return (
-                                  <TableCell
-                                    key={col.name}
-                                    className={cn(
-                                      "text-xs",
-                                      col.align === "center" && "text-center",
-                                      col.align === "right" && "text-right"
-                                    )}
-                                  >
-                                    {cellValue ?? "-"}
+                                  <TableCell key={col.name}
+                                    className={cn("text-xs", col.align === "center" && "text-center", col.align === "right" && "text-right")}>
+                                    {v ?? "-"}
                                   </TableCell>
                                 );
                               })}
                               {!config.readonly && (
                                 <TableCell className="text-center">
                                   <div className="flex items-center justify-center gap-1">
-                                    <Button
-                                      variant="ghost"
-                                      size="icon"
-                                      className="h-6 w-6"
-                                      onClick={() => handleEditProcess(detail)}
-                                    >
+                                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => handleEditProcess(detail)}>
                                       <Edit className="h-3 w-3" />
                                     </Button>
-                                    <Button
-                                      variant="ghost"
-                                      size="icon"
-                                      className="h-6 w-6 text-destructive hover:text-destructive"
-                                      onClick={() =>
-                                        setDeleteTarget({
-                                          type: "detail",
-                                          id: detail.id,
-                                          name: `공정 ${detail.seq_no || detail.id}`,
-                                        })
-                                      }
-                                    >
+                                    <Button variant="ghost" size="icon" className="h-6 w-6 text-destructive hover:text-destructive"
+                                      onClick={() => setDeleteTarget({ type: "detail", id: detail.id, name: `공정 ${detail.seq_no || detail.id}` })}>
                                       <Trash2 className="h-3 w-3" />
                                     </Button>
                                   </div>
@@ -492,9 +422,7 @@ export function ItemRoutingComponent({
               ) : (
                 versions.length > 0 && (
                   <div className="flex flex-1 items-center justify-center">
-                    <p className="text-xs text-muted-foreground">
-                      라우팅 버전을 선택해주세요
-                    </p>
+                    <p className="text-xs text-muted-foreground">라우팅 버전을 선택해주세요</p>
                   </div>
                 )
               )}
@@ -502,43 +430,121 @@ export function ItemRoutingComponent({
           ) : (
             <div className="flex flex-1 flex-col items-center justify-center text-center">
               <ListOrdered className="mb-3 h-12 w-12 text-muted-foreground/30" />
-              <p className="text-sm font-medium text-muted-foreground">
-                좌측에서 품목을 선택하세요
-              </p>
-              <p className="mt-1 text-xs text-muted-foreground/70">
-                품목을 선택하면 라우팅 버전별 공정 순서를 관리할 수 있습니다
-              </p>
+              <p className="text-sm font-medium text-muted-foreground">좌측에서 품목을 선택하세요</p>
+              <p className="mt-1 text-xs text-muted-foreground/70">품목을 선택하면 라우팅 버전별 공정 순서를 관리할 수 있습니다</p>
             </div>
           )}
         </div>
       </div>
 
-      {/* 삭제 확인 다이얼로그 */}
+      {/* ════ 삭제 확인 ════ */}
       <AlertDialog open={!!deleteTarget} onOpenChange={() => setDeleteTarget(null)}>
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle className="text-base">삭제 확인</AlertDialogTitle>
             <AlertDialogDescription className="text-sm">
               {deleteTarget?.name}을(를) 삭제하시겠습니까?
-              {deleteTarget?.type === "version" && (
-                <>
-                  <br />
-                  해당 버전에 포함된 모든 공정 정보도 함께 삭제됩니다.
-                </>
-              )}
+              {deleteTarget?.type === "version" && (<><br />해당 버전에 포함된 모든 공정 정보도 함께 삭제됩니다.</>)}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>취소</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmDelete}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-            >
+            <AlertDialogAction onClick={handleConfirmDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
               삭제
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* ════ 품목 추가 다이얼로그 (테이블 형태 + 검색) ════ */}
+      <Dialog open={addDialogOpen} onOpenChange={setAddDialogOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">품목 추가</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              좌측 목록에 표시할 품목을 선택하세요
+              {(config.itemFilterConditions?.length ?? 0) > 0 && (
+                <span className="ml-1 text-[10px] text-muted-foreground">
+                  (필터 {config.itemFilterConditions!.length}건 적용됨)
+                </span>
+              )}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex gap-1.5">
+            <Input value={addSearchText} onChange={(e) => setAddSearchText(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") fetchAllItems(addSearchText || undefined); }}
+              placeholder="품목명/품번 검색" className="h-8 text-xs sm:h-10 sm:text-sm" />
+            <Button variant="outline" size="icon" className="h-8 w-8 shrink-0 sm:h-10 sm:w-10"
+              onClick={() => fetchAllItems(addSearchText || undefined)}>
+              <Search className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+
+          <div className="max-h-[340px] overflow-auto rounded-md border">
+            {allItems.length === 0 ? (
+              <div className="flex items-center justify-center py-8">
+                <p className="text-xs text-muted-foreground">품목이 없습니다</p>
+              </div>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-[40px] text-center text-[11px] py-1.5" />
+                    {modalDisplayCols.map((col) => (
+                      <TableHead key={col.name}
+                        style={{ width: col.width ? `${col.width}px` : undefined }}
+                        className={cn("text-[11px] py-1.5", col.align === "center" && "text-center", col.align === "right" && "text-right")}>
+                        {col.label}
+                      </TableHead>
+                    ))}
+                    <TableHead className="w-[60px] text-center text-[11px] py-1.5">상태</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {allItems.map((item) => {
+                    const isAlreadyRegistered = registeredItemIds.has(item.id);
+                    const isChecked = selectedAddItems.has(item.id);
+                    return (
+                      <TableRow key={item.id}
+                        className={cn("cursor-pointer", isAlreadyRegistered && "opacity-50", isChecked && "bg-primary/5")}
+                        onClick={() => { if (!isAlreadyRegistered) handleToggleAddItem(item.id); }}>
+                        <TableCell className="text-center py-1.5">
+                          <Checkbox checked={isChecked || isAlreadyRegistered} disabled={isAlreadyRegistered} className="h-4 w-4" />
+                        </TableCell>
+                        {modalDisplayCols.map((col) => (
+                          <TableCell key={col.name}
+                            className={cn("text-xs py-1.5", col.align === "center" && "text-center", col.align === "right" && "text-right")}>
+                            {getCellValue(item, col.name)}
+                          </TableCell>
+                        ))}
+                        <TableCell className="text-center py-1.5">
+                          {isAlreadyRegistered && (
+                            <Badge variant="secondary" className="h-5 text-[10px]">등록됨</Badge>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </div>
+
+          {selectedAddItems.size > 0 && (
+            <p className="text-xs text-muted-foreground">{selectedAddItems.size}개 선택됨</p>
+          )}
+
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button variant="outline" onClick={() => setAddDialogOpen(false)}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</Button>
+            <Button onClick={handleConfirmAdd} disabled={selectedAddItems.size === 0 || addLoading}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
+              {addLoading ? "등록 중..." : `${selectedAddItems.size}개 추가`}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx b/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
index 7a9fa624..653d351d 100644
--- a/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
+++ b/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
@@ -9,7 +9,7 @@ export class ItemRoutingRenderer extends AutoRegisteringComponentRenderer {
   static componentDefinition = V2ItemRoutingDefinition;
 
   render(): React.ReactElement {
-    const { formData, isPreview, config, tableName } = this.props as Record<
+    const { formData, isPreview, config, tableName, screenId } = this.props as Record<
       string,
       unknown
     >;
@@ -20,6 +20,7 @@ export class ItemRoutingRenderer extends AutoRegisteringComponentRenderer {
         formData={formData as Record<string, unknown>}
         tableName={tableName as string}
         isPreview={isPreview as boolean}
+        screenId={screenId as number | string}
       />
     );
   }
diff --git a/frontend/lib/registry/components/v2-item-routing/config.ts b/frontend/lib/registry/components/v2-item-routing/config.ts
index a84ff23e..42ae1479 100644
--- a/frontend/lib/registry/components/v2-item-routing/config.ts
+++ b/frontend/lib/registry/components/v2-item-routing/config.ts
@@ -35,4 +35,15 @@ export const defaultConfig: ItemRoutingConfig = {
   autoSelectFirstVersion: true,
   versionAddButtonText: "+ 라우팅 버전 추가",
   processAddButtonText: "+ 공정 추가",
+  itemListMode: "all",
+  screenCode: "",
+  itemDisplayColumns: [
+    { name: "item_name", label: "품명" },
+    { name: "item_code", label: "품번", width: 100 },
+  ],
+  modalDisplayColumns: [
+    { name: "item_name", label: "품명" },
+    { name: "item_code", label: "품번", width: 100 },
+  ],
+  itemFilterConditions: [],
 };
diff --git a/frontend/lib/registry/components/v2-item-routing/hooks/useItemRouting.ts b/frontend/lib/registry/components/v2-item-routing/hooks/useItemRouting.ts
index 97f6be4f..bd1f551b 100644
--- a/frontend/lib/registry/components/v2-item-routing/hooks/useItemRouting.ts
+++ b/frontend/lib/registry/components/v2-item-routing/hooks/useItemRouting.ts
@@ -1,12 +1,21 @@
 "use client";
 
-import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useState, useCallback, useMemo, useRef } from "react";
 import { apiClient } from "@/lib/api/client";
-import { ItemRoutingConfig, ItemData, RoutingVersionData, RoutingDetailData } from "../types";
+import { ItemRoutingConfig, ItemData, RoutingVersionData, RoutingDetailData, ColumnDef } from "../types";
 import { defaultConfig } from "../config";
 
 const API_BASE = "/process-work-standard";
 
+/** 표시 컬럼 목록에서 기본(item_name, item_code) 외 추가 컬럼만 추출 */
+function getExtraColumnNames(columns?: ColumnDef[]): string {
+  if (!columns || columns.length === 0) return "";
+  return columns
+    .map((c) => c.name)
+    .filter((n) => n && n !== "item_name" && n !== "item_code")
+    .join(",");
+}
+
 export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
   const configKey = useMemo(
     () => JSON.stringify(configPartial),
@@ -27,21 +36,81 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
   configRef.current = config;
 
   const [items, setItems] = useState<ItemData[]>([]);
+  const [allItems, setAllItems] = useState<ItemData[]>([]);
   const [versions, setVersions] = useState<RoutingVersionData[]>([]);
   const [details, setDetails] = useState<RoutingDetailData[]>([]);
   const [loading, setLoading] = useState(false);
 
-  // 선택 상태
   const [selectedItemCode, setSelectedItemCode] = useState<string | null>(null);
   const [selectedItemName, setSelectedItemName] = useState<string | null>(null);
   const [selectedVersionId, setSelectedVersionId] = useState<string | null>(null);
 
-  // 품목 목록 조회
+  const isRegisteredMode = config.itemListMode === "registered";
+
+  /** API 기본 파라미터 생성 */
+  const buildBaseParams = useCallback((search?: string, columns?: ColumnDef[]) => {
+    const ds = configRef.current.dataSource;
+    const extra = getExtraColumnNames(columns);
+    const filters = configRef.current.itemFilterConditions;
+    const params: Record<string, string> = {
+      tableName: ds.itemTable,
+      nameColumn: ds.itemNameColumn,
+      codeColumn: ds.itemCodeColumn,
+      routingTable: ds.routingVersionTable,
+      routingFkColumn: ds.routingVersionFkColumn,
+    };
+    if (search) params.search = search;
+    if (extra) params.extraColumns = extra;
+    if (filters && filters.length > 0) {
+      params.filterConditions = JSON.stringify(filters);
+    }
+    return new URLSearchParams(params);
+  }, []);
+
+  // ────────────────────────────────────────
+  // 품목 목록 조회 (all 모드)
+  // ────────────────────────────────────────
   const fetchItems = useCallback(
     async (search?: string) => {
+      try {
+        setLoading(true);
+        const cols = configRef.current.itemDisplayColumns;
+        const params = buildBaseParams(search, cols);
+        const res = await apiClient.get(`${API_BASE}/items?${params}`);
+        if (res.data?.success) {
+          const data = res.data.data || [];
+          if (configRef.current.itemListMode !== "registered") {
+            setItems(data);
+          }
+          return data;
+        }
+      } catch (err) {
+        console.error("품목 조회 실패", err);
+      } finally {
+        setLoading(false);
+      }
+      return [];
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [configKey, buildBaseParams]
+  );
+
+  // ────────────────────────────────────────
+  // 등록 품목 조회 (registered 모드)
+  // ────────────────────────────────────────
+  const fetchRegisteredItems = useCallback(
+    async (search?: string) => {
+      const screenCode = configRef.current.screenCode;
+      if (!screenCode) {
+        console.warn("screenCode가 설정되지 않았습니다");
+        setItems([]);
+        return;
+      }
       try {
         setLoading(true);
         const ds = configRef.current.dataSource;
+        const cols = configRef.current.itemDisplayColumns;
+        const extra = getExtraColumnNames(cols);
         const params = new URLSearchParams({
           tableName: ds.itemTable,
           nameColumn: ds.itemNameColumn,
@@ -49,13 +118,16 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
           routingTable: ds.routingVersionTable,
           routingFkColumn: ds.routingVersionFkColumn,
           ...(search ? { search } : {}),
+          ...(extra ? { extraColumns: extra } : {}),
         });
-        const res = await apiClient.get(`${API_BASE}/items?${params}`);
+        const res = await apiClient.get(
+          `${API_BASE}/registered-items/${encodeURIComponent(screenCode)}?${params}`
+        );
         if (res.data?.success) {
           setItems(res.data.data || []);
         }
       } catch (err) {
-        console.error("품목 조회 실패", err);
+        console.error("등록 품목 조회 실패", err);
       } finally {
         setLoading(false);
       }
@@ -64,7 +136,104 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
     [configKey]
   );
 
-  // 라우팅 버전 목록 조회
+  // ────────────────────────────────────────
+  // 전체 품목 조회 (등록 팝업용 - 필터+추가컬럼 적용)
+  // ────────────────────────────────────────
+  const fetchAllItems = useCallback(
+    async (search?: string) => {
+      try {
+        const cols = configRef.current.modalDisplayColumns;
+        const params = buildBaseParams(search, cols);
+        const res = await apiClient.get(`${API_BASE}/items?${params}`);
+        if (res.data?.success) {
+          setAllItems(res.data.data || []);
+        }
+      } catch (err) {
+        console.error("전체 품목 조회 실패", err);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [configKey, buildBaseParams]
+  );
+
+  // ────────────────────────────────────────
+  // 품목 등록/제거 (registered 모드)
+  // ────────────────────────────────────────
+  const registerItem = useCallback(
+    async (itemId: string, itemCode: string) => {
+      const screenCode = configRef.current.screenCode;
+      if (!screenCode) return false;
+      try {
+        const res = await apiClient.post(`${API_BASE}/registered-items`, {
+          screenCode,
+          itemId,
+          itemCode,
+        });
+        if (res.data?.success) {
+          await fetchRegisteredItems();
+          return true;
+        }
+      } catch (err) {
+        console.error("품목 등록 실패", err);
+      }
+      return false;
+    },
+    [fetchRegisteredItems]
+  );
+
+  const registerItemsBatch = useCallback(
+    async (itemList: { itemId: string; itemCode: string }[]) => {
+      const screenCode = configRef.current.screenCode;
+      if (!screenCode) return false;
+      try {
+        const res = await apiClient.post(`${API_BASE}/registered-items/batch`, {
+          screenCode,
+          items: itemList,
+        });
+        if (res.data?.success) {
+          await fetchRegisteredItems();
+          return true;
+        }
+      } catch (err) {
+        console.error("품목 일괄 등록 실패", err);
+      }
+      return false;
+    },
+    [fetchRegisteredItems]
+  );
+
+  const unregisterItem = useCallback(
+    async (registeredId: string) => {
+      try {
+        const res = await apiClient.delete(`${API_BASE}/registered-items/${registeredId}`);
+        if (res.data?.success) {
+          if (selectedItemCode) {
+            const removedItem = items.find((i) => i.registered_id === registeredId);
+            if (removedItem) {
+              const removedCode = removedItem.item_code || removedItem[configRef.current.dataSource.itemCodeColumn];
+              if (selectedItemCode === removedCode) {
+                setSelectedItemCode(null);
+                setSelectedItemName(null);
+                setSelectedVersionId(null);
+                setVersions([]);
+                setDetails([]);
+              }
+            }
+          }
+          await fetchRegisteredItems();
+          return true;
+        }
+      } catch (err) {
+        console.error("등록 품목 제거 실패", err);
+      }
+      return false;
+    },
+    [selectedItemCode, items, fetchRegisteredItems]
+  );
+
+  // ────────────────────────────────────────
+  // 라우팅 버전/공정 관련 (기존 동일)
+  // ────────────────────────────────────────
   const fetchVersions = useCallback(
     async (itemCode: string) => {
       try {
@@ -94,7 +263,6 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
     [configKey]
   );
 
-  // 공정 상세 목록 조회 (특정 버전의 공정들) - entity join 포함
   const fetchDetails = useCallback(
     async (versionId: string) => {
       try {
@@ -128,18 +296,14 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
     [configKey]
   );
 
-  // 품목 선택
   const selectItem = useCallback(
     async (itemCode: string, itemName: string) => {
       setSelectedItemCode(itemCode);
       setSelectedItemName(itemName);
       setSelectedVersionId(null);
       setDetails([]);
-
       const versionList = await fetchVersions(itemCode);
-
       if (versionList.length > 0) {
-        // 기본 버전 우선, 없으면 첫번째 버전 선택
         const defaultVersion = versionList.find((v: RoutingVersionData) => v.is_default);
         const targetVersion = defaultVersion || (configRef.current.autoSelectFirstVersion ? versionList[0] : null);
         if (targetVersion) {
@@ -151,7 +315,6 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
     [fetchVersions, fetchDetails]
   );
 
-  // 버전 선택
   const selectVersion = useCallback(
     async (versionId: string) => {
       setSelectedVersionId(versionId);
@@ -160,7 +323,6 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
     [fetchDetails]
   );
 
-  // 모달에서 데이터 변경 후 새로고침
   const refreshVersions = useCallback(async () => {
     if (selectedItemCode) {
       const versionList = await fetchVersions(selectedItemCode);
@@ -180,7 +342,6 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
     }
   }, [selectedVersionId, fetchDetails]);
 
-  // 공정 삭제
   const deleteDetail = useCallback(
     async (detailId: string) => {
       try {
@@ -189,19 +350,13 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
           `/table-management/tables/${ds.routingDetailTable}/delete`,
           { data: [{ id: detailId }] }
         );
-        if (res.data?.success) {
-          await refreshDetails();
-          return true;
-        }
-      } catch (err) {
-        console.error("공정 삭제 실패", err);
-      }
+        if (res.data?.success) { await refreshDetails(); return true; }
+      } catch (err) { console.error("공정 삭제 실패", err); }
       return false;
     },
     [refreshDetails]
   );
 
-  // 버전 삭제
   const deleteVersion = useCallback(
     async (versionId: string) => {
       try {
@@ -211,22 +366,16 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
           { data: [{ id: versionId }] }
         );
         if (res.data?.success) {
-          if (selectedVersionId === versionId) {
-            setSelectedVersionId(null);
-            setDetails([]);
-          }
+          if (selectedVersionId === versionId) { setSelectedVersionId(null); setDetails([]); }
           await refreshVersions();
           return true;
         }
-      } catch (err) {
-        console.error("버전 삭제 실패", err);
-      }
+      } catch (err) { console.error("버전 삭제 실패", err); }
       return false;
     },
     [selectedVersionId, refreshVersions]
   );
 
-  // 기본 버전 설정
   const setDefaultVersion = useCallback(
     async (versionId: string) => {
       try {
@@ -236,20 +385,15 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
           routingFkColumn: ds.routingVersionFkColumn,
         });
         if (res.data?.success) {
-          if (selectedItemCode) {
-            await fetchVersions(selectedItemCode);
-          }
+          if (selectedItemCode) await fetchVersions(selectedItemCode);
           return true;
         }
-      } catch (err) {
-        console.error("기본 버전 설정 실패", err);
-      }
+      } catch (err) { console.error("기본 버전 설정 실패", err); }
       return false;
     },
     [selectedItemCode, fetchVersions]
   );
 
-  // 기본 버전 해제
   const unsetDefaultVersion = useCallback(
     async (versionId: string) => {
       try {
@@ -258,14 +402,10 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
           routingVersionTable: ds.routingVersionTable,
         });
         if (res.data?.success) {
-          if (selectedItemCode) {
-            await fetchVersions(selectedItemCode);
-          }
+          if (selectedItemCode) await fetchVersions(selectedItemCode);
           return true;
         }
-      } catch (err) {
-        console.error("기본 버전 해제 실패", err);
-      }
+      } catch (err) { console.error("기본 버전 해제 실패", err); }
       return false;
     },
     [selectedItemCode, fetchVersions]
@@ -274,13 +414,20 @@ export function useItemRouting(configPartial: Partial<ItemRoutingConfig>) {
   return {
     config,
     items,
+    allItems,
     versions,
     details,
     loading,
     selectedItemCode,
     selectedItemName,
     selectedVersionId,
+    isRegisteredMode,
     fetchItems,
+    fetchRegisteredItems,
+    fetchAllItems,
+    registerItem,
+    registerItemsBatch,
+    unregisterItem,
     selectItem,
     selectVersion,
     refreshVersions,
diff --git a/frontend/lib/registry/components/v2-item-routing/index.ts b/frontend/lib/registry/components/v2-item-routing/index.ts
index 1ccd3c7a..85404072 100644
--- a/frontend/lib/registry/components/v2-item-routing/index.ts
+++ b/frontend/lib/registry/components/v2-item-routing/index.ts
@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { ItemRoutingComponent } from "./ItemRoutingComponent";
-import { ItemRoutingConfigPanel } from "./ItemRoutingConfigPanel";
+import { V2ItemRoutingConfigPanel as ItemRoutingConfigPanel } from "@/components/v2/config-panels/V2ItemRoutingConfigPanel";
 import { defaultConfig } from "./config";
 
 export const V2ItemRoutingDefinition = createComponentDefinition({
diff --git a/frontend/lib/registry/components/v2-item-routing/types.ts b/frontend/lib/registry/components/v2-item-routing/types.ts
index 06b108da..08fe73c2 100644
--- a/frontend/lib/registry/components/v2-item-routing/types.ts
+++ b/frontend/lib/registry/components/v2-item-routing/types.ts
@@ -10,10 +10,10 @@ export interface ItemRoutingDataSource {
   itemNameColumn: string;
   itemCodeColumn: string;
   routingVersionTable: string;
-  routingVersionFkColumn: string; // item_routing_version에서 item_code를 가리키는 FK
+  routingVersionFkColumn: string;
   routingVersionNameColumn: string;
   routingDetailTable: string;
-  routingDetailFkColumn: string; // item_routing_detail에서 routing_version_id를 가리키는 FK
+  routingDetailFkColumn: string;
   processTable: string;
   processNameColumn: string;
   processCodeColumn: string;
@@ -26,14 +26,24 @@ export interface ItemRoutingModals {
   processEditScreenId?: number;
 }
 
-// 공정 테이블 컬럼 정의
-export interface ProcessColumnDef {
+// 컬럼 정의 (공정/품목 공용)
+export interface ColumnDef {
   name: string;
   label: string;
   width?: number;
   align?: "left" | "center" | "right";
 }
 
+// 공정 테이블 컬럼 정의 (기존 호환)
+export type ProcessColumnDef = ColumnDef;
+
+// 품목 필터 조건
+export interface ItemFilterCondition {
+  column: string;
+  operator: "equals" | "contains" | "not_equals";
+  value: string;
+}
+
 // 전체 Config
 export interface ItemRoutingConfig {
   dataSource: ItemRoutingDataSource;
@@ -46,6 +56,14 @@ export interface ItemRoutingConfig {
   autoSelectFirstVersion?: boolean;
   versionAddButtonText?: string;
   processAddButtonText?: string;
+  itemListMode?: "all" | "registered";
+  screenCode?: string;
+  /** 좌측 품목 목록에 표시할 컬럼 */
+  itemDisplayColumns?: ColumnDef[];
+  /** 품목 추가 모달에 표시할 컬럼 */
+  modalDisplayColumns?: ColumnDef[];
+  /** 품목 조회 시 사전 필터 조건 */
+  itemFilterConditions?: ItemFilterCondition[];
 }
 
 // 컴포넌트 Props
@@ -54,6 +72,7 @@ export interface ItemRoutingComponentProps {
   formData?: Record<string, any>;
   isPreview?: boolean;
   tableName?: string;
+  screenId?: number | string;
 }
 
 // 데이터 모델
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/index.ts b/frontend/lib/registry/components/v2-location-swap-selector/index.ts
index 33455afb..acb566c9 100644
--- a/frontend/lib/registry/components/v2-location-swap-selector/index.ts
+++ b/frontend/lib/registry/components/v2-location-swap-selector/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { LocationSwapSelectorComponent } from "./LocationSwapSelectorComponent";
-import { LocationSwapSelectorConfigPanel } from "./LocationSwapSelectorConfigPanel";
+import { V2LocationSwapSelectorConfigPanel as LocationSwapSelectorConfigPanel } from "@/components/v2/config-panels/V2LocationSwapSelectorConfigPanel";
 
 /**
  * LocationSwapSelector 컴포넌트 정의
diff --git a/frontend/lib/registry/components/v2-numbering-rule/index.ts b/frontend/lib/registry/components/v2-numbering-rule/index.ts
index 92d42d34..5f37f1fb 100644
--- a/frontend/lib/registry/components/v2-numbering-rule/index.ts
+++ b/frontend/lib/registry/components/v2-numbering-rule/index.ts
@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { NumberingRuleWrapper } from "./NumberingRuleComponent";
-import { NumberingRuleConfigPanel } from "./NumberingRuleConfigPanel";
+import { V2NumberingRuleConfigPanel } from "@/components/v2/config-panels/V2NumberingRuleConfigPanel";
 import { defaultConfig } from "./config";
 
 /**
@@ -25,7 +25,7 @@ export const V2NumberingRuleDefinition = createComponentDefinition({
     height: 800,
     gridColumnSpan: "12",
   },
-  configPanel: NumberingRuleConfigPanel,
+  configPanel: V2NumberingRuleConfigPanel,
   icon: "Hash",
   tags: ["코드", "채번", "규칙", "표시", "자동생성"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-pivot-grid/index.ts b/frontend/lib/registry/components/v2-pivot-grid/index.ts
index b1bbe99b..50d5691e 100644
--- a/frontend/lib/registry/components/v2-pivot-grid/index.ts
+++ b/frontend/lib/registry/components/v2-pivot-grid/index.ts
@@ -43,7 +43,7 @@ export type {
 
 // 컴포넌트 내보내기
 export { PivotGridComponent } from "./PivotGridComponent";
-export { PivotGridConfigPanel } from "./PivotGridConfigPanel";
+export { V2PivotGridConfigPanel as PivotGridConfigPanel } from "@/components/v2/config-panels/V2PivotGridConfigPanel";
 
 // 유틸리티
 export {
diff --git a/frontend/lib/registry/components/v2-process-work-standard/index.ts b/frontend/lib/registry/components/v2-process-work-standard/index.ts
index f400abae..55975174 100644
--- a/frontend/lib/registry/components/v2-process-work-standard/index.ts
+++ b/frontend/lib/registry/components/v2-process-work-standard/index.ts
@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
-import { ProcessWorkStandardConfigPanel } from "./ProcessWorkStandardConfigPanel";
+import { V2ProcessWorkStandardConfigPanel as ProcessWorkStandardConfigPanel } from "@/components/v2/config-panels/V2ProcessWorkStandardConfigPanel";
 import { defaultConfig } from "./config";
 
 export const V2ProcessWorkStandardDefinition = createComponentDefinition({
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
index 127ffac8..627cf1fa 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
@@ -96,12 +96,12 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
   };
 
   return (
-    <div className="relative rounded-lg border border-border bg-white shadow-sm">
+    <div className="border-border relative rounded-lg border bg-white shadow-sm">
       {/* 헤더 */}
-      <div className="flex items-center justify-between rounded-t-lg bg-primary px-4 py-2 text-white">
+      <div className="bg-primary flex items-center justify-between rounded-t-lg px-4 py-2 text-white">
         <span className="font-medium">조건 {index + 1}</span>
         {!readonly && (
-          <button onClick={() => onRemove(condition.id)} className="rounded p-1 transition-colors hover:bg-primary/90">
+          <button onClick={() => onRemove(condition.id)} className="hover:bg-primary/90 rounded p-1 transition-colors">
             <X className="h-4 w-4" />
           </button>
         )}
@@ -112,7 +112,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         {/* 열 범위 */}
         <div className="flex items-center gap-2">
           <div className="flex-1">
-            <label className="mb-1 block text-xs font-medium text-foreground">
+            <label className="text-foreground mb-1 block text-xs font-medium">
               열 범위 <span className="text-destructive">*</span>
             </label>
             <div className="flex items-center gap-2">
@@ -140,7 +140,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
             </div>
           </div>
           <div className="w-20">
-            <label className="mb-1 block text-xs font-medium text-foreground">
+            <label className="text-foreground mb-1 block text-xs font-medium">
               단 수 <span className="text-destructive">*</span>
             </label>
             <Input
@@ -157,7 +157,7 @@ const ConditionCard: React.FC<ConditionCardProps> = ({
         </div>
 
         {/* 계산 결과 */}
-        <div className="rounded-md bg-primary/10 px-3 py-2 text-center text-sm text-primary">
+        <div className="bg-primary/10 text-primary rounded-md px-3 py-2 text-center text-sm">
           {locationCount > 0 ? (
             <>
               {localValues.startRow}열 ~ {localValues.endRow}열 x {localValues.levels}단 ={" "}
@@ -627,7 +627,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
           <CardTitle className="flex items-center gap-2 text-base">
-            <div className="h-4 w-1 rounded bg-gradient-to-b from-green-500 to-primary/50" />렉 라인 구조 설정
+            <div className="to-primary/50 h-4 w-1 rounded bg-gradient-to-b from-green-500" />렉 라인 구조 설정
           </CardTitle>
           {!readonly && (
             <div className="flex items-center gap-2">
@@ -720,8 +720,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 기존 데이터 존재 알림 */}
           {!isCheckingDuplicates && existingLocations.length > 0 && !hasDuplicateWithExisting && (
-            <Alert className="mb-4 border-primary/20 bg-primary/10">
-              <AlertCircle className="h-4 w-4 text-primary" />
+            <Alert className="border-primary/20 bg-primary/10 mb-4">
+              <AlertCircle className="text-primary h-4 w-4" />
               <AlertDescription className="text-primary">
                 해당 창고/층/구역에 <strong>{existingLocations.length}개</strong>의 위치가 이미 등록되어 있습니다.
               </AlertDescription>
@@ -730,9 +730,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 현재 매핑된 값 표시 */}
           {(context.warehouseCode || context.warehouseName || context.floor || context.zone) && (
-            <div className="mb-4 flex flex-wrap gap-2 rounded-lg bg-muted p-3">
+            <div className="bg-muted mb-4 flex flex-wrap gap-2 rounded-lg p-3">
               {(context.warehouseCode || context.warehouseName) && (
-                <span className="rounded bg-primary/10 px-2 py-1 text-xs text-primary">
+                <span className="bg-primary/10 text-primary rounded px-2 py-1 text-xs">
                   창고: {context.warehouseName || context.warehouseCode}
                   {context.warehouseName && context.warehouseCode && ` (${context.warehouseCode})`}
                 </span>
@@ -749,28 +749,28 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </span>
               )}
               {context.status && (
-                <span className="rounded bg-muted/80 px-2 py-1 text-xs text-foreground">상태: {context.status}</span>
+                <span className="bg-muted/80 text-foreground rounded px-2 py-1 text-xs">상태: {context.status}</span>
               )}
             </div>
           )}
 
           {/* 안내 메시지 */}
-          <div className="mb-4 rounded-lg bg-primary/10 p-4">
-            <ol className="space-y-1 text-sm text-primary">
+          <div className="bg-primary/10 mb-4 rounded-lg p-4">
+            <ol className="text-primary space-y-1 text-sm">
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
+                <span className="bg-primary flex h-5 w-5 shrink-0 items-center justify-center rounded text-xs font-bold text-white">
                   1
                 </span>
                 조건 추가 버튼을 클릭하여 렉 라인 조건을 생성하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
+                <span className="bg-primary flex h-5 w-5 shrink-0 items-center justify-center rounded text-xs font-bold text-white">
                   2
                 </span>
                 각 조건마다 열 범위와 단 수를 입력하세요
               </li>
               <li className="flex items-start gap-2">
-                <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded bg-primary text-xs font-bold text-white">
+                <span className="bg-primary flex h-5 w-5 shrink-0 items-center justify-center rounded text-xs font-bold text-white">
                   3
                 </span>
                 예시: 조건1(1~3열, 3단), 조건2(4~6열, 5단)
@@ -780,9 +780,9 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
 
           {/* 조건 목록 또는 빈 상태 */}
           {conditions.length === 0 ? (
-            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-12">
-              <div className="mb-4 text-6xl text-muted-foreground/50">📦</div>
-              <p className="mb-4 text-muted-foreground">조건을 추가하여 렉 구조를 설정하세요</p>
+            <div className="border-border flex flex-col items-center justify-center rounded-lg border-2 border-dashed py-12">
+              <div className="text-muted-foreground/50 mb-4 text-6xl">📦</div>
+              <p className="text-muted-foreground mb-4">조건을 추가하여 렉 구조를 설정하세요</p>
               {!readonly && (
                 <Button onClick={addCondition} className="gap-1">
                   <Plus className="h-4 w-4" />첫 번째 조건 추가
@@ -833,15 +833,15 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
             {config.showStatistics && (
               <div className="mb-4 grid grid-cols-3 gap-4">
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-muted-foreground">총 위치</div>
+                  <div className="text-muted-foreground text-sm">총 위치</div>
                   <div className="text-2xl font-bold">{statistics.totalLocations}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-muted-foreground">열 수</div>
+                  <div className="text-muted-foreground text-sm">열 수</div>
                   <div className="text-2xl font-bold">{statistics.totalRows}개</div>
                 </div>
                 <div className="rounded-lg border bg-white p-4 text-center">
-                  <div className="text-sm text-muted-foreground">최대 단</div>
+                  <div className="text-muted-foreground text-sm">최대 단</div>
                   <div className="text-2xl font-bold">{statistics.maxLevel}단</div>
                 </div>
               </div>
@@ -852,7 +852,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               <div className="rounded-lg border">
                 <ScrollArea className="h-[400px]">
                   <Table>
-                    <TableHeader className="sticky top-0 bg-muted">
+                    <TableHeader className="bg-muted sticky top-0">
                       <TableRow>
                         <TableHead className="w-12 text-center">No</TableHead>
                         <TableHead>위치코드</TableHead>
@@ -884,8 +884,8 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                 </ScrollArea>
               </div>
             ) : (
-              <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border py-8 text-muted-foreground">
-                <Eye className="mb-2 h-8 w-8 text-muted-foreground/50" />
+              <div className="border-border text-muted-foreground flex flex-col items-center justify-center rounded-lg border-2 border-dashed py-8">
+                <Eye className="text-muted-foreground/50 mb-2 h-8 w-8" />
                 <p>미리보기 생성 버튼을 클릭하여 결과를 확인하세요</p>
               </div>
             )}
@@ -932,16 +932,16 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
               {/* 템플릿 목록 */}
               {templates.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium text-foreground">저장된 템플릿</div>
+                  <div className="text-foreground text-sm font-medium">저장된 템플릿</div>
                   <ScrollArea className="h-[200px]">
                     {templates.map((template) => (
                       <div
                         key={template.id}
-                        className="flex items-center justify-between rounded-lg border p-3 hover:bg-muted"
+                        className="hover:bg-muted flex items-center justify-between rounded-lg border p-3"
                       >
                         <div>
                           <div className="font-medium">{template.name}</div>
-                          <div className="text-xs text-muted-foreground">{template.conditions.length}개 조건</div>
+                          <div className="text-muted-foreground text-xs">{template.conditions.length}개 조건</div>
                         </div>
                         <div className="flex gap-2">
                           <Button variant="outline" size="sm" onClick={() => loadTemplate(template)}>
@@ -956,7 +956,7 @@ export const RackStructureComponent: React.FC<RackStructureComponentProps> = ({
                   </ScrollArea>
                 </div>
               ) : (
-                <div className="py-8 text-center text-muted-foreground">저장된 템플릿이 없습니다</div>
+                <div className="text-muted-foreground py-8 text-center">저장된 템플릿이 없습니다</div>
               )}
             </div>
           )}
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
index ee73fa07..357da194 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
@@ -1,16 +1,10 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { RackStructureComponentConfig, FieldMapping, FormatSegment } from "./types";
 import { defaultFormatConfig, SAMPLE_VALUES } from "./config";
 import { FormatSegmentEditor } from "./FormatSegmentEditor";
@@ -36,9 +30,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
   tables = [],
 }) => {
   // 사용 가능한 컬럼 목록 추출
-  const [availableColumns, setAvailableColumns] = useState<
-    Array<{ value: string; label: string }>
-  >([]);
+  const [availableColumns, setAvailableColumns] = useState<Array<{ value: string; label: string }>>([]);
 
   useEffect(() => {
     // 모든 테이블의 컬럼을 플랫하게 추출
@@ -73,10 +65,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
   const formatConfig = config.formatConfig || defaultFormatConfig;
 
-  const handleFormatChange = (
-    key: "codeSegments" | "nameSegments",
-    segments: FormatSegment[],
-  ) => {
+  const handleFormatChange = (key: "codeSegments" | "nameSegments", segments: FormatSegment[]) => {
     onChange({
       ...config,
       formatConfig: {
@@ -90,10 +79,8 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
     <div className="space-y-4">
       {/* 필드 매핑 섹션 */}
       <div className="space-y-3">
-        <div className="text-sm font-medium text-foreground">필드 매핑</div>
-        <p className="text-xs text-muted-foreground">
-          상위 폼에 배치된 필드 중 어떤 필드를 사용할지 선택하세요
-        </p>
+        <div className="text-foreground text-sm font-medium">필드 매핑</div>
+        <p className="text-muted-foreground text-xs">상위 폼에 배치된 필드 중 어떤 필드를 사용할지 선택하세요</p>
 
         {/* 창고 코드 필드 */}
         <div>
@@ -222,64 +209,9 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
         </div>
       </div>
 
-      {/* 위치코드 패턴 설정 */}
-      <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-foreground">위치코드/위치명 패턴</div>
-        <p className="text-xs text-muted-foreground">
-          변수를 조합하여 위치코드와 위치명 생성 규칙을 설정하세요
-        </p>
-
-        {/* 위치코드 패턴 */}
-        <div>
-          <Label className="text-xs">위치코드 패턴</Label>
-          <Input
-            value={config.codePattern || ""}
-            onChange={(e) => handleChange("codePattern", e.target.value || undefined)}
-            placeholder="{warehouse}-{floor}{zone}-{row:02}-{level}"
-            className="h-8 font-mono text-xs"
-          />
-          <p className="mt-1 text-[10px] text-muted-foreground">
-            비워두면 기본값: {"{warehouse}-{floor}{zone}-{row:02}-{level}"}
-          </p>
-        </div>
-
-        {/* 위치명 패턴 */}
-        <div>
-          <Label className="text-xs">위치명 패턴</Label>
-          <Input
-            value={config.namePattern || ""}
-            onChange={(e) => handleChange("namePattern", e.target.value || undefined)}
-            placeholder="{zone}-{row:02}열-{level}단"
-            className="h-8 font-mono text-xs"
-          />
-          <p className="mt-1 text-[10px] text-muted-foreground">
-            비워두면 기본값: {"{zone}-{row:02}열-{level}단"}
-          </p>
-        </div>
-
-        {/* 실시간 미리보기 */}
-        <PatternPreview
-          codePattern={config.codePattern}
-          namePattern={config.namePattern}
-        />
-
-        {/* 사용 가능한 변수 목록 */}
-        <div className="rounded-md border bg-muted/50 p-2">
-          <div className="mb-1 text-[10px] font-medium text-foreground">사용 가능한 변수</div>
-          <div className="grid grid-cols-2 gap-x-3 gap-y-0.5">
-            {PATTERN_VARIABLES.map((v) => (
-              <div key={v.token} className="flex items-center gap-1 text-[10px]">
-                <code className="rounded bg-primary/10 px-1 font-mono text-primary">{v.token}</code>
-                <span className="text-muted-foreground">{v.description}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
       {/* 제한 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-foreground">제한 설정</div>
+        <div className="text-foreground text-sm font-medium">제한 설정</div>
 
         <div>
           <Label className="text-xs">최대 조건 수</Label>
@@ -320,7 +252,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
       {/* UI 설정 */}
       <div className="space-y-3 border-t pt-3">
-        <div className="text-sm font-medium text-foreground">UI 설정</div>
+        <div className="text-foreground text-sm font-medium">UI 설정</div>
 
         <div className="flex items-center justify-between">
           <Label className="text-xs">템플릿 기능</Label>
@@ -348,10 +280,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
 
         <div className="flex items-center justify-between">
           <Label className="text-xs">읽기 전용</Label>
-          <Switch
-            checked={config.readonly ?? false}
-            onCheckedChange={(checked) => handleChange("readonly", checked)}
-          />
+          <Switch checked={config.readonly ?? false} onCheckedChange={(checked) => handleChange("readonly", checked)} />
         </div>
       </div>
 
@@ -359,8 +288,7 @@ export const RackStructureConfigPanel: React.FC<RackStructureConfigPanelProps> =
       <div className="space-y-3 border-t pt-3">
         <div className="text-sm font-medium text-gray-700">포맷 설정</div>
         <p className="text-xs text-gray-500">
-          위치코드와 위치명의 구성 요소를 드래그로 순서 변경하고,
-          구분자/라벨을 편집할 수 있습니다
+          위치코드와 위치명의 구성 요소를 드래그로 순서 변경하고, 구분자/라벨을 편집할 수 있습니다
         </p>
 
         <FormatSegmentEditor
diff --git a/frontend/lib/registry/components/v2-rack-structure/index.ts b/frontend/lib/registry/components/v2-rack-structure/index.ts
index f4ff2b7d..5fbbf54d 100644
--- a/frontend/lib/registry/components/v2-rack-structure/index.ts
+++ b/frontend/lib/registry/components/v2-rack-structure/index.ts
@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { RackStructureWrapper } from "./RackStructureComponent";
-import { RackStructureConfigPanel } from "./RackStructureConfigPanel";
+import { V2RackStructureConfigPanel as RackStructureConfigPanel } from "@/components/v2/config-panels/V2RackStructureConfigPanel";
 import { defaultConfig } from "./config";
 
 /**
diff --git a/frontend/lib/registry/components/v2-rack-structure/patternUtils.ts b/frontend/lib/registry/components/v2-rack-structure/patternUtils.ts
deleted file mode 100644
index d226db82..00000000
--- a/frontend/lib/registry/components/v2-rack-structure/patternUtils.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * 위치코드/위치명 패턴 변환 유틸리티
- *
- * 사용 가능한 변수:
- *   {warehouse}     - 창고 코드 (예: WH002)
- *   {warehouseName} - 창고명 (예: 2창고)
- *   {floor}         - 층 (예: 2층)
- *   {zone}          - 구역 (예: A구역)
- *   {row}           - 열 번호 (예: 1)
- *   {row:02}        - 열 번호 2자리 (예: 01)
- *   {row:03}        - 열 번호 3자리 (예: 001)
- *   {level}         - 단 번호 (예: 1)
- *   {level:02}      - 단 번호 2자리 (예: 01)
- *   {level:03}      - 단 번호 3자리 (예: 001)
- */
-
-interface PatternVariables {
-  warehouse?: string;
-  warehouseName?: string;
-  floor?: string;
-  zone?: string;
-  row: number;
-  level: number;
-}
-
-// 기본 패턴 (하드코딩 대체)
-export const DEFAULT_CODE_PATTERN = "{warehouse}-{floor}{zone}-{row:02}-{level}";
-export const DEFAULT_NAME_PATTERN = "{zone}-{row:02}열-{level}단";
-
-/**
- * 패턴 문자열에서 변수를 치환하여 결과 문자열 반환
- */
-export function applyLocationPattern(pattern: string, vars: PatternVariables): string {
-  let result = pattern;
-
-  // zone에 "구역" 포함 여부에 따른 처리 없이 있는 그대로 치환
-  const simpleVars: Record<string, string | undefined> = {
-    warehouse: vars.warehouse,
-    warehouseName: vars.warehouseName,
-    floor: vars.floor,
-    zone: vars.zone,
-  };
-
-  // 단순 문자열 변수 치환
-  for (const [key, value] of Object.entries(simpleVars)) {
-    result = result.replace(new RegExp(`\\{${key}\\}`, "g"), value || "");
-  }
-
-  // 숫자 변수 (row, level) - zero-pad 지원
-  const numericVars: Record<string, number> = {
-    row: vars.row,
-    level: vars.level,
-  };
-
-  for (const [key, value] of Object.entries(numericVars)) {
-    // {row:02}, {level:03} 같은 zero-pad 패턴
-    const padRegex = new RegExp(`\\{${key}:(\\d+)\\}`, "g");
-    result = result.replace(padRegex, (_, padWidth) => {
-      return value.toString().padStart(parseInt(padWidth), "0");
-    });
-
-    // {row}, {level} 같은 단순 패턴
-    result = result.replace(new RegExp(`\\{${key}\\}`, "g"), value.toString());
-  }
-
-  return result;
-}
-
-// 패턴에서 사용 가능한 변수 목록
-export const PATTERN_VARIABLES = [
-  { token: "{warehouse}", description: "창고 코드", example: "WH002" },
-  { token: "{warehouseName}", description: "창고명", example: "2창고" },
-  { token: "{floor}", description: "층", example: "2층" },
-  { token: "{zone}", description: "구역", example: "A구역" },
-  { token: "{row}", description: "열 번호", example: "1" },
-  { token: "{row:02}", description: "열 번호 (2자리)", example: "01" },
-  { token: "{row:03}", description: "열 번호 (3자리)", example: "001" },
-  { token: "{level}", description: "단 번호", example: "1" },
-  { token: "{level:02}", description: "단 번호 (2자리)", example: "01" },
-  { token: "{level:03}", description: "단 번호 (3자리)", example: "001" },
-];
diff --git a/frontend/lib/registry/components/v2-repeat-container/index.ts b/frontend/lib/registry/components/v2-repeat-container/index.ts
index 890a0bf9..30c869c1 100644
--- a/frontend/lib/registry/components/v2-repeat-container/index.ts
+++ b/frontend/lib/registry/components/v2-repeat-container/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { RepeatContainerWrapper } from "./RepeatContainerComponent";
-import { RepeatContainerConfigPanel } from "./RepeatContainerConfigPanel";
+import { V2RepeatContainerConfigPanel as RepeatContainerConfigPanel } from "@/components/v2/config-panels/V2RepeatContainerConfigPanel";
 import type { RepeatContainerConfig } from "./types";
 
 /**
diff --git a/frontend/lib/registry/components/v2-section-card/index.ts b/frontend/lib/registry/components/v2-section-card/index.ts
index 27e64823..9ece1612 100644
--- a/frontend/lib/registry/components/v2-section-card/index.ts
+++ b/frontend/lib/registry/components/v2-section-card/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { SectionCardComponent } from "./SectionCardComponent";
-import { SectionCardConfigPanel } from "./SectionCardConfigPanel";
+import { V2SectionCardConfigPanel } from "@/components/v2/config-panels/V2SectionCardConfigPanel";
 
 /**
  * Section Card 컴포넌트 정의
@@ -28,7 +28,7 @@ export const V2SectionCardDefinition = createComponentDefinition({
     defaultOpen: true,
   },
   defaultSize: { width: 800, height: 250 },
-  configPanel: SectionCardConfigPanel,
+  configPanel: V2SectionCardConfigPanel,
   icon: "LayoutPanelTop",
   tags: ["섹션", "그룹", "카드", "컨테이너", "제목", "card"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-section-paper/index.ts b/frontend/lib/registry/components/v2-section-paper/index.ts
index 5c45275a..c67f5886 100644
--- a/frontend/lib/registry/components/v2-section-paper/index.ts
+++ b/frontend/lib/registry/components/v2-section-paper/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { SectionPaperComponent } from "./SectionPaperComponent";
-import { SectionPaperConfigPanel } from "./SectionPaperConfigPanel";
+import { V2SectionPaperConfigPanel } from "@/components/v2/config-panels/V2SectionPaperConfigPanel";
 
 /**
  * Section Paper 컴포넌트 정의
@@ -25,7 +25,7 @@ export const V2SectionPaperDefinition = createComponentDefinition({
     showBorder: false,
   },
   defaultSize: { width: 800, height: 200 },
-  configPanel: SectionPaperConfigPanel,
+  configPanel: V2SectionPaperConfigPanel,
   icon: "Square",
   tags: ["섹션", "그룹", "배경", "컨테이너", "색종이", "paper"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-select/index.ts b/frontend/lib/registry/components/v2-select/index.ts
index bf866a15..24ec7686 100644
--- a/frontend/lib/registry/components/v2-select/index.ts
+++ b/frontend/lib/registry/components/v2-select/index.ts
@@ -6,7 +6,7 @@
 
 import { ComponentCategory } from "@/types/component";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
-import { V2SelectConfigPanel } from "@/components/v2/config-panels/V2SelectConfigPanel";
+import { V2FieldConfigPanel } from "@/components/v2/config-panels/V2FieldConfigPanel";
 import { V2Select } from "@/components/v2/V2Select";
 
 export const V2SelectDefinition = createComponentDefinition({
@@ -82,7 +82,7 @@ export const V2SelectDefinition = createComponentDefinition({
   tags: ["select", "dropdown", "combobox", "v2"],
 
   // 설정 패널
-  configPanel: V2SelectConfigPanel,
+  configPanel: V2FieldConfigPanel,
 });
 
 export default V2SelectDefinition;
diff --git a/frontend/lib/registry/components/v2-split-line/index.ts b/frontend/lib/registry/components/v2-split-line/index.ts
index 55a3a0d1..320844b3 100644
--- a/frontend/lib/registry/components/v2-split-line/index.ts
+++ b/frontend/lib/registry/components/v2-split-line/index.ts
@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { SplitLineWrapper } from "./SplitLineComponent";
-import { SplitLineConfigPanel } from "./SplitLineConfigPanel";
+import { V2SplitLineConfigPanel } from "@/components/v2/config-panels/V2SplitLineConfigPanel";
 import { SplitLineConfig } from "./types";
 
 /**
@@ -25,7 +25,7 @@ export const V2SplitLineDefinition = createComponentDefinition({
     lineWidth: 4,
   } as SplitLineConfig,
   defaultSize: { width: 8, height: 600 },
-  configPanel: SplitLineConfigPanel,
+  configPanel: V2SplitLineConfigPanel,
   icon: "SeparatorVertical",
   tags: ["스플릿", "분할", "분할선", "레이아웃"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 0d6c2c3f..9ed4c81f 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -91,6 +91,103 @@ const SplitPanelCellImage: React.FC<{ value: string }> = React.memo(({ value })
 });
 SplitPanelCellImage.displayName = "SplitPanelCellImage";
 
+/**
+ * 커스텀 모드 런타임: 디자이너 좌표를 비례 스케일링하여 렌더링
+ */
+const ScaledCustomPanel: React.FC<{
+  components: PanelInlineComponent[];
+  formData: Record<string, any>;
+  onFormDataChange: (fieldName: string, value: any) => void;
+  tableName?: string;
+  menuObjid?: number;
+  screenId?: number;
+  userId?: string;
+  userName?: string;
+  companyCode?: string;
+  allComponents?: any;
+  selectedRowsData?: any[];
+  onSelectedRowsChange?: any;
+}> = ({ components, formData, onFormDataChange, tableName, ...restProps }) => {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const canvasW = Math.max(
+    ...components.map((c) => (c.position?.x || 0) + (c.size?.width || 200)),
+    400,
+  );
+  const canvasH = Math.max(
+    ...components.map((c) => (c.position?.y || 0) + (c.size?.height || 100)),
+    200,
+  );
+  return (
+    <div ref={containerRef} className="relative w-full" style={{ height: `${canvasH}px` }}>
+      {containerWidth > 0 &&
+        components.map((comp) => {
+          const x = comp.position?.x || 0;
+          const y = comp.position?.y || 0;
+          const w = comp.size?.width || 200;
+          const h = comp.size?.height || 36;
+
+          const componentData = {
+            id: comp.id,
+            type: "component" as const,
+            componentType: comp.componentType,
+            label: comp.label,
+            position: { x, y },
+            size: { width: undefined, height: h },
+            componentConfig: comp.componentConfig || {},
+            style: { ...(comp.style || {}), width: "100%", height: "100%" },
+            tableName: comp.componentConfig?.tableName,
+            columnName: comp.componentConfig?.columnName,
+            webType: comp.componentConfig?.webType,
+            inputType: (comp as any).inputType || comp.componentConfig?.inputType,
+          };
+
+          return (
+            <div
+              key={comp.id}
+              className="absolute"
+              style={{
+                left: `${(x / canvasW) * 100}%`,
+                top: `${y}px`,
+                width: `${(w / canvasW) * 100}%`,
+                minHeight: `${h}px`,
+              }}
+            >
+              <DynamicComponentRenderer
+                component={componentData as any}
+                isDesignMode={false}
+                isInteractive={true}
+                formData={formData}
+                onFormDataChange={onFormDataChange}
+                tableName={tableName}
+                menuObjid={restProps.menuObjid}
+                screenId={restProps.screenId}
+                userId={restProps.userId}
+                userName={restProps.userName}
+                companyCode={restProps.companyCode}
+                allComponents={restProps.allComponents}
+                selectedRowsData={restProps.selectedRowsData}
+                onSelectedRowsChange={restProps.onSelectedRowsChange}
+              />
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
 /**
  * SplitPanelLayout 컴포넌트
  * 마스터-디테일 패턴의 좌우 분할 레이아웃
@@ -271,8 +368,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null);
   const [resizingCompId, setResizingCompId] = useState<string | null>(null);
   const [resizeSize, setResizeSize] = useState<{ width: number; height: number } | null>(null);
-  // 🆕 외부에서 전달받은 선택 상태 사용 (탭 컴포넌트와 동일 구조)
-  const selectedPanelComponentId = externalSelectedPanelComponentId || null;
+  // 내부 선택 상태 (외부 prop 없을 때 fallback)
+  const [internalSelectedCompId, setInternalSelectedCompId] = useState<string | null>(null);
+  const selectedPanelComponentId = externalSelectedPanelComponentId ?? internalSelectedCompId;
   // 🆕 커스텀 모드: 분할패널 내 탭 컴포넌트의 선택 상태 관리
   const [nestedTabSelectedCompId, setNestedTabSelectedCompId] = useState<string | undefined>(undefined);
   const rafRef = useRef<number | null>(null);
@@ -719,22 +817,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   }, [leftData, leftGroupSumConfig]);
 
   // 컴포넌트 스타일
-  // height 처리: 이미 px 단위면 그대로, 숫자면 px 추가
+  // height: component.size?.height 우선, 없으면 component.style?.height, 기본 600px
   const getHeightValue = () => {
+    const sizeH = component.size?.height;
+    if (sizeH && typeof sizeH === "number" && sizeH > 0) return `${sizeH}px`;
     const height = component.style?.height;
     if (!height) return "600px";
-    if (typeof height === "string") return height; // 이미 '540px' 형태
-    return `${height}px`; // 숫자면 px 추가
+    if (typeof height === "string") return height;
+    return `${height}px`;
   };
 
   const componentStyle: React.CSSProperties = isDesignMode
     ? {
-        position: "absolute",
-        left: `${component.style?.positionX || 0}px`,
-        top: `${component.style?.positionY || 0}px`,
         width: "100%",
-        height: getHeightValue(),
-        zIndex: component.style?.positionZ || 1,
+        height: "100%",
+        minHeight: getHeightValue(),
         cursor: "pointer",
         border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
       }
@@ -3144,9 +3241,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               </div>
             </div>
           )}
-          <CardContent className="flex-1 overflow-auto p-4">
+          <CardContent 
+            className="flex-1 overflow-auto p-4"
+            {...(isDesignMode ? {
+              "data-split-panel-container": "true",
+              "data-component-id": component.id,
+              "data-panel-side": "left",
+            } : {})}
+          >
             {/* 좌측 데이터 목록/테이블/커스텀 */}
-            {console.log("🔍 [SplitPanel] 왼쪽 패널 displayMode:", componentConfig.leftPanel?.displayMode, "isDesignMode:", isDesignMode)}
             {componentConfig.leftPanel?.displayMode === "custom" ? (
               // 🆕 커스텀 모드: 패널 안에 자유롭게 컴포넌트 배치
               <div 
@@ -3158,59 +3261,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {/* 커스텀 모드: 디자인/실행 모드 분기 렌더링 */}
                 {componentConfig.leftPanel?.components && componentConfig.leftPanel.components.length > 0 ? (
                   !isDesignMode ? (
-                    // 런타임: ResponsiveGridRenderer로 반응형 렌더링
-                    (() => {
-                      const leftComps = componentConfig.leftPanel!.components;
-                      const canvasW = Math.max(...leftComps.map((c: PanelInlineComponent) => (c.position?.x || 0) + (c.size?.width || 200)), 800);
-                      const canvasH = Math.max(...leftComps.map((c: PanelInlineComponent) => (c.position?.y || 0) + (c.size?.height || 100)), 400);
-                      const compDataList = leftComps.map((c: PanelInlineComponent) => ({
-                        id: c.id,
-                        type: "component" as const,
-                        componentType: c.componentType,
-                        label: c.label,
-                        position: c.position || { x: 0, y: 0 },
-                        size: c.size || { width: 400, height: 300 },
-                        componentConfig: c.componentConfig || {},
-                        style: c.style || {},
-                        tableName: c.componentConfig?.tableName,
-                        columnName: c.componentConfig?.columnName,
-                        webType: c.componentConfig?.webType,
-                        inputType: (c as any).inputType || c.componentConfig?.inputType,
-                      })) as any;
-                      return (
-                        <ResponsiveGridRenderer
-                          components={compDataList}
-                          canvasWidth={canvasW}
-                          canvasHeight={canvasH}
-                          renderComponent={(comp) => (
-                            <DynamicComponentRenderer
-                              component={comp as any}
-                              isDesignMode={false}
-                              isInteractive={true}
-                              formData={{}}
-                              tableName={componentConfig.leftPanel?.tableName}
-                              menuObjid={(props as any).menuObjid}
-                              screenId={(props as any).screenId}
-                              userId={(props as any).userId}
-                              userName={(props as any).userName}
-                              companyCode={companyCode}
-                              allComponents={(props as any).allComponents}
-                              selectedRowsData={localSelectedRowsData}
-                              onSelectedRowsChange={handleLocalSelectedRowsChange}
-                              onFormDataChange={(data: any) => {
-                                if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
-                                  setCustomLeftSelectedData(data.selectedRowsData[0]);
-                                  setSelectedLeftItem(data.selectedRowsData[0]);
-                                } else if (data?.selectedRowsData && data.selectedRowsData.length === 0) {
-                                  setCustomLeftSelectedData({});
-                                  setSelectedLeftItem(null);
-                                }
-                              }}
-                            />
-                          )}
-                        />
-                      );
-                    })()
+                    <ScaledCustomPanel
+                      components={componentConfig.leftPanel!.components}
+                      formData={{}}
+                      onFormDataChange={(data: any) => {
+                        if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
+                          setCustomLeftSelectedData(data.selectedRowsData[0]);
+                          setSelectedLeftItem(data.selectedRowsData[0]);
+                        } else if (data?.selectedRowsData && data.selectedRowsData.length === 0) {
+                          setCustomLeftSelectedData({});
+                          setSelectedLeftItem(null);
+                        }
+                      }}
+                      tableName={componentConfig.leftPanel?.tableName}
+                      menuObjid={(props as any).menuObjid}
+                      screenId={(props as any).screenId}
+                      userId={(props as any).userId}
+                      userName={(props as any).userName}
+                      companyCode={companyCode}
+                      allComponents={(props as any).allComponents}
+                      selectedRowsData={localSelectedRowsData}
+                      onSelectedRowsChange={handleLocalSelectedRowsChange}
+                    />
                   ) : (
                   <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
                     {componentConfig.leftPanel.components.map((comp: PanelInlineComponent) => {
@@ -3250,10 +3322,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                             }}
                             onClick={(e) => {
                               e.stopPropagation();
-                              // 패널 컴포넌트 선택 시 탭 내 선택 해제
                               if (comp.componentType !== "v2-tabs-widget") {
                                 setNestedTabSelectedCompId(undefined);
                               }
+                              setInternalSelectedCompId(comp.id);
                               onSelectPanelComponent?.("left", comp.id, comp);
                             }}
                           >
@@ -3471,6 +3543,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               format: undefined, // 🆕 기본값
                             }));
 
+                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
+                    const leftTotalColWidth = columnsToShow.reduce((sum, col) => {
+                      const w = col.width && col.width <= 100 ? col.width : 0;
+                      return sum + w;
+                    }, 0);
+
                     // 🔧 그룹화된 데이터 렌더링
                     const hasGroupedLeftActions = !isDesignMode && (
                       (componentConfig.leftPanel?.showEdit !== false) ||
@@ -3484,7 +3562,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               <div className="bg-muted px-3 py-2 text-sm font-semibold">
                                 {group.groupKey} ({group.count}개)
                               </div>
-                              <table className="min-w-full divide-y divide-border">
+                              <table className="divide-y divide-border table-fixed" style={{ width: leftTotalColWidth > 100 ? `${leftTotalColWidth}%` : '100%' }}>
                                 <thead className="bg-muted">
                                   <tr>
                                     {columnsToShow.map((col, idx) => (
@@ -3492,8 +3570,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                         key={idx}
                                         className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                         style={{
-                                          width: col.width ? `${col.width}px` : "auto",
-                                          minWidth: "80px",
+                                          width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
                                           textAlign: col.align || "left",
                                         }}
                                       >
@@ -3501,7 +3578,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                       </th>
                                     ))}
                                     {hasGroupedLeftActions && (
-                                      <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
+                                      <th className="bg-muted sticky right-0 z-10 px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
                                       </th>
                                     )}
                                   </tr>
@@ -3537,7 +3614,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                           </td>
                                         ))}
                                         {hasGroupedLeftActions && (
-                                          <td className="px-3 py-2 text-right">
+                                          <td className="bg-card sticky right-0 z-10 px-3 py-2 text-right group-hover:bg-accent">
                                             <div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                                               {(componentConfig.leftPanel?.showEdit !== false) && (
                                                 <button
@@ -3582,7 +3659,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                     );
                     return (
                       <div className="overflow-auto">
-                        <table className="min-w-full divide-y divide-border">
+                        <table className="divide-y divide-border table-fixed" style={{ width: leftTotalColWidth > 100 ? `${leftTotalColWidth}%` : '100%' }}>
                           <thead className="sticky top-0 z-10 bg-muted">
                             <tr>
                               {columnsToShow.map((col, idx) => (
@@ -3590,8 +3667,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                   key={idx}
                                   className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap"
                                   style={{
-                                    width: col.width ? `${col.width}px` : "auto",
-                                    minWidth: "80px",
+                                    width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
                                     textAlign: col.align || "left",
                                   }}
                                 >
@@ -3599,7 +3675,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 </th>
                               ))}
                               {hasLeftTableActions && (
-                                <th className="px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
+                                <th className="bg-muted sticky right-0 z-10 px-3 py-2 text-right text-xs font-medium tracking-wider text-muted-foreground uppercase whitespace-nowrap" style={{ width: "80px" }}>
                                 </th>
                               )}
                             </tr>
@@ -3635,7 +3711,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     </td>
                                   ))}
                                   {hasLeftTableActions && (
-                                    <td className="px-3 py-2 text-right">
+                                    <td className="bg-card sticky right-0 z-10 px-3 py-2 text-right group-hover:bg-accent">
                                       <div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                                         {(componentConfig.leftPanel?.showEdit !== false) && (
                                           <button
@@ -4033,7 +4109,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
               </div>
             </div>
           )}
-          <CardContent className="flex-1 overflow-auto p-4">
+          <CardContent 
+            className="flex-1 overflow-auto p-4"
+            {...(isDesignMode ? {
+              "data-split-panel-container": "true",
+              "data-component-id": component.id,
+              "data-panel-side": "right",
+            } : {})}
+          >
             {/* 추가 탭 컨텐츠 */}
             {activeTabIndex > 0 ? (
               (() => {
@@ -4316,53 +4399,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                 {/* 커스텀 모드: 디자인/실행 모드 분기 렌더링 */}
                 {componentConfig.rightPanel?.components && componentConfig.rightPanel.components.length > 0 ? (
                   !isDesignMode ? (
-                    // 런타임: ResponsiveGridRenderer로 반응형 렌더링
-                    (() => {
-                      const rightComps = componentConfig.rightPanel!.components;
-                      const canvasW = Math.max(...rightComps.map((c: PanelInlineComponent) => (c.position?.x || 0) + (c.size?.width || 200)), 800);
-                      const canvasH = Math.max(...rightComps.map((c: PanelInlineComponent) => (c.position?.y || 0) + (c.size?.height || 100)), 400);
-                      const compDataList = rightComps.map((c: PanelInlineComponent) => ({
-                        id: c.id,
-                        type: "component" as const,
-                        componentType: c.componentType,
-                        label: c.label,
-                        position: c.position || { x: 0, y: 0 },
-                        size: c.size || { width: 400, height: 300 },
-                        componentConfig: c.componentConfig || {},
-                        style: c.style || {},
-                        tableName: c.componentConfig?.tableName,
-                        columnName: c.componentConfig?.columnName,
-                        webType: c.componentConfig?.webType,
-                        inputType: (c as any).inputType || c.componentConfig?.inputType,
-                      })) as any;
-                      return (
-                        <ResponsiveGridRenderer
-                          components={compDataList}
-                          canvasWidth={canvasW}
-                          canvasHeight={canvasH}
-                          renderComponent={(comp) => (
-                            <DynamicComponentRenderer
-                              component={comp as any}
-                              isDesignMode={false}
-                              isInteractive={true}
-                              formData={customLeftSelectedData}
-                              onFormDataChange={(fieldName: string, value: any) => {
-                                setCustomLeftSelectedData((prev: Record<string, any>) => ({ ...prev, [fieldName]: value }));
-                              }}
-                              tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
-                              menuObjid={(props as any).menuObjid}
-                              screenId={(props as any).screenId}
-                              userId={(props as any).userId}
-                              userName={(props as any).userName}
-                              companyCode={companyCode}
-                              allComponents={(props as any).allComponents}
-                              selectedRowsData={localSelectedRowsData}
-                              onSelectedRowsChange={handleLocalSelectedRowsChange}
-                            />
-                          )}
-                        />
-                      );
-                    })()
+                    <ScaledCustomPanel
+                      components={componentConfig.rightPanel!.components}
+                      formData={customLeftSelectedData}
+                      onFormDataChange={(fieldName: string, value: any) => {
+                        setCustomLeftSelectedData((prev: Record<string, any>) => ({ ...prev, [fieldName]: value }));
+                      }}
+                      tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
+                      menuObjid={(props as any).menuObjid}
+                      screenId={(props as any).screenId}
+                      userId={(props as any).userId}
+                      userName={(props as any).userName}
+                      companyCode={companyCode}
+                      allComponents={(props as any).allComponents}
+                      selectedRowsData={localSelectedRowsData}
+                      onSelectedRowsChange={handleLocalSelectedRowsChange}
+                    />
                   ) : (
                   <div className="relative h-full w-full" style={{ minHeight: "100%", minWidth: "100%" }}>
                     {componentConfig.rightPanel.components.map((comp: PanelInlineComponent) => {
@@ -4405,6 +4457,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                               if (comp.componentType !== "v2-tabs-widget") {
                                 setNestedTabSelectedCompId(undefined);
                               }
+                              setInternalSelectedCompId(comp.id);
                               onSelectPanelComponent?.("right", comp.id, comp);
                             }}
                           >
@@ -4610,11 +4663,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         }));
                     }
 
-                    const tableMinWidth = columnsToShow.reduce((sum, col) => sum + (col.width || 100), 0) + 80;
+                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
+                    const rightTotalColWidth = columnsToShow.reduce((sum, col) => {
+                      const w = col.width && col.width <= 100 ? col.width : 0;
+                      return sum + w;
+                    }, 0);
+
                     return (
                       <div className="flex h-full w-full flex-col">
                         <div className="min-h-0 flex-1 overflow-auto">
-                          <table style={{ minWidth: `${tableMinWidth}px` }}>
+                          <table className="table-fixed" style={{ width: rightTotalColWidth > 100 ? `${rightTotalColWidth}%` : '100%' }}>
                             <thead className="sticky top-0 z-10">
                               <tr className="border-b-2 border-border/60">
                                 {columnsToShow.map((col, idx) => (
@@ -4622,8 +4680,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                     key={idx}
                                     className="text-muted-foreground px-3 py-2 text-left text-xs font-semibold whitespace-nowrap"
                                     style={{
-                                      width: col.width ? `${col.width}px` : "auto",
-                                      minWidth: "80px",
+                                      width: col.width && col.width <= 100 ? `${col.width}%` : "auto",
                                       textAlign: col.align || "left",
                                     }}
                                   >
@@ -4634,7 +4691,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                                 {!isDesignMode &&
                                   ((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
                                     (componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
-                                    <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold">
+                                    <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold" style={{ width: '80px' }}>
                                       작업
                                     </th>
                                   )}
@@ -4713,7 +4770,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                   {
                     // 표시 컬럼 결정
                     const rightColumns = componentConfig.rightPanel?.columns;
-                    let columnsToDisplay: { name: string; label: string; format?: string; bold?: boolean }[] = [];
+                    let columnsToDisplay: { name: string; label: string; format?: string; bold?: boolean; width?: number }[] = [];
 
                     if (rightColumns && rightColumns.length > 0) {
                       // showInSummary가 false가 아닌 것만 메인 테이블에 표시
@@ -4724,6 +4781,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                           label: rightColumnLabels[col.name] || col.label || col.name,
                           format: col.format,
                           bold: col.bold,
+                          width: col.width,
                         }));
                     } else if (filteredData.length > 0) {
                       columnsToDisplay = Object.keys(filteredData[0])
@@ -4735,24 +4793,33 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
                         }));
                     }
 
+                    // 컬럼 너비 합계 계산 (작업 컬럼 제외, 100% 초과 시 스크롤)
+                    const displayTotalColWidth = columnsToDisplay.reduce((sum, col) => {
+                      const w = col.width && col.width <= 100 ? col.width : 0;
+                      return sum + w;
+                    }, 0);
+
                     const hasEditButton = !isDesignMode && (componentConfig.rightPanel?.editButton?.enabled ?? true);
                     const hasDeleteButton = !isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true);
                     const hasActions = hasEditButton || hasDeleteButton;
 
-                    const tableMinW2 = columnsToDisplay.reduce((sum, col) => sum + (col.width || 100), 0) + 80;
                     return filteredData.length > 0 ? (
                       <div className="flex h-full w-full flex-col">
                         <div className="min-h-0 flex-1 overflow-auto">
-                          <table className="text-sm" style={{ minWidth: `${tableMinW2}px` }}>
+                          <table className="table-fixed text-sm" style={{ width: displayTotalColWidth > 100 ? `${displayTotalColWidth}%` : '100%' }}>
                             <thead className="sticky top-0 z-10 bg-background">
                               <tr className="border-b-2 border-border/60">
                                 {columnsToDisplay.map((col) => (
-                                  <th key={col.name} className="text-muted-foreground px-3 py-2 text-left text-xs font-semibold">
+                                  <th
+                                    key={col.name}
+                                    className="text-muted-foreground px-3 py-2 text-left text-xs font-semibold whitespace-nowrap"
+                                    style={{ width: col.width && col.width <= 100 ? `${col.width}%` : "auto" }}
+                                  >
                                     {col.label}
                                   </th>
                                 ))}
                                 {hasActions && (
-                                  <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold">작업</th>
+                                  <th className="text-muted-foreground px-3 py-2 text-right text-xs font-semibold" style={{ width: '80px' }}>작업</th>
                                 )}
                               </tr>
                             </thead>
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
index cfdd2572..e2895037 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx
@@ -62,6 +62,7 @@ function SortableColumnRow({
   onLabelChange,
   onWidthChange,
   onFormatChange,
+  onSuffixChange,
   onRemove,
   onShowInSummaryChange,
   onShowInDetailChange,
@@ -87,6 +88,7 @@ function SortableColumnRow({
   onLabelChange: (value: string) => void;
   onWidthChange: (value: number) => void;
   onFormatChange: (checked: boolean) => void;
+  onSuffixChange?: (value: string) => void;
   onRemove: () => void;
   onShowInSummaryChange?: (checked: boolean) => void;
   onShowInDetailChange?: (checked: boolean) => void;
@@ -172,20 +174,32 @@ function SortableColumnRow({
       />
       <Input
         value={col.width || ""}
-        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
-        placeholder="너비"
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || 20)}
+        placeholder="20"
         className="h-6 w-14 shrink-0 text-xs"
+        min={5}
+        max={100}
       />
+      <span className="text-muted-foreground shrink-0 text-[10px]">%</span>
       {isNumeric && (
-        <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
-          <input
-            type="checkbox"
-            checked={col.format?.thousandSeparator ?? false}
-            onChange={(e) => onFormatChange(e.target.checked)}
-            className="h-3 w-3"
+        <>
+          <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
+            <input
+              type="checkbox"
+              checked={col.format?.thousandSeparator ?? false}
+              onChange={(e) => onFormatChange(e.target.checked)}
+              className="h-3 w-3"
+            />
+            ,
+          </label>
+          <Input
+            value={col.format?.suffix || ""}
+            onChange={(e) => onSuffixChange?.(e.target.value)}
+            placeholder="단위"
+            title="값 뒤에 붙는 단위 (예: mm, kg, %)"
+            className="h-6 w-10 shrink-0 text-[10px]"
           />
-          ,
-        </label>
+        </>
       )}
       {/* 헤더/상세 표시 토글 */}
       {onShowInSummaryChange && (
@@ -818,6 +832,18 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                                     };
                                     updateTab({ columns: newColumns });
                                   }}
+                                  onSuffixChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = {
+                                      ...newColumns[index],
+                                      format: {
+                                        ...newColumns[index].format,
+                                        type: "number",
+                                        suffix: value || undefined,
+                                      },
+                                    };
+                                    updateTab({ columns: newColumns });
+                                  }}
                                   onRemove={() => updateTab({ columns: selectedColumns.filter((_, i) => i !== index) })}
                                   onShowInSummaryChange={(checked) => {
                                     const newColumns = [...selectedColumns];
@@ -865,7 +891,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                             updateTab({
                               columns: [
                                 ...selectedColumns,
-                                { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 },
+                                { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 },
                               ],
                             });
                           }}
@@ -1035,7 +1061,7 @@ const AdditionalTabConfigPanel: React.FC<AdditionalTabConfigPanelProps> = ({
                                           {
                                             name: matchingJoinColumn.joinAlias,
                                             label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                            width: 100,
+                                            width: 20,
                                             isEntityJoin: true,
                                             joinInfo: {
                                               sourceTable: tab.tableName!,
@@ -2330,6 +2356,18 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                             };
                                             updateLeftPanel({ columns: newColumns });
                                           }}
+                                          onSuffixChange={(value) => {
+                                            const newColumns = [...selectedColumns];
+                                            newColumns[index] = {
+                                              ...newColumns[index],
+                                              format: {
+                                                ...newColumns[index].format,
+                                                type: "number",
+                                                suffix: value || undefined,
+                                              },
+                                            };
+                                            updateLeftPanel({ columns: newColumns });
+                                          }}
                                           onRemove={() =>
                                             updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })
                                           }
@@ -2361,7 +2399,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                         {
                                           name: column.columnName,
                                           label: column.columnLabel || column.columnName,
-                                          width: 100,
+                                          width: 20,
                                         },
                                       ],
                                     });
@@ -2431,7 +2469,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                                     label:
                                                       matchingJoinColumn.suggestedLabel ||
                                                       matchingJoinColumn.columnLabel,
-                                                    width: 100,
+                                                    width: 20,
                                                     isEntityJoin: true,
                                                     joinInfo: {
                                                       sourceTable: leftTable!,
@@ -2988,6 +3026,18 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                           };
                                           updateRightPanel({ columns: newColumns });
                                         }}
+                                        onSuffixChange={(value) => {
+                                          const newColumns = [...selectedColumns];
+                                          newColumns[index] = {
+                                            ...newColumns[index],
+                                            format: {
+                                              ...newColumns[index].format,
+                                              type: "number",
+                                              suffix: value || undefined,
+                                            },
+                                          };
+                                          updateRightPanel({ columns: newColumns });
+                                        }}
                                         onRemove={() =>
                                           updateRightPanel({ columns: selectedColumns.filter((_, i) => i !== index) })
                                         }
@@ -3027,7 +3077,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                       {
                                         name: column.columnName,
                                         label: column.columnLabel || column.columnName,
-                                        width: 100,
+                                        width: 20,
                                       },
                                     ],
                                   });
@@ -3094,7 +3144,7 @@ export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelPr
                                                   name: matchingJoinColumn.joinAlias,
                                                   label:
                                                     matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                                  width: 100,
+                                                  width: 20,
                                                   isEntityJoin: true,
                                                   joinInfo: {
                                                     sourceTable: rightTable!,
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
index 91309828..289eb9bf 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
@@ -315,9 +315,16 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                     newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
                                     updateLeftPanel({ columns: newColumns });
                                   }}
+                                  onSuffixChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", suffix: value || undefined } };
+                                    updateLeftPanel({ columns: newColumns });
+                                  }}
                                   onRemove={() => updateLeftPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
+                                  widthUnit="%"
                                 />
                               );
+
                             })}
                           </div>
                         </SortableContext>
@@ -336,7 +343,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                           key={column.columnName}
                           className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
                           onClick={() => {
-                            updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                            updateLeftPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
                           }}
                         >
                           <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@@ -389,7 +396,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
                                         columns: [...selectedColumns, {
                                           name: matchingJoinColumn.joinAlias,
                                           label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
+                                          width: 20,
                                           isEntityJoin: true,
                                           joinInfo: {
                                             sourceTable: leftTable!,
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
index d6d6e493..417e1f97 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
@@ -305,6 +305,11 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                     newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } };
                                     updateRightPanel({ columns: newColumns });
                                   }}
+                                  onSuffixChange={(value) => {
+                                    const newColumns = [...selectedColumns];
+                                    newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", suffix: value || undefined } };
+                                    updateRightPanel({ columns: newColumns });
+                                  }}
                                   onRemove={() => updateRightPanel({ columns: selectedColumns.filter((_, i) => i !== index) })}
                                   onShowInSummaryChange={(checked) => {
                                     const newColumns = [...selectedColumns];
@@ -316,6 +321,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                     newColumns[index] = { ...newColumns[index], showInDetail: checked };
                                     updateRightPanel({ columns: newColumns });
                                   }}
+                                  widthUnit="%"
                                 />
                               );
                             })}
@@ -336,7 +342,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                           key={column.columnName}
                           className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1.5"
                           onClick={() => {
-                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 100 }] });
+                            updateRightPanel({ columns: [...selectedColumns, { name: column.columnName, label: column.columnLabel || column.columnName, width: 20 }] });
                           }}
                         >
                           <Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
@@ -389,7 +395,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
                                         columns: [...selectedColumns, {
                                           name: matchingJoinColumn.joinAlias,
                                           label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel,
-                                          width: 100,
+                                          width: 20,
                                           isEntityJoin: true,
                                           joinInfo: {
                                             sourceTable: rightTable!,
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
index a6c4be0d..8d2ace51 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
@@ -13,7 +13,7 @@ import { Check, ChevronsUpDown, GripVertical, Link2, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 export function SortableColumnRow({
-  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onRemove, onShowInSummaryChange, onShowInDetailChange,
+  id, col, index, isNumeric, isEntityJoin, onLabelChange, onWidthChange, onFormatChange, onSuffixChange, onRemove, onShowInSummaryChange, onShowInDetailChange, widthUnit,
 }: {
   id: string;
   col: { name: string; label: string; width?: number; format?: any; showInSummary?: boolean; showInDetail?: boolean };
@@ -23,9 +23,11 @@ export function SortableColumnRow({
   onLabelChange: (value: string) => void;
   onWidthChange: (value: number) => void;
   onFormatChange: (checked: boolean) => void;
+  onSuffixChange?: (value: string) => void;
   onRemove: () => void;
   onShowInSummaryChange?: (checked: boolean) => void;
   onShowInDetailChange?: (checked: boolean) => void;
+  widthUnit?: string;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
   const style = { transform: CSS.Transform.toString(transform), transition };
@@ -56,20 +58,32 @@ export function SortableColumnRow({
       />
       <Input
         value={col.width || ""}
-        onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
-        placeholder="너비"
+        onChange={(e) => onWidthChange(parseInt(e.target.value) || (widthUnit === "%" ? 20 : 100))}
+        placeholder={widthUnit === "%" ? "20" : "너비"}
         className="h-6 w-14 shrink-0 text-xs"
+        min={widthUnit === "%" ? 5 : undefined}
+        max={widthUnit === "%" ? 100 : undefined}
       />
+      <span className="text-muted-foreground shrink-0 text-[10px]">{widthUnit || "px"}</span>
       {isNumeric && (
-        <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
-          <input
-            type="checkbox"
-            checked={col.format?.thousandSeparator ?? false}
-            onChange={(e) => onFormatChange(e.target.checked)}
-            className="h-3 w-3"
+        <>
+          <label className="flex shrink-0 cursor-pointer items-center gap-1 text-[10px]" title="천 단위 구분자 (,)">
+            <input
+              type="checkbox"
+              checked={col.format?.thousandSeparator ?? false}
+              onChange={(e) => onFormatChange(e.target.checked)}
+              className="h-3 w-3"
+            />
+            ,
+          </label>
+          <Input
+            value={col.format?.suffix || ""}
+            onChange={(e) => onSuffixChange?.(e.target.value)}
+            placeholder="단위"
+            title="값 뒤에 붙는 단위 (예: mm, kg, %)"
+            className="h-6 w-10 shrink-0 text-[10px]"
           />
-          ,
-        </label>
+        </>
       )}
       {onShowInSummaryChange && (
         <label className="flex shrink-0 cursor-pointer items-center gap-0.5 text-[10px]" title="테이블 헤더에 표시">
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/index.ts b/frontend/lib/registry/components/v2-split-panel-layout/index.ts
index 5b7fb17d..356bd1b5 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/index.ts
+++ b/frontend/lib/registry/components/v2-split-panel-layout/index.ts
@@ -4,7 +4,7 @@ import React from "react";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { SplitPanelLayoutWrapper } from "./SplitPanelLayoutComponent";
-import { SplitPanelLayoutConfigPanel } from "./SplitPanelLayoutConfigPanel";
+import { V2SplitPanelLayoutConfigPanel } from "@/components/v2/config-panels/V2SplitPanelLayoutConfigPanel";
 import { SplitPanelLayoutConfig } from "./types";
 
 /**
@@ -42,7 +42,7 @@ export const V2SplitPanelLayoutDefinition = createComponentDefinition({
     syncSelection: true,
   } as SplitPanelLayoutConfig,
   defaultSize: { width: 800, height: 600 },
-  configPanel: SplitPanelLayoutConfigPanel,
+  configPanel: V2SplitPanelLayoutConfigPanel,
   icon: "PanelLeftRight",
   tags: ["분할", "마스터", "디테일", "레이아웃"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-status-count/index.ts b/frontend/lib/registry/components/v2-status-count/index.ts
index 27495f0c..e02bebbf 100644
--- a/frontend/lib/registry/components/v2-status-count/index.ts
+++ b/frontend/lib/registry/components/v2-status-count/index.ts
@@ -3,7 +3,7 @@
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { StatusCountWrapper } from "./StatusCountComponent";
-import { StatusCountConfigPanel } from "./StatusCountConfigPanel";
+import { V2StatusCountConfigPanel } from "@/components/v2/config-panels/V2StatusCountConfigPanel";
 
 export const V2StatusCountDefinition = createComponentDefinition({
   id: "v2-status-count",
@@ -13,7 +13,7 @@ export const V2StatusCountDefinition = createComponentDefinition({
   category: ComponentCategory.DISPLAY,
   webType: "text",
   component: StatusCountWrapper,
-  configPanel: StatusCountConfigPanel,
+  configPanel: V2StatusCountConfigPanel,
   defaultConfig: {
     title: "상태 현황",
     tableName: "",
diff --git a/frontend/lib/registry/components/v2-table-grouped/index.ts b/frontend/lib/registry/components/v2-table-grouped/index.ts
index 7e984490..256fdfe9 100644
--- a/frontend/lib/registry/components/v2-table-grouped/index.ts
+++ b/frontend/lib/registry/components/v2-table-grouped/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { TableGroupedComponent } from "./TableGroupedComponent";
-import { TableGroupedConfigPanel } from "./TableGroupedConfigPanel";
+import { V2TableGroupedConfigPanel } from "@/components/v2/config-panels/V2TableGroupedConfigPanel";
 import { TableGroupedConfig } from "./types";
 
 /**
@@ -63,7 +63,7 @@ export const V2TableGroupedDefinition = createComponentDefinition({
     maxHeight: 600,
   },
   defaultSize: { width: 800, height: 500 },
-  configPanel: TableGroupedConfigPanel,
+  configPanel: V2TableGroupedConfigPanel,
   icon: "Layers",
   tags: ["테이블", "그룹화", "접기", "펼치기", "목록"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
index 7843cb4b..6b8c674c 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@@ -2148,6 +2148,19 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       source: component.id || "table-list",
     });
 
+    // dataBinding 연동용 window CustomEvent
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(
+        new CustomEvent("v2-table-selection", {
+          detail: {
+            tableName: tableConfig.selectedTable || "",
+            data: selectedRowsData,
+            source: component.id || "table-list",
+          },
+        })
+      );
+    }
+
     // 🆕 modalDataStore에 선택된 데이터 자동 저장 (테이블명 기반 dataSourceId)
     if (tableConfig.selectedTable && selectedRowsData.length > 0) {
       import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
diff --git a/frontend/lib/registry/components/v2-table-list/index.ts b/frontend/lib/registry/components/v2-table-list/index.ts
index 7f87e5dd..d19953cd 100644
--- a/frontend/lib/registry/components/v2-table-list/index.ts
+++ b/frontend/lib/registry/components/v2-table-list/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { TableListWrapper } from "./TableListComponent";
-import { TableListConfigPanel } from "./TableListConfigPanel";
+import { V2TableListConfigPanel } from "@/components/v2/config-panels/V2TableListConfigPanel";
 import { TableListConfig } from "./types";
 
 /**
@@ -109,7 +109,7 @@ export const V2TableListDefinition = createComponentDefinition({
     autoLoad: true,
   },
   defaultSize: { width: 1000, height: 600 }, // 테이블 리스트 기본 크기 (너비 1000px, 높이 600px)
-  configPanel: TableListConfigPanel,
+  configPanel: V2TableListConfigPanel,
   icon: "Table",
   tags: ["테이블", "데이터", "목록", "그리드"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
index c9d60136..0d917414 100644
--- a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
+++ b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx
@@ -648,12 +648,11 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
   const renderFilterInput = (filter: TableFilter) => {
     const column = currentTable?.columns.find((c) => c.columnName === filter.columnName);
     const value = filterValues[filter.columnName] || "";
-    const width = filter.width || 200; // 기본 너비 200px
 
     switch (filter.filterType) {
       case "date":
         return (
-          <div className="w-full sm:w-auto" style={{ maxWidth: `${width}px` }}>
+          <div className="w-full">
             <ModernDatePicker
               label={column?.columnLabel || filter.columnName}
               value={value ? (typeof value === "string" ? { from: new Date(value), to: new Date(value) } : value) : {}}
@@ -676,8 +675,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
             type="number"
             value={value}
             onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
-            className="h-9 w-full text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:w-auto sm:text-sm"
-            style={{ maxWidth: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
+            className="h-9 w-full text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:text-sm"
+            style={{ height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
             placeholder={column?.columnLabel}
           />
         );
@@ -726,10 +725,10 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
                 variant="outline"
                 role="combobox"
                 className={cn(
-                  "h-9 min-h-9 w-full justify-between text-xs font-normal focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:w-auto sm:text-sm",
+                  "h-9 min-h-9 w-full justify-between text-xs font-normal focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 sm:text-sm",
                   selectedValues.length === 0 && "text-muted-foreground",
                 )}
-                style={{ maxWidth: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
+                style={{ height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
               >
                 <span className="truncate">{getDisplayText()}</span>
                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -781,8 +780,8 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
             type="text"
             value={value}
             onChange={(e) => handleFilterChange(filter.columnName, e.target.value)}
-            className="h-9 w-full text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:w-auto sm:text-sm"
-            style={{ maxWidth: `${width}px`, height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
+            className="h-9 w-full text-xs focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none sm:text-sm"
+            style={{ height: "36px", minHeight: "36px", outline: "none", boxShadow: "none" }}
             placeholder={column?.columnLabel}
           />
         );
@@ -802,9 +801,18 @@ export function TableSearchWidget({ component, screenId, onHeightChange }: Table
       {/* 필터 입력 필드들 */}
       {activeFilters.length > 0 && (
         <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
-          {activeFilters.map((filter) => (
-            <div key={filter.columnName}>{renderFilterInput(filter)}</div>
-          ))}
+          {activeFilters.map((filter) => {
+            const widthPercent = filter.width && filter.width >= 10 && filter.width <= 100 ? filter.width : 25;
+            return (
+              <div
+                key={filter.columnName}
+                className="w-full sm:w-auto"
+                style={{ flex: `0 1 ${widthPercent}%`, minWidth: "120px" }}
+              >
+                {renderFilterInput(filter)}
+              </div>
+            );
+          })}
 
           {/* 초기화 버튼 */}
           <Button variant="outline" size="sm" onClick={handleResetFilters} className="h-9 shrink-0 text-xs sm:text-sm">
diff --git a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidgetConfigPanel.tsx b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidgetConfigPanel.tsx
index 00a9766f..214e418d 100644
--- a/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidgetConfigPanel.tsx
+++ b/frontend/lib/registry/components/v2-table-search-widget/TableSearchWidgetConfigPanel.tsx
@@ -106,7 +106,7 @@ export function TableSearchWidgetConfigPanel({
       columnName: "",
       columnLabel: "",
       filterType: "text",
-      width: 200,
+      width: 25,
     };
     const updatedFilters = [...localPresetFilters, newFilter];
     setLocalPresetFilters(updatedFilters);
@@ -346,15 +346,15 @@ export function TableSearchWidgetConfigPanel({
 
                   {/* 너비 */}
                   <div>
-                    <Label className="text-[10px] sm:text-xs mb-1">너비 (px)</Label>
+                    <Label className="text-[10px] sm:text-xs mb-1">너비 (%)</Label>
                     <Input
                       type="number"
-                      value={filter.width || 200}
-                      onChange={(e) => updateFilter(filter.id, "width", parseInt(e.target.value))}
-                      placeholder="200"
+                      value={filter.width && filter.width >= 10 && filter.width <= 100 ? filter.width : 25}
+                      onChange={(e) => updateFilter(filter.id, "width", Math.min(100, Math.max(10, parseInt(e.target.value) || 25)))}
+                      placeholder="25"
                       className="h-7 text-xs"
-                      min={100}
-                      max={500}
+                      min={10}
+                      max={100}
                     />
                   </div>
                 </div>
diff --git a/frontend/lib/registry/components/v2-table-search-widget/index.tsx b/frontend/lib/registry/components/v2-table-search-widget/index.tsx
index ff7f4f54..1a913f63 100644
--- a/frontend/lib/registry/components/v2-table-search-widget/index.tsx
+++ b/frontend/lib/registry/components/v2-table-search-widget/index.tsx
@@ -3,7 +3,7 @@
 import { ComponentRegistry } from "../../ComponentRegistry";
 import { TableSearchWidget } from "./TableSearchWidget";
 import { TableSearchWidgetRenderer } from "./TableSearchWidgetRenderer";
-import { TableSearchWidgetConfigPanel } from "./TableSearchWidgetConfigPanel";
+import { V2TableSearchWidgetConfigPanel } from "@/components/v2/config-panels/V2TableSearchWidgetConfigPanel";
 
 // 검색 필터 위젯 등록 (v2)
 ComponentRegistry.registerComponent({
@@ -30,7 +30,7 @@ ComponentRegistry.registerComponent({
     },
   },
   renderer: TableSearchWidgetRenderer.render,
-  configPanel: TableSearchWidgetConfigPanel,
+  configPanel: V2TableSearchWidgetConfigPanel,
   version: "1.0.0",
   author: "WACE",
 });
diff --git a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
index 491b45e4..ac6b208e 100644
--- a/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
+++ b/frontend/lib/registry/components/v2-tabs-widget/tabs-component.tsx
@@ -15,7 +15,8 @@ const TabsDesignEditor: React.FC<{
   onUpdateComponent?: (updatedComponent: any) => void;
   onSelectTabComponent?: (tabId: string, compId: string, comp: TabInlineComponent) => void;
   selectedTabComponentId?: string;
-}> = ({ component, tabs, onUpdateComponent, onSelectTabComponent, selectedTabComponentId }) => {
+  onNestedPanelSelect?: (splitPanelId: string, panelSide: "left" | "right", compId: string, comp: any) => void;
+}> = ({ component, tabs, onUpdateComponent, onSelectTabComponent, selectedTabComponentId, onNestedPanelSelect }) => {
   const [activeTabId, setActiveTabId] = useState<string>(tabs[0]?.id || "");
   const [draggingCompId, setDraggingCompId] = useState<string | null>(null);
   const [dragPosition, setDragPosition] = useState<{ x: number; y: number } | null>(null);
@@ -324,15 +325,12 @@ const TabsDesignEditor: React.FC<{
                   const isDragging = draggingCompId === comp.id;
                   const isResizing = resizingCompId === comp.id;
 
-                  // 드래그/리사이즈 중 표시할 크기
-                  // resizeSize가 있고 해당 컴포넌트이면 resizeSize 우선 사용 (레이아웃 업데이트 반영 전까지)
                   const compWidth = comp.size?.width || 200;
                   const compHeight = comp.size?.height || 100;
                   const isResizingThis = (resizingCompId === comp.id || lastResizedCompId === comp.id) && resizeSize;
                   const displayWidth = isResizingThis ? resizeSize!.width : compWidth;
                   const displayHeight = isResizingThis ? resizeSize!.height : compHeight;
 
-                  // 컴포넌트 데이터를 DynamicComponentRenderer 형식으로 변환
                   const componentData = {
                     id: comp.id,
                     type: "component" as const,
@@ -344,7 +342,6 @@ const TabsDesignEditor: React.FC<{
                     style: comp.style || {},
                   };
 
-                  // 드래그 중인 컴포넌트는 dragPosition 사용, 아니면 저장된 position 사용
                   const displayX = isDragging && dragPosition ? dragPosition.x : (comp.position?.x || 0);
                   const displayY = isDragging && dragPosition ? dragPosition.y : (comp.position?.y || 0);
 
@@ -417,12 +414,43 @@ const TabsDesignEditor: React.FC<{
                           width: displayWidth,
                           height: displayHeight,
                         }}
+                        
                       >
-                        <div className="h-full w-full pointer-events-none">
+                        <div className={cn(
+                          "h-full w-full",
+                          comp.componentType !== "v2-split-panel-layout" && comp.componentType !== "split-panel-layout" && "pointer-events-none"
+                        )}>
                           <DynamicComponentRenderer
                             component={componentData as any}
                             isDesignMode={true}
                             formData={{}}
+                            {...(comp.componentType === "v2-split-panel-layout" || comp.componentType === "split-panel-layout" ? {
+                              onUpdateComponent: (updated: any) => {
+                                if (!onUpdateComponent) return;
+                                const updatedTabs = tabs.map((t) => {
+                                  if (t.id !== activeTabId) return t;
+                                  return {
+                                    ...t,
+                                    components: (t.components || []).map((c) =>
+                                      c.id === comp.id ? { ...c, componentConfig: updated.componentConfig || updated.overrides || c.componentConfig } : c
+                                    ),
+                                  };
+                                });
+                                const configKey = component.componentConfig ? "componentConfig" : "overrides";
+                                const existingConfig = component[configKey] || {};
+                                onUpdateComponent({
+                                  ...component,
+                                  [configKey]: { ...existingConfig, tabs: updatedTabs },
+                                });
+                              },
+                              onSelectPanelComponent: (panelSide: string, compId: string, panelComp: any) => {
+                                if (onNestedPanelSelect) {
+                                  onNestedPanelSelect(comp.id, panelSide as "left" | "right", compId, panelComp);
+                                } else {
+                                  onSelectTabComponent?.(activeTabId, comp.id, comp);
+                                }
+                              },
+                            } : {})}
                           />
                         </div>
                         
@@ -483,6 +511,7 @@ const TabsWidgetWrapper: React.FC<any> = (props) => {
     onUpdateComponent,
     onSelectTabComponent,
     selectedTabComponentId,
+    onNestedPanelSelect,
     ...restProps 
   } = props;
 
@@ -499,6 +528,7 @@ const TabsWidgetWrapper: React.FC<any> = (props) => {
         onUpdateComponent={onUpdateComponent}
         onSelectTabComponent={onSelectTabComponent}
         selectedTabComponentId={selectedTabComponentId}
+        onNestedPanelSelect={onNestedPanelSelect}
       />
     );
   }
diff --git a/frontend/lib/registry/components/v2-text-display/index.ts b/frontend/lib/registry/components/v2-text-display/index.ts
index d7f1399d..9f361d51 100644
--- a/frontend/lib/registry/components/v2-text-display/index.ts
+++ b/frontend/lib/registry/components/v2-text-display/index.ts
@@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { TextDisplayWrapper } from "./TextDisplayComponent";
-import { TextDisplayConfigPanel } from "./TextDisplayConfigPanel";
+import { V2TextDisplayConfigPanel } from "@/components/v2/config-panels/V2TextDisplayConfigPanel";
 import { TextDisplayConfig } from "./types";
 
 /**
@@ -28,7 +28,7 @@ export const V2TextDisplayDefinition = createComponentDefinition({
     textAlign: "left",
   },
   defaultSize: { width: 150, height: 24 },
-  configPanel: TextDisplayConfigPanel,
+  configPanel: V2TextDisplayConfigPanel,
   icon: "Type",
   tags: ["텍스트", "표시", "라벨"],
   version: "1.0.0",
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/index.ts b/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
index 33c483a0..4c50b00a 100644
--- a/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
+++ b/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
@@ -3,7 +3,7 @@
 import { ComponentCategory } from "@/types/component";
 import { createComponentDefinition } from "../../utils/createComponentDefinition";
 import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
-import { TimelineSchedulerConfigPanel } from "./TimelineSchedulerConfigPanel";
+import { V2TimelineSchedulerConfigPanel as TimelineSchedulerConfigPanel } from "@/components/v2/config-panels/V2TimelineSchedulerConfigPanel";
 import { defaultTimelineSchedulerConfig } from "./config";
 import { TimelineSchedulerConfig } from "./types";
 
diff --git a/frontend/lib/registry/pop-components/index.ts b/frontend/lib/registry/pop-components/index.ts
index 85d07e83..351d6700 100644
--- a/frontend/lib/registry/pop-components/index.ts
+++ b/frontend/lib/registry/pop-components/index.ts
@@ -16,12 +16,13 @@ import "./pop-text";
 import "./pop-icon";
 import "./pop-dashboard";
 import "./pop-card-list";
+import "./pop-card-list-v2";
 
 import "./pop-button";
 import "./pop-string-list";
 import "./pop-search";
+import "./pop-status-bar";
 
 import "./pop-field";
-
-// 향후 추가될 컴포넌트들:
-// import "./pop-list";
+import "./pop-scanner";
+import "./pop-profile";
diff --git a/frontend/lib/registry/pop-components/pop-button.tsx b/frontend/lib/registry/pop-components/pop-button.tsx
index 616f0a6b..3746272c 100644
--- a/frontend/lib/registry/pop-components/pop-button.tsx
+++ b/frontend/lib/registry/pop-components/pop-button.tsx
@@ -17,6 +17,19 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";
 import { usePopAction } from "@/hooks/pop/usePopAction";
 import { executeTaskList, type CollectedPayload } from "@/hooks/pop/executePopAction";
@@ -45,6 +58,7 @@ import {
   PackageCheck,
   ChevronRight,
   GripVertical,
+  ChevronsUpDown,
   type LucideIcon,
 } from "lucide-react";
 import { toast } from "sonner";
@@ -215,9 +229,11 @@ export interface ButtonTask {
   apiEndpoint?: string;
   apiMethod?: "GET" | "POST" | "PUT" | "DELETE";
 
-  // custom-event
+  // custom-event (제어 실행)
   eventName?: string;
   eventPayload?: Record<string, unknown>;
+  flowId?: number;
+  flowName?: string;
 }
 
 /** 빠른 시작 템플릿 */
@@ -333,7 +349,7 @@ export const TASK_TYPE_LABELS: Record<ButtonTaskType, string> = {
   "close-modal": "모달 닫기",
   refresh: "새로고침",
   "api-call": "API 호출",
-  "custom-event": "커스텀 이벤트",
+  "custom-event": "제어 실행",
 };
 
 /** 빠른 시작 템플릿별 기본 작업 목록 + 외형 */
@@ -1257,8 +1273,97 @@ interface PopButtonConfigPanelProps {
   componentId?: string;
 }
 
-export function PopButtonConfigPanel({ config, onUpdate }: PopButtonConfigPanelProps) {
+/** 연결된 컴포넌트에서 사용 가능한 필드 목록 추출 (연결 기반) */
+function extractConnectedFields(
+  componentId?: string,
+  connections?: PopButtonConfigPanelProps["connections"],
+  allComponents?: PopButtonConfigPanelProps["allComponents"],
+): { value: string; label: string; source: string }[] {
+  if (!componentId || !connections || !allComponents) return [];
+
+  const targetIds = connections
+    .filter((c) => c.sourceComponent === componentId || c.targetComponent === componentId)
+    .map((c) => (c.sourceComponent === componentId ? c.targetComponent : c.sourceComponent));
+  const uniqueIds = [...new Set(targetIds)];
+  if (uniqueIds.length === 0) return [];
+
+  const fields: { value: string; label: string; source: string }[] = [];
+
+  for (const tid of uniqueIds) {
+    const comp = allComponents.find((c) => c.id === tid);
+    if (!comp?.config) continue;
+    const cfg = comp.config as Record<string, unknown>;
+    const compLabel = (comp as Record<string, unknown>).label as string || comp.type || tid;
+
+    if (comp.type === "pop-card-list") {
+      const tpl = cfg.cardTemplate as
+        | { header?: Record<string, unknown>; body?: { fields?: { id?: string; label?: string; valueType?: string; columnName?: string }[] } }
+        | undefined;
+      if (tpl) {
+        if (tpl.header?.codeField) {
+          fields.push({ value: String(tpl.header.codeField), label: String(tpl.header.codeField), source: compLabel });
+        }
+        if (tpl.header?.titleField) {
+          fields.push({ value: String(tpl.header.titleField), label: String(tpl.header.titleField), source: compLabel });
+        }
+        for (const f of tpl.body?.fields ?? []) {
+          if (f.valueType === "column" && f.columnName) {
+            fields.push({ value: f.columnName, label: f.label || f.columnName, source: compLabel });
+          } else if (f.valueType === "formula" && f.label) {
+            fields.push({ value: `__formula_${f.id || f.label}`, label: f.label, source: `${compLabel} (수식)` });
+          }
+        }
+      }
+      fields.push({ value: "__cart_quantity", label: "사용자 입력 수량", source: `${compLabel} (장바구니)` });
+      fields.push({ value: "__cart_row_key", label: "선택한 카드의 원본 키", source: `${compLabel} (장바구니)` });
+      fields.push({ value: "__cart_id", label: "장바구니 항목 ID", source: `${compLabel} (장바구니)` });
+    }
+
+    if (comp.type === "pop-field") {
+      const sections = cfg.sections as Array<{
+        fields?: Array<{ id: string; fieldName?: string; labelText?: string }>;
+      }> | undefined;
+      if (Array.isArray(sections)) {
+        for (const section of sections) {
+          for (const f of section.fields ?? []) {
+            if (f.fieldName) {
+              fields.push({ value: f.fieldName, label: f.labelText || f.fieldName, source: compLabel });
+            }
+          }
+        }
+      }
+    }
+
+    if (comp.type === "pop-search") {
+      const filterCols = cfg.filterColumns as string[] | undefined;
+      const modalCfg = cfg.modalConfig as { valueField?: string } | undefined;
+      if (Array.isArray(filterCols) && filterCols.length > 0) {
+        for (const col of filterCols) {
+          fields.push({ value: col, label: col, source: compLabel });
+        }
+      } else if (modalCfg?.valueField) {
+        fields.push({ value: modalCfg.valueField, label: modalCfg.valueField, source: compLabel });
+      } else if (cfg.fieldName && typeof cfg.fieldName === "string") {
+        fields.push({ value: cfg.fieldName, label: (cfg.placeholder as string) || cfg.fieldName, source: compLabel });
+      }
+    }
+  }
+
+  return fields;
+}
+
+export function PopButtonConfigPanel({
+  config,
+  onUpdate,
+  allComponents,
+  connections,
+  componentId,
+}: PopButtonConfigPanelProps) {
   const v2 = useMemo(() => migrateButtonConfig(config), [config]);
+  const cardFields = useMemo(
+    () => extractConnectedFields(componentId, connections, allComponents),
+    [componentId, connections, allComponents],
+  );
 
   const updateV2 = useCallback(
     (partial: Partial<PopButtonConfigV2>) => {
@@ -1424,9 +1529,9 @@ export function PopButtonConfigPanel({ config, onUpdate }: PopButtonConfigPanelP
 
       {/* 작업 목록 */}
       <SectionDivider label="작업 목록" />
-      <div className="space-y-1.5">
+      <div className="space-y-2.5">
         {v2.tasks.length === 0 && (
-          <p className="text-muted-foreground py-2 text-center text-[10px]">
+          <p className="text-[11px] text-muted-foreground py-2 text-center">
             작업이 없습니다. 빠른 시작 또는 아래 버튼으로 추가하세요.
           </p>
         )}
@@ -1440,6 +1545,7 @@ export function PopButtonConfigPanel({ config, onUpdate }: PopButtonConfigPanelP
             onUpdate={(partial) => updateTask(task.id, partial)}
             onRemove={() => removeTask(task.id)}
             onMove={(dir) => moveTask(task.id, dir)}
+            cardFields={cardFields}
           />
         ))}
 
@@ -1465,6 +1571,41 @@ export function PopButtonConfigPanel({ config, onUpdate }: PopButtonConfigPanelP
 // 작업 항목 에디터 (접힘/펼침)
 // ========================================
 
+/** 작업 항목의 요약 텍스트 생성 */
+function buildTaskSummary(task: ButtonTask): string {
+  switch (task.type) {
+    case "data-update": {
+      if (!task.targetTable) return "";
+      const col = task.targetColumn ? `.${task.targetColumn}` : "";
+      const opLabels: Record<string, string> = {
+        assign: "값 지정",
+        add: "더하기",
+        subtract: "빼기",
+        multiply: "곱하기",
+        divide: "나누기",
+        conditional: "조건 분기",
+        "db-conditional": "조건 비교",
+      };
+      const op = opLabels[task.operationType || "assign"] || "";
+      return `${task.targetTable}${col} ${op}`;
+    }
+    case "data-delete":
+      return task.targetTable || "";
+    case "navigate":
+      return task.targetScreenId ? `화면 ${task.targetScreenId}` : "";
+    case "modal-open":
+      return task.modalTitle || task.modalScreenId || "";
+    case "cart-save":
+      return task.cartScreenId ? `화면 ${task.cartScreenId}` : "";
+    case "api-call":
+      return task.apiEndpoint || "";
+    case "custom-event":
+      return task.flowName || task.eventName || "";
+    default:
+      return "";
+  }
+}
+
 function TaskItemEditor({
   task,
   index,
@@ -1472,6 +1613,7 @@ function TaskItemEditor({
   onUpdate,
   onRemove,
   onMove,
+  cardFields,
 }: {
   task: ButtonTask;
   index: number;
@@ -1479,68 +1621,61 @@ function TaskItemEditor({
   onUpdate: (partial: Partial<ButtonTask>) => void;
   onRemove: () => void;
   onMove: (direction: "up" | "down") => void;
+  cardFields: { value: string; label: string; source: string }[];
 }) {
   const [expanded, setExpanded] = useState(false);
   const designerCtx = usePopDesignerContext();
+  const summary = buildTaskSummary(task);
 
   return (
-    <div className="border-border rounded border">
-      {/* 헤더: 타입 + 순서 + 삭제 */}
+    <div className="rounded-md border border-border">
       <div
-        className="hover:bg-muted/30 flex cursor-pointer items-center gap-1 px-2 py-1.5"
+        className="flex cursor-pointer items-center gap-1.5 px-2.5 py-2 hover:bg-muted/30"
         onClick={() => setExpanded(!expanded)}
       >
-        <ChevronRight className={cn("h-3 w-3 shrink-0 transition-transform", expanded && "rotate-90")} />
-        <GripVertical className="text-muted-foreground h-3 w-3 shrink-0" />
-        <span className="text-[10px] font-medium">
-          {index + 1}. {TASK_TYPE_LABELS[task.type]}
-        </span>
-        {task.label && <span className="text-muted-foreground ml-1 truncate text-[10px]">({task.label})</span>}
-        <div className="ml-auto flex items-center gap-0.5">
+        <ChevronRight
+          className={cn("h-3.5 w-3.5 shrink-0 transition-transform", expanded && "rotate-90")}
+        />
+        <div className="min-w-0 flex-1 overflow-hidden">
+          <div className="flex items-baseline gap-1">
+            <span className="shrink-0 whitespace-nowrap text-xs font-medium">
+              {index + 1}. {TASK_TYPE_LABELS[task.type]}
+            </span>
+            {summary && (
+              <span
+                className="truncate text-[11px] text-muted-foreground"
+                title={summary}
+              >
+                - {summary}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-0.5 shrink-0">
           {index > 0 && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-5 w-5"
-              onClick={(e) => {
-                e.stopPropagation();
-                onMove("up");
-              }}
-            >
-              <span className="text-[10px]">^</span>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); onMove("up"); }}>
+              <ChevronRight className="h-3 w-3 -rotate-90" />
             </Button>
           )}
           {index < totalCount - 1 && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-5 w-5"
-              onClick={(e) => {
-                e.stopPropagation();
-                onMove("down");
-              }}
-            >
-              <span className="text-[10px]">v</span>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); onMove("down"); }}>
+              <ChevronRight className="h-3 w-3 rotate-90" />
             </Button>
           )}
           <Button
             variant="ghost"
             size="icon"
-            className="text-destructive h-5 w-5"
-            onClick={(e) => {
-              e.stopPropagation();
-              onRemove();
-            }}
+            className="h-6 w-6 text-destructive"
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
           >
-            <Trash2 className="h-3 w-3" />
+            <Trash2 className="h-3.5 w-3.5" />
           </Button>
         </div>
       </div>
 
-      {/* 펼침: 타입별 설정 폼 */}
       {expanded && (
-        <div className="space-y-2 border-t px-2 py-2">
-          <TaskDetailForm task={task} onUpdate={onUpdate} designerCtx={designerCtx} />
+        <div className="space-y-3 border-t px-2.5 py-3">
+          <TaskDetailForm task={task} onUpdate={onUpdate} designerCtx={designerCtx} cardFields={cardFields} />
         </div>
       )}
     </div>
@@ -1555,10 +1690,12 @@ function TaskDetailForm({
   task,
   onUpdate,
   designerCtx,
+  cardFields,
 }: {
   task: ButtonTask;
   onUpdate: (partial: Partial<ButtonTask>) => void;
   designerCtx: ReturnType<typeof usePopDesignerContext>;
+  cardFields: { value: string; label: string; source: string }[];
 }) {
   // 테이블/컬럼 조회 (data-update, data-delete용)
   const [tables, setTables] = useState<TableInfo[]>([]);
@@ -1580,18 +1717,26 @@ function TaskDetailForm({
   switch (task.type) {
     case "data-save":
       return (
-        <p className="text-muted-foreground text-[10px]">
+        <p className="text-[11px] text-muted-foreground">
           연결된 입력 컴포넌트의 저장 매핑을 사용합니다. 별도 설정 불필요.
         </p>
       );
 
     case "data-update":
-      return <DataUpdateTaskForm task={task} onUpdate={onUpdate} tables={tables} columns={columns} />;
+      return (
+        <DataUpdateTaskForm
+          task={task}
+          onUpdate={onUpdate}
+          tables={tables}
+          columns={columns}
+          cardFields={cardFields}
+        />
+      );
 
     case "data-delete":
       return (
-        <div className="space-y-1">
-          <Label className="text-[10px]">대상 테이블</Label>
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">어떤 테이블에서 삭제할까요?</Label>
           <TableCombobox
             tables={tables}
             value={task.targetTable || ""}
@@ -1602,27 +1747,27 @@ function TaskDetailForm({
 
     case "cart-save":
       return (
-        <div className="space-y-1">
-          <Label className="text-[10px]">장바구니 화면 ID (저장 후 이동)</Label>
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">저장 후 이동할 화면 ID</Label>
           <Input
             value={task.cartScreenId || ""}
             onChange={(e) => onUpdate({ cartScreenId: e.target.value })}
             placeholder="비워두면 이동 없이 저장만"
-            className="h-7 text-xs"
+            className="h-8 text-xs"
           />
         </div>
       );
 
     case "modal-open":
       return (
-        <div className="space-y-2">
-          <div>
-            <Label className="text-[10px]">모달 방식</Label>
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium">모달 방식</Label>
             <Select
               value={task.modalMode || "fullscreen"}
               onValueChange={(v) => onUpdate({ modalMode: v as ModalMode })}
             >
-              <SelectTrigger className="h-7 text-xs">
+              <SelectTrigger className="h-8 text-xs">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -1635,41 +1780,36 @@ function TaskDetailForm({
             </Select>
           </div>
           {task.modalMode === "screen-ref" && (
-            <div>
-              <Label className="text-[10px]">화면 ID</Label>
+            <div className="space-y-1.5">
+              <Label className="text-xs font-medium">화면 ID</Label>
               <Input
                 value={task.modalScreenId || ""}
                 onChange={(e) => onUpdate({ modalScreenId: e.target.value })}
                 placeholder="화면 ID"
-                className="h-7 text-xs"
+                className="h-8 text-xs"
               />
             </div>
           )}
-          <div>
-            <Label className="text-[10px]">모달 제목</Label>
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium">모달 제목</Label>
             <Input
               value={task.modalTitle || ""}
               onChange={(e) => onUpdate({ modalTitle: e.target.value })}
               placeholder="모달 제목 (선택)"
-              className="h-7 text-xs"
+              className="h-8 text-xs"
             />
           </div>
           {task.modalMode === "fullscreen" && designerCtx && (
             <div>
               {task.modalScreenId ? (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-7 w-full text-xs"
-                  onClick={() => designerCtx.navigateToCanvas(task.modalScreenId!)}
-                >
+                <Button variant="outline" size="sm" className="h-8 w-full text-xs" onClick={() => designerCtx.navigateToCanvas(task.modalScreenId!)}>
                   모달 캔버스 열기
                 </Button>
               ) : (
                 <Button
                   variant="outline"
                   size="sm"
-                  className="h-7 w-full text-xs"
+                  className="h-8 w-full text-xs"
                   onClick={() => {
                     const selectedId = designerCtx.selectedComponentId;
                     if (!selectedId) return;
@@ -1687,36 +1827,36 @@ function TaskDetailForm({
 
     case "navigate":
       return (
-        <div className="space-y-1">
-          <Label className="text-[10px]">대상 화면 ID</Label>
+        <div className="space-y-2">
+          <Label className="text-xs font-medium">이동할 화면 ID</Label>
           <Input
             value={task.targetScreenId || ""}
             onChange={(e) => onUpdate({ targetScreenId: e.target.value })}
-            placeholder="이동할 화면 ID"
-            className="h-7 text-xs"
+            placeholder="화면 ID 입력"
+            className="h-8 text-xs"
           />
         </div>
       );
 
     case "api-call":
       return (
-        <div className="space-y-2">
-          <div>
-            <Label className="text-[10px]">엔드포인트</Label>
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium">엔드포인트</Label>
             <Input
               value={task.apiEndpoint || ""}
               onChange={(e) => onUpdate({ apiEndpoint: e.target.value })}
               placeholder="/api/..."
-              className="h-7 text-xs"
+              className="h-8 text-xs"
             />
           </div>
-          <div>
-            <Label className="text-[10px]">HTTP 메서드</Label>
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium">HTTP 메서드</Label>
             <Select
               value={task.apiMethod || "POST"}
               onValueChange={(v) => onUpdate({ apiMethod: v as "GET" | "POST" | "PUT" | "DELETE" })}
             >
-              <SelectTrigger className="h-7 text-xs">
+              <SelectTrigger className="h-8 text-xs">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -1733,20 +1873,17 @@ function TaskDetailForm({
 
     case "custom-event":
       return (
-        <div className="space-y-1">
-          <Label className="text-[10px]">이벤트명</Label>
-          <Input
-            value={task.eventName || ""}
-            onChange={(e) => onUpdate({ eventName: e.target.value })}
-            placeholder="예: data-saved, item-selected"
-            className="h-7 text-xs"
-          />
-        </div>
+        <ControlFlowTaskForm
+          task={task}
+          onUpdate={onUpdate}
+        />
       );
 
     case "refresh":
     case "close-modal":
-      return <p className="text-muted-foreground text-[10px]">설정 불필요</p>;
+      return (
+        <p className="text-[11px] text-muted-foreground">설정 불필요</p>
+      );
 
     default:
       return null;
@@ -1757,19 +1894,71 @@ function TaskDetailForm({
 // 데이터 수정 작업 폼 (data-update 전용)
 // ========================================
 
+/** 연산 타입 한글 라벨 */
+const OPERATION_LABELS: Record<string, { label: string; desc: string }> = {
+  assign: { label: "값 지정", desc: "선택한 값으로 덮어씁니다" },
+  add: { label: "더하기", desc: "기존 값에 더합니다" },
+  subtract: { label: "빼기", desc: "기존 값에서 뺍니다" },
+  multiply: { label: "곱하기", desc: "기존 값에 곱합니다" },
+  divide: { label: "나누기", desc: "기존 값을 나눕니다" },
+  conditional: { label: "조건 분기", desc: "입력된 값에 따라 다른 결과를 지정합니다" },
+  "db-conditional": { label: "조건 비교", desc: "DB 컬럼 값을 비교해서 결과를 정합니다" },
+};
+
+/** 비교 연산자 한글 라벨 */
+const COMPARE_OP_LABELS: Record<string, string> = {
+  "=": "= (같으면)",
+  "!=": "!= (다르면)",
+  ">": "> (크면)",
+  "<": "< (작으면)",
+  ">=": ">= (이상이면)",
+  "<=": "<= (이하이면)",
+};
+
+/** data-update 설정 요약 생성 */
+function buildUpdateSummaryText(task: ButtonTask): string | null {
+  if (!task.targetTable || !task.targetColumn) return null;
+  const op = task.operationType || "assign";
+  const opLabel = OPERATION_LABELS[op]?.label || op;
+
+  if (op === "db-conditional") {
+    const a = task.compareColumn || "?";
+    const b = task.compareWith || "?";
+    const opStr = task.compareOperator || ">=";
+    return `[${task.targetTable}].${task.targetColumn}을 ${opLabel}로 변경\n${a} ${opStr} ${b} → "${task.dbThenValue || "?"}", 그 외 → "${task.dbElseValue || "?"}"`;
+  }
+  if (op === "conditional") {
+    const conds = task.conditionalValue?.conditions ?? [];
+    const lines = conds.map((c) => `${c.whenColumn} ${c.operator} ${c.whenValue} → "${c.thenValue}"`);
+    const def = task.conditionalValue?.defaultValue;
+    if (def) lines.push(`그 외 → "${def}"`);
+    return `[${task.targetTable}].${task.targetColumn}을 ${opLabel}로 변경\n${lines.join("\n")}`;
+  }
+
+  const val = task.valueSource === "linked"
+    ? `연결 데이터(${task.sourceField || "?"})`
+    : `"${task.fixedValue || "?"}"`;
+  return `[${task.targetTable}].${task.targetColumn} ${opLabel} ${val}`;
+}
+
 function DataUpdateTaskForm({
   task,
   onUpdate,
   tables,
   columns,
+  cardFields,
 }: {
   task: ButtonTask;
   onUpdate: (partial: Partial<ButtonTask>) => void;
   tables: TableInfo[];
   columns: ColumnInfo[];
+  cardFields: { value: string; label: string; source: string }[];
 }) {
+  const [showAdvanced, setShowAdvanced] = useState(task.lookupMode === "manual");
   const conditions = task.conditionalValue?.conditions ?? [];
   const defaultValue = task.conditionalValue?.defaultValue ?? "";
+  const isConditional = task.operationType === "conditional" || task.operationType === "db-conditional";
+  const summaryText = buildUpdateSummaryText(task);
 
   const updateCondition = (cIdx: number, partial: Partial<(typeof conditions)[0]>) => {
     const next = [...conditions];
@@ -1793,10 +1982,10 @@ function DataUpdateTaskForm({
   };
 
   return (
-    <div className="space-y-2">
-      {/* 대상 테이블 */}
-      <div className="space-y-1">
-        <Label className="text-[10px]">대상 테이블</Label>
+    <div className="space-y-3">
+      {/* 1. 대상 테이블 */}
+      <div className="space-y-1.5">
+        <Label className="text-xs font-medium">어떤 테이블을 수정할까요?</Label>
         <TableCombobox
           tables={tables}
           value={task.targetTable || ""}
@@ -1804,10 +1993,10 @@ function DataUpdateTaskForm({
         />
       </div>
 
-      {/* 변경 컬럼 */}
+      {/* 2. 변경 컬럼 */}
       {task.targetTable && (
-        <div className="space-y-1">
-          <Label className="text-[10px]">변경 컬럼</Label>
+        <div className="space-y-1.5">
+          <Label className="text-xs font-medium">어떤 항목(컬럼)을 바꿀까요?</Label>
           <ColumnCombobox
             columns={columns}
             value={task.targetColumn || ""}
@@ -1816,261 +2005,308 @@ function DataUpdateTaskForm({
         </div>
       )}
 
-      {/* 연산 타입 */}
+      {/* 3. 연산 방식 */}
       {task.targetColumn && (
         <>
-          <div className="space-y-1">
-            <Label className="text-[10px]">연산</Label>
+          <div className="space-y-1.5">
+            <Label className="text-xs font-medium">어떻게 바꿀까요?</Label>
             <Select
               value={task.operationType || "assign"}
               onValueChange={(v) => onUpdate({ operationType: v as UpdateOperationType })}
             >
-              <SelectTrigger className="h-7 text-xs">
+              <SelectTrigger className="h-8 text-xs">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="assign" className="text-xs">
-                  대입 (=)
-                </SelectItem>
-                <SelectItem value="add" className="text-xs">
-                  더하기 (+=)
-                </SelectItem>
-                <SelectItem value="subtract" className="text-xs">
-                  빼기 (-=)
-                </SelectItem>
-                <SelectItem value="multiply" className="text-xs">
-                  곱하기 (*=)
-                </SelectItem>
-                <SelectItem value="divide" className="text-xs">
-                  나누기 (/=)
-                </SelectItem>
-                <SelectItem value="conditional" className="text-xs">
-                  조건부 (클라이언트)
-                </SelectItem>
-                <SelectItem value="db-conditional" className="text-xs">
-                  조건부 (DB 컬럼 비교)
-                </SelectItem>
+                {Object.entries(OPERATION_LABELS).map(([key, { label }]) => (
+                  <SelectItem key={key} value={key} className="text-xs">{label}</SelectItem>
+                ))}
               </SelectContent>
             </Select>
+            <p className="text-[11px] text-muted-foreground">
+              {OPERATION_LABELS[task.operationType || "assign"]?.desc}
+            </p>
           </div>
 
-          {/* 값 출처 (conditional/db-conditional이 아닐 때) */}
-          {task.operationType !== "conditional" && task.operationType !== "db-conditional" && (
-            <div className="space-y-1">
-              <Label className="text-[10px]">값 출처</Label>
-              <Select
-                value={task.valueSource || "fixed"}
-                onValueChange={(v) => onUpdate({ valueSource: v as UpdateValueSource })}
-              >
-                <SelectTrigger className="h-7 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="fixed" className="text-xs">
-                    고정값
-                  </SelectItem>
-                  <SelectItem value="linked" className="text-xs">
-                    연결 데이터
-                  </SelectItem>
-                </SelectContent>
-              </Select>
+          {/* 4. 단순 연산: 값 출처 + 값 입력 */}
+          {!isConditional && (
+            <div className="space-y-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">바꿀 값을 어디서 가져올까요?</Label>
+                <Select
+                  value={task.valueSource || "fixed"}
+                  onValueChange={(v) => onUpdate({ valueSource: v as UpdateValueSource })}
+                >
+                  <SelectTrigger className="h-8 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fixed" className="text-xs">직접 입력</SelectItem>
+                    <SelectItem value="linked" className="text-xs">연결된 데이터 가져오기</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              {task.valueSource === "fixed" && (
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium">변경할 값</Label>
+                  <Input
+                    value={task.fixedValue || ""}
+                    onChange={(e) => onUpdate({ fixedValue: e.target.value })}
+                    className="h-8 text-xs"
+                    placeholder="변경할 값 입력"
+                  />
+                </div>
+              )}
+
+              {task.valueSource === "linked" && (
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium">어떤 데이터를 사용할까요?</Label>
+                  {cardFields.length > 0 ? (
+                    <Select
+                      value={task.sourceField || ""}
+                      onValueChange={(v) => onUpdate({ sourceField: v })}
+                    >
+                      <SelectTrigger className="h-8 text-xs">
+                        <SelectValue placeholder="데이터 선택" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {cardFields.map((f) => (
+                          <SelectItem key={f.value} value={f.value} className="text-xs">
+                            <div className="flex flex-col">
+                              <span>{f.label}</span>
+                              <span className="text-[10px] text-muted-foreground">{f.source}</span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
+                    <Input
+                      value={task.sourceField || ""}
+                      onChange={(e) => onUpdate({ sourceField: e.target.value })}
+                      className="h-8 text-xs"
+                      placeholder="필드명 직접 입력 (예: qty)"
+                    />
+                  )}
+                  <p className="text-[11px] text-muted-foreground">
+                    {cardFields.length > 0
+                      ? "연결된 컴포넌트의 데이터 중 하나를 선택합니다"
+                      : "연결된 컴포넌트가 없습니다. 연결 탭에서 먼저 연결해주세요"}
+                  </p>
+                </div>
+              )}
             </div>
           )}
 
-          {/* 고정값 입력 */}
-          {task.valueSource === "fixed" &&
-            task.operationType !== "conditional" &&
-            task.operationType !== "db-conditional" && (
-              <Input
-                value={task.fixedValue || ""}
-                onChange={(e) => onUpdate({ fixedValue: e.target.value })}
-                className="h-7 text-xs"
-                placeholder="변경할 값"
-              />
-            )}
-
-          {/* 연결 데이터 필드명 */}
-          {task.valueSource === "linked" &&
-            task.operationType !== "conditional" &&
-            task.operationType !== "db-conditional" && (
-              <Input
-                value={task.sourceField || ""}
-                onChange={(e) => onUpdate({ sourceField: e.target.value })}
-                className="h-7 text-xs"
-                placeholder="연결 필드명 (예: qty)"
-              />
-            )}
-
-          {/* DB 컬럼 비교 조건부 설정 */}
+          {/* 5. 조건 비교 (db-conditional) - 세로 스택 */}
           {task.operationType === "db-conditional" && (
-            <div className="border-muted-foreground/30 space-y-2 rounded border border-dashed p-2">
-              <p className="text-muted-foreground text-[10px]">DB에서 컬럼 A와 컬럼 B를 비교하여 값을 판정합니다</p>
-              <div className="flex items-center gap-1">
+            <div className="space-y-3 rounded-md border border-dashed border-muted-foreground/30 p-3">
+              <p className="text-[11px] text-muted-foreground">
+                DB 컬럼 값을 비교해서 결과를 정합니다
+              </p>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">비교 컬럼</Label>
                 <ColumnCombobox
                   columns={columns}
                   value={task.compareColumn ?? ""}
                   onSelect={(v) => onUpdate({ compareColumn: v })}
-                  placeholder="비교 컬럼 A"
+                  placeholder="비교할 컬럼 선택"
                 />
+              </div>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">비교 방법</Label>
                 <Select
                   value={task.compareOperator ?? ">="}
                   onValueChange={(v) => onUpdate({ compareOperator: v as ButtonTask["compareOperator"] })}
                 >
-                  <SelectTrigger className="h-7 w-14 text-[10px]">
+                  <SelectTrigger className="h-8 text-xs">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>
-                    {["=", "!=", ">", "<", ">=", "<="].map((op) => (
-                      <SelectItem key={op} value={op} className="text-xs">
-                        {op}
-                      </SelectItem>
+                    {Object.entries(COMPARE_OP_LABELS).map(([op, label]) => (
+                      <SelectItem key={op} value={op} className="text-xs">{label}</SelectItem>
                     ))}
                   </SelectContent>
                 </Select>
+              </div>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">비교 대상</Label>
                 <ColumnCombobox
                   columns={columns}
                   value={task.compareWith ?? ""}
                   onSelect={(v) => onUpdate({ compareWith: v })}
-                  placeholder="비교 컬럼 B"
+                  placeholder="비교 대상 컬럼 선택"
                 />
               </div>
-              <div className="flex items-center gap-1">
-                <span className="text-muted-foreground shrink-0 text-[10px]">참 -&gt;</span>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">조건이 맞으면</Label>
                 <Input
                   value={task.dbThenValue ?? ""}
                   onChange={(e) => onUpdate({ dbThenValue: e.target.value })}
-                  className="h-7 flex-1 text-[10px]"
+                  className="h-8 text-xs"
                   placeholder="예: 입고완료"
                 />
               </div>
-              <div className="flex items-center gap-1">
-                <span className="text-muted-foreground shrink-0 text-[10px]">거짓 -&gt;</span>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">조건이 틀리면</Label>
                 <Input
                   value={task.dbElseValue ?? ""}
                   onChange={(e) => onUpdate({ dbElseValue: e.target.value })}
-                  className="h-7 flex-1 text-[10px]"
+                  className="h-8 text-xs"
                   placeholder="예: 부분입고"
                 />
               </div>
             </div>
           )}
 
-          {/* 조건부 값 설정 */}
+          {/* 6. 조건 분기 (conditional) */}
           {task.operationType === "conditional" && (
-            <div className="border-muted-foreground/30 space-y-2 rounded border border-dashed p-2">
+            <div className="space-y-3 rounded-md border border-dashed border-muted-foreground/30 p-3">
+              <p className="text-[11px] text-muted-foreground">
+                입력된 값에 따라 다른 결과를 지정합니다
+              </p>
+
               {conditions.map((cond, cIdx) => (
-                <div key={cIdx} className="space-y-1">
-                  <div className="flex items-center gap-1">
-                    <span className="text-muted-foreground shrink-0 text-[10px]">만약</span>
+                <div key={cIdx} className="space-y-2 rounded border border-border bg-muted/20 p-2.5">
+                  <div className="flex items-center justify-between">
+                    <span className="text-xs font-medium">조건 {cIdx + 1}</span>
+                    <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => removeCondition(cIdx)}>
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">만약 이 컬럼이</Label>
                     <ColumnCombobox
                       columns={columns}
                       value={cond.whenColumn}
                       onSelect={(v) => updateCondition(cIdx, { whenColumn: v })}
-                      placeholder="컬럼"
+                      placeholder="컬럼 선택"
                     />
-                    <Select
-                      value={cond.operator}
-                      onValueChange={(v) =>
-                        updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })
-                      }
-                    >
-                      <SelectTrigger className="h-7 w-14 text-[10px]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {["=", "!=", ">", "<", ">=", "<="].map((op) => (
-                          <SelectItem key={op} value={op} className="text-xs">
-                            {op}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <Input
-                      value={cond.whenValue}
-                      onChange={(e) => updateCondition(cIdx, { whenValue: e.target.value })}
-                      className="h-7 w-16 text-[10px]"
-                      placeholder="값"
-                    />
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-5 w-5 shrink-0"
-                      onClick={() => removeCondition(cIdx)}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
                   </div>
-                  <div className="flex items-center gap-1 pl-4">
-                    <span className="text-muted-foreground shrink-0 text-[10px]">이면 -&gt;</span>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">이 값과</Label>
+                    <div className="flex gap-2">
+                      <Select value={cond.operator} onValueChange={(v) => updateCondition(cIdx, { operator: v as "=" | "!=" | ">" | "<" | ">=" | "<=" })}>
+                        <SelectTrigger className="h-8 w-24 shrink-0 text-xs"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {Object.entries(COMPARE_OP_LABELS).map(([op, label]) => (
+                            <SelectItem key={op} value={op} className="text-xs">{label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <Input
+                        value={cond.whenValue}
+                        onChange={(e) => updateCondition(cIdx, { whenValue: e.target.value })}
+                        className="h-8 flex-1 text-xs"
+                        placeholder="비교할 값"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="text-xs">이면 이 값으로 변경</Label>
                     <Input
                       value={cond.thenValue}
                       onChange={(e) => updateCondition(cIdx, { thenValue: e.target.value })}
-                      className="h-7 text-[10px]"
+                      className="h-8 text-xs"
                       placeholder="변경할 값"
                     />
                   </div>
                 </div>
               ))}
-              <Button variant="ghost" size="sm" className="w-full text-[10px]" onClick={addCondition}>
-                <Plus className="mr-1 h-3 w-3" /> 조건 추가
+
+              <Button variant="outline" size="sm" className="h-8 w-full text-xs" onClick={addCondition}>
+                <Plus className="mr-1.5 h-3.5 w-3.5" /> 조건 추가
               </Button>
-              <div className="flex items-center gap-1">
-                <span className="text-muted-foreground shrink-0 text-[10px]">그 외 -&gt;</span>
+
+              <div className="space-y-1.5">
+                <Label className="text-xs font-medium">위 조건에 해당하지 않으면</Label>
                 <Input
                   value={defaultValue}
                   onChange={(e) => onUpdate({ conditionalValue: { conditions, defaultValue: e.target.value } })}
-                  className="h-7 text-[10px]"
-                  placeholder="기본값"
+                  className="h-8 text-xs"
+                  placeholder="기본값 입력"
                 />
               </div>
             </div>
           )}
 
-          {/* 조회 키 */}
-          <div className="space-y-1">
-            <div className="flex items-center gap-2">
-              <Label className="text-[10px]">조회 키</Label>
-              <Select
-                value={task.lookupMode ?? "auto"}
-                onValueChange={(v) => onUpdate({ lookupMode: v as "auto" | "manual" })}
-              >
-                <SelectTrigger className="h-6 w-16 text-[10px]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="auto" className="text-[10px]">
-                    자동
-                  </SelectItem>
-                  <SelectItem value="manual" className="text-[10px]">
-                    수동
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            {task.lookupMode === "manual" && (
-              <div className="flex items-center gap-1">
-                <Select value={task.manualItemField ?? ""} onValueChange={(v) => onUpdate({ manualItemField: v })}>
-                  <SelectTrigger className="h-7 flex-1 text-[10px]">
-                    <SelectValue placeholder="카드 항목 필드" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {KNOWN_ITEM_FIELDS.map((f) => (
-                      <SelectItem key={f.value} value={f.value} className="text-[10px]">
-                        {f.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-                <span className="text-muted-foreground shrink-0 text-[10px]">-&gt;</span>
-                <ColumnCombobox
-                  columns={columns}
-                  value={task.manualPkColumn ?? ""}
-                  onSelect={(v) => onUpdate({ manualPkColumn: v })}
-                  placeholder="대상 PK 컬럼"
-                />
+          {/* 7. 고급 설정 (조회 키) */}
+          <div className="pt-1">
+            <button
+              type="button"
+              className="flex w-full items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+            >
+              <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", showAdvanced && "rotate-90")} />
+              <span>고급 설정 (대상 행 직접 지정)</span>
+            </button>
+            {showAdvanced && (
+              <div className="mt-2 space-y-2 rounded-md border border-border bg-muted/10 p-3">
+                <div className="space-y-1.5">
+                  <Label className="text-xs font-medium">대상 행 찾기</Label>
+                  <Select
+                    value={task.lookupMode ?? "auto"}
+                    onValueChange={(v) => onUpdate({ lookupMode: v as "auto" | "manual" })}
+                  >
+                    <SelectTrigger className="h-8 text-xs">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="auto" className="text-xs">자동 매칭 (권장)</SelectItem>
+                      <SelectItem value="manual" className="text-xs">수동 지정</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <p className="text-[11px] text-muted-foreground">
+                    {task.lookupMode === "manual"
+                      ? "카드 항목의 필드를 직접 지정하여 대상 행을 찾습니다"
+                      : "카드 항목과 테이블 PK를 자동으로 매칭합니다"}
+                  </p>
+                </div>
+                {task.lookupMode === "manual" && (
+                  <div className="space-y-2">
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">카드 항목 필드</Label>
+                      <Select value={task.manualItemField ?? ""} onValueChange={(v) => onUpdate({ manualItemField: v })}>
+                        <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="필드 선택" /></SelectTrigger>
+                        <SelectContent>
+                          {KNOWN_ITEM_FIELDS.map((f) => (
+                            <SelectItem key={f.value} value={f.value} className="text-xs">
+                              <div className="flex flex-col">
+                                <span>{f.label}</span>
+                                <span className="text-[10px] text-muted-foreground">{f.desc}</span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label className="text-xs">대상 PK 컬럼</Label>
+                      <ColumnCombobox
+                        columns={columns}
+                        value={task.manualPkColumn ?? ""}
+                        onSelect={(v) => onUpdate({ manualPkColumn: v })}
+                        placeholder="PK 컬럼 선택"
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
             )}
           </div>
+
+          {/* 8. 설정 요약 */}
+          {summaryText && (
+            <div className="rounded-md bg-muted/50 p-3">
+              <p className="mb-1 text-xs font-medium text-muted-foreground">설정 요약</p>
+              <p className="whitespace-pre-line text-xs leading-relaxed">{summaryText}</p>
+            </div>
+          )}
         </>
       )}
     </div>
@@ -2361,10 +2597,10 @@ function PopButtonPreviewComponent({ config }: { config?: PopButtonConfig }) {
 // ========================================
 
 const KNOWN_ITEM_FIELDS = [
-  { value: "__cart_id", label: "__cart_id (카드 항목 ID)" },
-  { value: "__cart_row_key", label: "__cart_row_key (원본 PK 값)" },
-  { value: "id", label: "id" },
-  { value: "row_key", label: "row_key" },
+  { value: "__cart_row_key", label: "카드 항목의 원본 키", desc: "DB에서 가져온 데이터의 PK (가장 일반적)" },
+  { value: "__cart_id", label: "카드 항목 ID", desc: "장바구니 내부 고유 ID" },
+  { value: "id", label: "id", desc: "데이터의 id 컬럼" },
+  { value: "row_key", label: "row_key", desc: "데이터의 row_key 컬럼" },
 ];
 
 function StatusChangeRuleEditor({
@@ -2687,6 +2923,107 @@ function SingleRuleEditor({
   );
 }
 
+// ========================================
+// 제어 실행 작업 폼 (custom-event -> 제어 플로우)
+// ========================================
+
+function ControlFlowTaskForm({
+  task,
+  onUpdate,
+}: {
+  task: ButtonTask;
+  onUpdate: (partial: Partial<ButtonTask>) => void;
+}) {
+  const [flows, setFlows] = useState<{ flowId: number; flowName: string; flowDescription?: string }[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    apiClient
+      .get("/dataflow/node-flows")
+      .then((res) => {
+        const data = res.data?.data ?? res.data ?? [];
+        if (Array.isArray(data)) {
+          setFlows(data);
+        }
+      })
+      .catch(() => setFlows([]))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const selectedFlow = flows.find((f) => f.flowId === task.flowId);
+
+  return (
+    <div className="space-y-2">
+      <Label className="text-xs font-medium">제어 플로우 선택</Label>
+      {loading ? (
+        <p className="text-[11px] text-muted-foreground">목록 불러오는 중...</p>
+      ) : (
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              className="h-8 w-full justify-between text-xs"
+            >
+              {selectedFlow ? selectedFlow.flowName : "플로우를 선택하세요"}
+              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="p-0"
+            style={{ width: "var(--radix-popover-trigger-width)" }}
+            align="start"
+          >
+            <Command>
+              <CommandInput placeholder="플로우 검색..." className="text-xs" />
+              <CommandList>
+                <CommandEmpty className="p-2 text-center text-xs">
+                  검색 결과 없음
+                </CommandEmpty>
+                <CommandGroup>
+                  {flows.map((f) => (
+                    <CommandItem
+                      key={f.flowId}
+                      value={f.flowName}
+                      onSelect={() => {
+                        onUpdate({
+                          flowId: f.flowId,
+                          flowName: f.flowName,
+                          eventName: `__node_flow_${f.flowId}`,
+                        });
+                        setOpen(false);
+                      }}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3 w-3",
+                          task.flowId === f.flowId ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                      <div className="flex flex-col">
+                        <span>{f.flowName}</span>
+                        {f.flowDescription && (
+                          <span className="text-[10px] text-muted-foreground">
+                            {f.flowDescription}
+                          </span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}
+
 // 레지스트리 등록
 PopComponentRegistry.registerComponent({
   id: "pop-button",
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx
new file mode 100644
index 00000000..55829efb
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Component.tsx
@@ -0,0 +1,1442 @@
+"use client";
+
+/**
+ * pop-card-list-v2 런타임 컴포넌트
+ *
+ * pop-card-list의 데이터 로딩/필터링/페이징/장바구니 로직을 재활용하되,
+ * 카드 내부 렌더링은 CSS Grid + 셀 타입별 렌더러(cell-renderers.tsx)로 대체.
+ */
+
+import React, { useEffect, useState, useRef, useMemo, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Loader2, ChevronDown, ChevronUp, ChevronLeft, ChevronRight, Trash2, Check, X,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type {
+  PopCardListV2Config,
+  CardGridConfigV2,
+  CardCellDefinitionV2,
+  CardInputFieldConfig,
+  CardCartActionConfig,
+  CardPackageConfig,
+  CardPresetSpec,
+  CartItem,
+  PackageEntry,
+  CollectDataRequest,
+  CollectedDataResponse,
+  TimelineProcessStep,
+  TimelineDataSource,
+  ActionButtonUpdate,
+  ActionButtonClickAction,
+  StatusValueMapping,
+  SelectModeConfig,
+  SelectModeButtonConfig,
+} from "../types";
+import {
+  CARD_PRESET_SPECS, DEFAULT_CARD_IMAGE,
+  VIRTUAL_SUB_STATUS, VIRTUAL_SUB_SEMANTIC, VIRTUAL_SUB_PROCESS, VIRTUAL_SUB_SEQ,
+} from "../types";
+import { dataApi } from "@/lib/api/data";
+import { screenApi } from "@/lib/api/screen";
+import { apiClient } from "@/lib/api/client";
+import { usePopEvent } from "@/hooks/pop/usePopEvent";
+import { useCartSync } from "@/hooks/pop/useCartSync";
+import { NumberInputModal } from "../pop-card-list/NumberInputModal";
+import { renderCellV2 } from "./cell-renderers";
+import type { PopLayoutDataV5 } from "@/components/pop/designer/types/pop-layout";
+import { isV5Layout, detectGridMode } from "@/components/pop/designer/types/pop-layout";
+import dynamic from "next/dynamic";
+const PopViewerWithModals = dynamic(() => import("@/components/pop/viewer/PopViewerWithModals"), { ssr: false });
+
+type RowData = Record<string, unknown>;
+
+// cart_items 행 파싱 (pop-card-list에서 그대로 차용)
+function parseCartRow(dbRow: Record<string, unknown>): Record<string, unknown> {
+  let rowData: Record<string, unknown> = {};
+  try {
+    const raw = dbRow.row_data;
+    if (typeof raw === "string" && raw.trim()) rowData = JSON.parse(raw);
+    else if (typeof raw === "object" && raw !== null) rowData = raw as Record<string, unknown>;
+  } catch { rowData = {}; }
+
+  return {
+    ...rowData,
+    __cart_id: dbRow.id,
+    __cart_quantity: Number(dbRow.quantity) || 0,
+    __cart_package_unit: dbRow.package_unit || "",
+    __cart_package_entries: dbRow.package_entries,
+    __cart_status: dbRow.status || "in_cart",
+    __cart_memo: dbRow.memo || "",
+    __cart_row_key: dbRow.row_key || "",
+    __cart_modified: false,
+  };
+}
+
+// 레거시 statusValues(고정 4키 객체) → statusMappings(동적 배열) 자동 변환
+function resolveStatusMappings(src: TimelineDataSource): StatusValueMapping[] {
+  if (src.statusMappings && src.statusMappings.length > 0) return src.statusMappings;
+
+  // 레거시 호환: 기존 statusValues 객체가 있으면 변환
+  const sv = (src as Record<string, unknown>).statusValues as Record<string, string> | undefined;
+  return [
+    { dbValue: sv?.waiting || "waiting", label: "대기", semantic: "pending" as const },
+    { dbValue: sv?.accepted || "accepted", label: "접수", semantic: "active" as const },
+    { dbValue: sv?.inProgress || "in_progress", label: "진행중", semantic: "active" as const },
+    { dbValue: sv?.completed || "completed", label: "완료", semantic: "done" as const },
+  ];
+}
+
+interface PopCardListV2ComponentProps {
+  config?: PopCardListV2Config;
+  className?: string;
+  screenId?: string;
+  componentId?: string;
+  currentRowSpan?: number;
+  currentColSpan?: number;
+  onRequestResize?: (componentId: string, newRowSpan: number, newColSpan?: number) => void;
+}
+
+export function PopCardListV2Component({
+  config,
+  className,
+  screenId,
+  componentId,
+  currentRowSpan,
+  currentColSpan,
+  onRequestResize,
+}: PopCardListV2ComponentProps) {
+  const { subscribe, publish } = usePopEvent(screenId || "default");
+  const router = useRouter();
+
+  const isCartListMode = config?.cartListMode?.enabled === true;
+  const [inheritedConfig, setInheritedConfig] = useState<Partial<PopCardListV2Config> | null>(null);
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const effectiveConfig = useMemo<PopCardListV2Config | undefined>(() => {
+    if (!isCartListMode || !inheritedConfig) return config;
+    return {
+      ...config,
+      ...inheritedConfig,
+      cartListMode: config?.cartListMode,
+      dataSource: config?.dataSource,
+    } as PopCardListV2Config;
+  }, [config, inheritedConfig, isCartListMode]);
+
+  const isHorizontalMode = (effectiveConfig?.scrollDirection || "vertical") === "horizontal";
+  const maxGridColumns = effectiveConfig?.gridColumns || 2;
+  const configGridRows = effectiveConfig?.gridRows || 3;
+  const dataSource = effectiveConfig?.dataSource;
+  const cardGrid = effectiveConfig?.cardGrid;
+
+  const sourceTableName = (!isCartListMode && dataSource?.tableName) || "";
+  const cart = useCartSync(screenId || "", sourceTableName);
+
+  const [rows, setRows] = useState<RowData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 외부 필터
+  const [externalFilters, setExternalFilters] = useState<
+    Map<string, {
+      fieldName: string;
+      value: unknown;
+      filterConfig?: { targetColumn: string; targetColumns?: string[]; filterMode: string; isSubTable?: boolean };
+      _source?: string;
+    }>
+  >(new Map());
+
+  useEffect(() => {
+    if (!componentId) return;
+    const unsub = subscribe(
+      `__comp_input__${componentId}__filter_condition`,
+      (payload: unknown) => {
+        const data = payload as {
+          value?: { fieldName?: string; value?: unknown; _source?: string };
+          filterConfig?: { targetColumn: string; targetColumns?: string[]; filterMode: string; isSubTable?: boolean };
+          _connectionId?: string;
+        };
+        const connId = data?._connectionId || "default";
+        setExternalFilters((prev) => {
+          const next = new Map(prev);
+          if (data?.value?.value) {
+            next.set(connId, {
+              fieldName: data.value.fieldName || "",
+              value: data.value.value,
+              filterConfig: data.filterConfig,
+              _source: data.value._source,
+            });
+          } else {
+            next.delete(connId);
+          }
+          return next;
+        });
+      },
+    );
+    return unsub;
+  }, [componentId, subscribe]);
+
+  const cartRef = useRef(cart);
+  cartRef.current = cart;
+
+  // 저장 요청 수신
+  useEffect(() => {
+    if (!componentId || isCartListMode) return;
+    const unsub = subscribe(
+      `__comp_input__${componentId}__cart_save_trigger`,
+      async (payload: unknown) => {
+        const data = payload as { value?: { selectedColumns?: string[] } } | undefined;
+        const ok = await cartRef.current.saveToDb(data?.value?.selectedColumns);
+        publish(`__comp_output__${componentId}__cart_save_completed`, { success: ok });
+      },
+    );
+    return unsub;
+  }, [componentId, subscribe, publish, isCartListMode]);
+
+  // 초기 장바구니 상태 전달
+  useEffect(() => {
+    if (!componentId || cart.loading || isCartListMode) return;
+    publish(`__comp_output__${componentId}__cart_updated`, {
+      count: cart.cartCount,
+      isDirty: cart.isDirty,
+    });
+  }, [componentId, cart.loading, cart.cartCount, cart.isDirty, publish, isCartListMode]);
+
+  // ===== 선택 모드 =====
+  const [selectMode, setSelectMode] = useState(false);
+  const [selectModeStatus, setSelectModeStatus] = useState<string>("");
+  const [selectModeConfig, setSelectModeConfig] = useState<SelectModeConfig | null>(null);
+  const [selectedRowIds, setSelectedRowIds] = useState<Set<string>>(new Set());
+  const [selectProcessing, setSelectProcessing] = useState(false);
+
+  // ===== 모달 열기 (POP 화면) =====
+  const [popModalOpen, setPopModalOpen] = useState(false);
+  const [popModalLayout, setPopModalLayout] = useState<PopLayoutDataV5 | null>(null);
+  const [popModalScreenId, setPopModalScreenId] = useState<string>("");
+  const [popModalRow, setPopModalRow] = useState<RowData | null>(null);
+
+  const openPopModal = useCallback(async (screenIdStr: string, row: RowData) => {
+    try {
+      const sid = parseInt(screenIdStr, 10);
+      if (isNaN(sid)) {
+        toast.error("올바른 화면 ID가 아닙니다.");
+        return;
+      }
+      const popLayout = await screenApi.getLayoutPop(sid);
+      if (popLayout && isV5Layout(popLayout)) {
+        setPopModalLayout(popLayout);
+        setPopModalScreenId(String(sid));
+        setPopModalRow(row);
+        setPopModalOpen(true);
+      } else {
+        toast.error("해당 POP 화면을 찾을 수 없습니다.");
+      }
+    } catch {
+      toast.error("POP 화면을 불러오는데 실패했습니다.");
+    }
+  }, []);
+
+  const handleCardSelect = useCallback((row: RowData) => {
+
+    if (effectiveConfig?.cardClickAction === "modal-open" && effectiveConfig?.cardClickModalConfig?.screenId) {
+      const mc = effectiveConfig.cardClickModalConfig;
+      if (mc.condition && mc.condition.type !== "always") {
+        const processFlow = row.__processFlow__ as { isCurrent: boolean; status?: string }[] | undefined;
+        const currentProcess = processFlow?.find((s) => s.isCurrent);
+        if (mc.condition.type === "timeline-status") {
+          if (currentProcess?.status !== mc.condition.value) return;
+        } else if (mc.condition.type === "column-value") {
+          if (String(row[mc.condition.column || ""] ?? "") !== mc.condition.value) return;
+        }
+      }
+      openPopModal(mc.screenId, row);
+      return;
+    }
+    if (!componentId) return;
+    publish(`__comp_output__${componentId}__selected_row`, row);
+  }, [componentId, publish, effectiveConfig, openPopModal]);
+
+  const enterSelectMode = useCallback((whenStatus: string, buttonConfig: Record<string, unknown>) => {
+    const smConfig = buttonConfig.selectModeConfig as SelectModeConfig | undefined;
+    if (!smConfig) return;
+    setSelectMode(true);
+    setSelectModeStatus(smConfig.filterStatus || whenStatus);
+    setSelectModeConfig(smConfig);
+    setSelectedRowIds(new Set());
+  }, []);
+
+  const exitSelectMode = useCallback(() => {
+    setSelectMode(false);
+    setSelectModeStatus("");
+    setSelectModeConfig(null);
+    setSelectedRowIds(new Set());
+  }, []);
+
+  const toggleRowSelection = useCallback((row: RowData) => {
+    const rowId = String(row.id ?? row.pk ?? "");
+    if (!rowId) return;
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) next.delete(rowId); else next.add(rowId);
+      return next;
+    });
+  }, []);
+
+  const isRowSelectable = useCallback((row: RowData) => {
+    if (!selectMode) return false;
+    const subStatus = row[VIRTUAL_SUB_STATUS];
+    if (subStatus !== undefined) return String(subStatus) === selectModeStatus;
+    return true;
+  }, [selectMode, selectModeStatus]);
+
+  // 확장/페이지네이션
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [originalRowSpan, setOriginalRowSpan] = useState<number | null>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const baseContainerHeight = useRef(0);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      if (width > 0) setContainerWidth(width);
+      if (height > 0) setContainerHeight(height);
+    });
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const cardSizeKey = effectiveConfig?.cardSize || "large";
+  const spec: CardPresetSpec = CARD_PRESET_SPECS[cardSizeKey] || CARD_PRESET_SPECS.large;
+
+  const maxAllowedColumns = useMemo(() => {
+    if (!currentColSpan) return maxGridColumns;
+    if (currentColSpan >= 8) return maxGridColumns;
+    return 1;
+  }, [currentColSpan, maxGridColumns]);
+
+  const minCardWidth = Math.round(spec.height * 1.6);
+  const autoColumns = containerWidth > 0
+    ? Math.max(1, Math.floor((containerWidth + spec.gap) / (minCardWidth + spec.gap)))
+    : maxGridColumns;
+  const gridColumns = Math.max(1, Math.min(autoColumns, maxGridColumns, maxAllowedColumns));
+  const gridRows = configGridRows;
+
+  // 셀 설정에서 timelineSource 탐색 (timeline/status-badge/action-buttons 중 하나에 설정됨)
+  const timelineSource = useMemo<TimelineDataSource | undefined>(() => {
+    const cells = cardGrid?.cells || [];
+    for (const c of cells) {
+      if ((c.type === "timeline" || c.type === "status-badge" || c.type === "action-buttons") && c.timelineSource?.processTable) {
+        return c.timelineSource;
+      }
+    }
+    return undefined;
+  }, [cardGrid?.cells]);
+
+  // 외부 필터 (메인 테이블 + 하위 테이블 분기)
+  const filteredRows = useMemo(() => {
+    if (externalFilters.size === 0) return rows;
+
+    const allFilters = [...externalFilters.values()];
+    const mainFilters = allFilters.filter((f) => !f.filterConfig?.isSubTable);
+    const subFilters = allFilters.filter((f) => f.filterConfig?.isSubTable);
+
+    // 1단계: 하위 테이블 필터 → __subStatus__ 주입
+    const afterSubFilter = subFilters.length === 0
+      ? rows
+      : rows
+          .map((row) => {
+            const processFlow = row.__processFlow__ as TimelineProcessStep[] | undefined;
+            if (!processFlow || processFlow.length === 0) return null;
+
+            const matchingSteps = processFlow.filter((step) =>
+              subFilters.every((filter) => {
+                const searchValue = String(filter.value).toLowerCase();
+                if (!searchValue) return true;
+                const fc = filter.filterConfig;
+                const col = fc?.targetColumn || filter.fieldName || "";
+                if (!col) return true;
+                const cellValue = String(step.rawData?.[col] ?? "").toLowerCase();
+                const mode = fc?.filterMode || "contains";
+                switch (mode) {
+                  case "equals": return cellValue === searchValue;
+                  case "starts_with": return cellValue.startsWith(searchValue);
+                  default: return cellValue.includes(searchValue);
+                }
+              }),
+            );
+
+            if (matchingSteps.length === 0) return null;
+
+            const matched = matchingSteps[0];
+            // 매칭된 공정을 타임라인에서 강조
+            const updatedFlow = processFlow.map((s) => ({
+              ...s,
+              isCurrent: s.seqNo === matched.seqNo,
+            }));
+            return {
+              ...row,
+              __processFlow__: updatedFlow,
+              [VIRTUAL_SUB_STATUS]: matched.status,
+              [VIRTUAL_SUB_SEMANTIC]: matched.semantic || "pending",
+              [VIRTUAL_SUB_PROCESS]: matched.processName,
+              [VIRTUAL_SUB_SEQ]: matched.seqNo,
+            };
+          })
+          .filter((row): row is RowData => row !== null);
+
+    // 2단계: 메인 테이블 필터 (__subStatus__ 주입된 데이터 기반)
+    if (mainFilters.length === 0) return afterSubFilter;
+
+    return afterSubFilter.filter((row) =>
+      mainFilters.every((filter) => {
+        const searchValue = String(filter.value).toLowerCase();
+        if (!searchValue) return true;
+        const fc = filter.filterConfig;
+        const columns: string[] =
+          fc?.targetColumns?.length ? fc.targetColumns
+            : fc?.targetColumn ? [fc.targetColumn]
+              : filter.fieldName ? [filter.fieldName] : [];
+        if (columns.length === 0) return true;
+        const mode = fc?.filterMode || "contains";
+
+        // 하위 필터 활성 시: 상태 컬럼(status 등)을 __subStatus__로 대체
+        const subCol = subFilters.length > 0 ? VIRTUAL_SUB_STATUS : null;
+        const statusCol = timelineSource?.statusColumn || "status";
+        const effectiveColumns = subCol
+          ? columns.map((col) => col === statusCol || col === "status" ? subCol : col)
+          : columns;
+
+        return effectiveColumns.some((col) => {
+          const cellValue = String(row[col] ?? "").toLowerCase();
+          switch (mode) {
+            case "equals": return cellValue === searchValue;
+            case "starts_with": return cellValue.startsWith(searchValue);
+            default: return cellValue.includes(searchValue);
+          }
+        });
+      }),
+    );
+  }, [rows, externalFilters, timelineSource]);
+
+  // 하위 필터 활성 여부
+  const hasActiveSubFilter = useMemo(() => {
+    if (externalFilters.size === 0) return false;
+    return [...externalFilters.values()].some((f) => f.filterConfig?.isSubTable);
+  }, [externalFilters]);
+
+  // 선택 모드 일괄 처리
+  const handleSelectModeAction = useCallback(async (btnConfig: SelectModeButtonConfig) => {
+    if (btnConfig.clickMode === "cancel-select") {
+      exitSelectMode();
+      return;
+    }
+
+    if (btnConfig.clickMode === "status-change" && btnConfig.updates && btnConfig.targetTable) {
+      if (selectedRowIds.size === 0) {
+        toast.error("선택된 항목이 없습니다.");
+        return;
+      }
+      if (btnConfig.confirmMessage && !window.confirm(btnConfig.confirmMessage)) return;
+
+      setSelectProcessing(true);
+      try {
+        const selectedRows = filteredRows.filter((r) => {
+          const rowId = String(r.id ?? r.pk ?? "");
+          return selectedRowIds.has(rowId);
+        });
+
+        let successCount = 0;
+        for (const row of selectedRows) {
+          const processFlow = row.__processFlow__ as { isCurrent: boolean; processId?: string | number }[] | undefined;
+          const currentProcess = processFlow?.find((s) => s.isCurrent);
+          const targetId = currentProcess?.processId ?? row.id ?? row.pk;
+          if (!targetId) continue;
+
+          const tasks = btnConfig.updates.map((u, idx) => ({
+            id: `sel-update-${idx}`,
+            type: "data-update" as const,
+            targetTable: btnConfig.targetTable!,
+            targetColumn: u.column,
+            operationType: "assign" as const,
+            valueSource: "fixed" as const,
+            fixedValue: u.valueType === "static" ? (u.value ?? "") :
+                        u.valueType === "currentUser" ? "__CURRENT_USER__" :
+                        u.valueType === "currentTime" ? "__CURRENT_TIME__" :
+                        (u.value ?? ""),
+            lookupMode: "manual" as const,
+            manualItemField: "id",
+            manualPkColumn: "id",
+          }));
+
+          const result = await apiClient.post("/pop/execute-action", {
+            tasks,
+            data: { items: [{ ...row, id: targetId }], fieldValues: {} },
+            mappings: {},
+          });
+          if (result.data?.success) successCount++;
+        }
+
+        if (successCount > 0) {
+          toast.success(`${successCount}건 처리 완료`);
+          exitSelectMode();
+          fetchDataRef.current();
+        } else {
+          toast.error("처리에 실패했습니다.");
+        }
+      } catch (err: unknown) {
+        toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
+      } finally {
+        setSelectProcessing(false);
+      }
+      return;
+    }
+
+    if (btnConfig.clickMode === "modal-open" && btnConfig.modalScreenId) {
+      const selectedRows = filteredRows.filter((r) => {
+        const rowId = String(r.id ?? r.pk ?? "");
+        return selectedRowIds.has(rowId);
+      });
+      openPopModal(btnConfig.modalScreenId, selectedRows[0] || {});
+      return;
+    }
+  }, [selectedRowIds, filteredRows, exitSelectMode]);
+
+  // status-bar 필터를 제외한 rows (카운트 집계용)
+  // status-bar에서 "접수가능" 등 선택해도 전체 카운트가 유지되어야 함
+  const rowsForStatusCount = useMemo(() => {
+    const hasStatusBarFilter = [...externalFilters.values()].some((f) => f._source === "status-bar");
+    if (!hasStatusBarFilter) return filteredRows;
+
+    // status-bar 필터를 제외한 필터만 적용
+    const nonStatusFilters = new Map(
+      [...externalFilters.entries()].filter(([, f]) => f._source !== "status-bar")
+    );
+    if (nonStatusFilters.size === 0) return rows;
+
+    const allFilters = [...nonStatusFilters.values()];
+    const mainFilters = allFilters.filter((f) => !f.filterConfig?.isSubTable);
+    const subFilters = allFilters.filter((f) => f.filterConfig?.isSubTable);
+
+    const afterSubFilter = subFilters.length === 0
+      ? rows
+      : rows
+          .map((row) => {
+            const processFlow = row.__processFlow__ as TimelineProcessStep[] | undefined;
+            if (!processFlow || processFlow.length === 0) return null;
+            const matchingSteps = processFlow.filter((step) =>
+              subFilters.every((filter) => {
+                const searchValue = String(filter.value).toLowerCase();
+                if (!searchValue) return true;
+                const fc = filter.filterConfig;
+                const col = fc?.targetColumn || filter.fieldName || "";
+                if (!col) return true;
+                const cellValue = String(step.rawData?.[col] ?? "").toLowerCase();
+                const mode = fc?.filterMode || "contains";
+                switch (mode) {
+                  case "equals": return cellValue === searchValue;
+                  case "starts_with": return cellValue.startsWith(searchValue);
+                  default: return cellValue.includes(searchValue);
+                }
+              }),
+            );
+            if (matchingSteps.length === 0) return null;
+            const matched = matchingSteps[0];
+            const updatedFlow = processFlow.map((s) => ({
+              ...s,
+              isCurrent: s.seqNo === matched.seqNo,
+            }));
+            return {
+              ...row,
+              __processFlow__: updatedFlow,
+              [VIRTUAL_SUB_STATUS]: matched.status,
+              [VIRTUAL_SUB_SEMANTIC]: matched.semantic || "pending",
+              [VIRTUAL_SUB_PROCESS]: matched.processName,
+              [VIRTUAL_SUB_SEQ]: matched.seqNo,
+            };
+          })
+          .filter((row): row is RowData => row !== null);
+
+    if (mainFilters.length === 0) return afterSubFilter;
+
+    return afterSubFilter.filter((row) =>
+      mainFilters.every((filter) => {
+        const searchValue = String(filter.value).toLowerCase();
+        if (!searchValue) return true;
+        const fc = filter.filterConfig;
+        const columns: string[] =
+          fc?.targetColumns?.length ? fc.targetColumns
+            : fc?.targetColumn ? [fc.targetColumn]
+              : filter.fieldName ? [filter.fieldName] : [];
+        if (columns.length === 0) return true;
+        const mode = fc?.filterMode || "contains";
+        const subCol = subFilters.length > 0 ? VIRTUAL_SUB_STATUS : null;
+        const statusCol = timelineSource?.statusColumn || "status";
+        const effectiveColumns = subCol
+          ? columns.map((col) => col === statusCol || col === "status" ? subCol : col)
+          : columns;
+        return effectiveColumns.some((col) => {
+          const cellValue = String(row[col] ?? "").toLowerCase();
+          switch (mode) {
+            case "equals": return cellValue === searchValue;
+            case "starts_with": return cellValue.startsWith(searchValue);
+            default: return cellValue.includes(searchValue);
+          }
+        });
+      }),
+    );
+  }, [rows, filteredRows, externalFilters, timelineSource]);
+
+  // 카운트 집계용 rows 발행 (status-bar 필터 제외)
+  useEffect(() => {
+    if (!componentId || loading) return;
+    publish(`__comp_output__${componentId}__all_rows`, {
+      rows: rowsForStatusCount,
+      subStatusColumn: hasActiveSubFilter ? VIRTUAL_SUB_STATUS : null,
+    });
+  }, [componentId, rowsForStatusCount, loading, publish, hasActiveSubFilter]);
+
+  const overflowCfg = effectiveConfig?.overflow;
+  const baseVisibleCount = overflowCfg?.visibleCount ?? gridColumns * gridRows;
+  const visibleCardCount = useMemo(() => Math.max(1, baseVisibleCount), [baseVisibleCount]);
+  const hasMoreCards = filteredRows.length > visibleCardCount;
+  const expandedCardsPerPage = useMemo(() => {
+    if (overflowCfg?.mode === "pagination" && overflowCfg.pageSize) return overflowCfg.pageSize;
+    if (overflowCfg?.mode === "loadMore" && overflowCfg.loadMoreCount) return overflowCfg.loadMoreCount + visibleCardCount;
+    return Math.max(1, visibleCardCount * 2 + gridColumns);
+  }, [visibleCardCount, gridColumns, overflowCfg]);
+
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  const displayCards = useMemo(() => {
+    if (!isExpanded) return filteredRows.slice(0, visibleCardCount);
+    const start = (currentPage - 1) * expandedCardsPerPage;
+    return filteredRows.slice(start, start + expandedCardsPerPage);
+  }, [filteredRows, isExpanded, visibleCardCount, currentPage, expandedCardsPerPage]);
+
+  const totalPages = isExpanded ? Math.ceil(filteredRows.length / expandedCardsPerPage) : 1;
+  const needsPagination = isExpanded && totalPages > 1;
+
+  const toggleExpand = () => {
+    if (isExpanded) {
+      if (!isHorizontalMode && originalRowSpan !== null && componentId && onRequestResize) {
+        onRequestResize(componentId, originalRowSpan);
+      }
+      setCurrentPage(1);
+      setOriginalRowSpan(null);
+      baseContainerHeight.current = 0;
+      setIsExpanded(false);
+    } else {
+      baseContainerHeight.current = containerHeight;
+      if (!isHorizontalMode && componentId && onRequestResize && currentRowSpan !== undefined) {
+        setOriginalRowSpan(currentRowSpan);
+        onRequestResize(componentId, currentRowSpan * 2);
+      }
+      setIsExpanded(true);
+    }
+  };
+
+  useEffect(() => {
+    if (scrollAreaRef.current && isExpanded) {
+      scrollAreaRef.current.scrollTop = 0;
+      scrollAreaRef.current.scrollLeft = 0;
+    }
+  }, [currentPage, isExpanded]);
+
+  // 데이터 조회
+  const dataSourceKey = useMemo(() => JSON.stringify(dataSource || null), [dataSource]);
+  const cartListModeKey = useMemo(() => JSON.stringify(config?.cartListMode || null), [config?.cartListMode]);
+
+  // 하위 데이터 조회 + __processFlow__ 가상 컬럼 주입
+  const injectProcessFlow = useCallback(async (
+    fetchedRows: RowData[],
+    src: TimelineDataSource,
+  ): Promise<RowData[]> => {
+    if (fetchedRows.length === 0) return fetchedRows;
+    const rowIds = fetchedRows.map((r) => String(r.id)).filter(Boolean);
+    if (rowIds.length === 0) return fetchedRows;
+
+    // statusMappings 동적 배열 → dbValue-to-내부키 맵 구축
+    // 레거시 statusValues 객체도 자동 변환
+    const mappings = resolveStatusMappings(src);
+    const dbToInternal = new Map<string, string>();
+    const dbToSemantic = new Map<string, string>();
+    for (const m of mappings) {
+      dbToInternal.set(m.dbValue, m.dbValue);
+      dbToSemantic.set(m.dbValue, m.semantic);
+    }
+
+    const processResult = await dataApi.getTableData(src.processTable, {
+      page: 1,
+      size: 1000,
+      sortBy: src.seqColumn || "seq_no",
+      sortOrder: "asc",
+    });
+    const allProcesses = processResult.data || [];
+
+    // isDerived 매핑: DB에 없는 자동 판별 상태
+    // 같은 시맨틱의 DB 원본 상태를 자동으로 찾아 변환 조건 구축
+    const derivedRules: { sourceStatus: string; targetDbValue: string; targetSemantic: string }[] = [];
+    for (const dm of mappings.filter((m) => m.isDerived)) {
+      const source = mappings.find((m) => !m.isDerived && m.semantic === dm.semantic);
+      if (source) {
+        derivedRules.push({ sourceStatus: source.dbValue, targetDbValue: dm.dbValue, targetSemantic: dm.semantic });
+      }
+    }
+
+    const processMap = new Map<string, TimelineProcessStep[]>();
+    for (const p of allProcesses) {
+      const fkValue = String(p[src.foreignKey] || "");
+      if (!fkValue || !rowIds.includes(fkValue)) continue;
+      if (!processMap.has(fkValue)) processMap.set(fkValue, []);
+
+      const rawStatus = String(p[src.statusColumn] || "");
+      const normalizedStatus = dbToInternal.get(rawStatus) || rawStatus;
+      const semantic = dbToSemantic.get(rawStatus) || "pending";
+
+      processMap.get(fkValue)!.push({
+        seqNo: parseInt(String(p[src.seqColumn] || "0"), 10),
+        processName: String(p[src.nameColumn] || ""),
+        status: normalizedStatus,
+        semantic: semantic as "pending" | "active" | "done",
+        isCurrent: semantic === "active",
+        processId: p.id as string | number | undefined,
+        rawData: p as Record<string, unknown>,
+      });
+    }
+
+    // 파생 상태 자동 변환: 이전 공정이 완료된 경우 변환
+    if (derivedRules.length > 0) {
+      for (const [, steps] of processMap) {
+        steps.sort((a, b) => a.seqNo - b.seqNo);
+        for (let i = 0; i < steps.length; i++) {
+          const step = steps[i];
+          const prevStep = i > 0 ? steps[i - 1] : null;
+          for (const rule of derivedRules) {
+            if (step.status !== rule.sourceStatus) continue;
+            const prevIsDone = prevStep ? prevStep.semantic === "done" : true;
+            if (prevIsDone) {
+              step.status = rule.targetDbValue;
+              step.semantic = rule.targetSemantic as "pending" | "active" | "done";
+            }
+          }
+        }
+      }
+    }
+
+    // isCurrent 결정: "기준" 체크된 상태와 일치하는 공정을 강조
+    // 기준 상태가 없으면 기존 로직 (active → 첫 pending) 폴백
+    const pivotDbValues = mappings.filter((m) => m.isDerived).map((m) => m.dbValue);
+    for (const [, steps] of processMap) {
+      steps.sort((a, b) => a.seqNo - b.seqNo);
+      steps.forEach((s) => { s.isCurrent = false; });
+
+      if (pivotDbValues.length > 0) {
+        const pivotStep = steps.find((s) => pivotDbValues.includes(s.status));
+        if (pivotStep) {
+          pivotStep.isCurrent = true;
+          continue;
+        }
+      }
+      // 폴백: active가 있으면 첫 active, 없으면 첫 pending
+      const firstActive = steps.find((s) => s.semantic === "active");
+      if (firstActive) { firstActive.isCurrent = true; continue; }
+      const firstPending = steps.find((s) => s.semantic === "pending");
+      if (firstPending) { firstPending.isCurrent = true; }
+    }
+
+    return fetchedRows.map((row) => ({
+      ...row,
+      __processFlow__: processMap.get(String(row.id)) || [],
+    }));
+  }, []);
+
+  const fetchData = useCallback(async () => {
+    if (!dataSource?.tableName) { setLoading(false); setRows([]); return; }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const filters: Record<string, unknown> = {};
+      if (dataSource.filters?.length) {
+        dataSource.filters.forEach((f) => {
+          if (f.column && f.value && (!f.operator || f.operator === "=")) filters[f.column] = f.value;
+        });
+      }
+      const sortArray = Array.isArray(dataSource.sort)
+        ? dataSource.sort
+        : dataSource.sort && typeof dataSource.sort === "object"
+          ? [dataSource.sort as { column: string; direction: "asc" | "desc" }]
+          : [];
+      const primarySort = sortArray[0];
+      const size = dataSource.limit?.mode === "limited" && dataSource.limit?.count ? dataSource.limit.count : 100;
+
+      const result = await dataApi.getTableData(dataSource.tableName, {
+        page: 1,
+        size,
+        sortBy: primarySort?.column || undefined,
+        sortOrder: primarySort?.direction,
+        filters: Object.keys(filters).length > 0 ? filters : undefined,
+      });
+
+      let fetchedRows = result.data || [];
+      const clientFilters = (dataSource.filters || []).filter(
+        (f) => f.column && f.value && f.operator && f.operator !== "=",
+      );
+      if (clientFilters.length > 0) {
+        fetchedRows = fetchedRows.filter((row) =>
+          clientFilters.every((f) => {
+            const cellVal = row[f.column];
+            const filterVal = f.value;
+            switch (f.operator) {
+              case "!=": return String(cellVal ?? "") !== filterVal;
+              case ">":  return Number(cellVal) > Number(filterVal);
+              case ">=": return Number(cellVal) >= Number(filterVal);
+              case "<":  return Number(cellVal) < Number(filterVal);
+              case "<=": return Number(cellVal) <= Number(filterVal);
+              case "like": return String(cellVal ?? "").toLowerCase().includes(filterVal.toLowerCase());
+              default: return true;
+            }
+          }),
+        );
+      }
+
+      // timelineSource 설정이 있으면 공정 데이터 조회하여 __processFlow__ 주입
+      if (timelineSource) {
+        try {
+          fetchedRows = await injectProcessFlow(fetchedRows, timelineSource);
+        } catch {
+          // 공정 데이터 조회 실패 시 무시 (메인 데이터는 정상 표시)
+        }
+      }
+
+      setRows(fetchedRows);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "데이터 조회 실패");
+      setRows([]);
+    } finally { setLoading(false); }
+  }, [dataSource, timelineSource, injectProcessFlow]);
+
+  const fetchDataRef = useRef(fetchData);
+  fetchDataRef.current = fetchData;
+
+  useEffect(() => {
+    if (isCartListMode) {
+      const cartListMode = config!.cartListMode!;
+      if (!cartListMode.sourceScreenId) { setLoading(false); setRows([]); return; }
+
+      const fetchCartData = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+          try {
+            const layoutJson = await screenApi.getLayoutPop(cartListMode.sourceScreenId!);
+            const componentsMap = layoutJson?.components || {};
+            const componentList = Object.values(componentsMap) as any[];
+            const matched = cartListMode.sourceComponentId
+              ? componentList.find((c: any) => c.id === cartListMode.sourceComponentId)
+              : componentList.find((c: any) => c.type === "pop-card-list-v2" || c.type === "pop-card-list");
+            if (matched?.config) setInheritedConfig(matched.config);
+          } catch { /* 레이아웃 로드 실패 시 자체 config 폴백 */ }
+
+          const cartFilters: Record<string, unknown> = { status: cartListMode.statusFilter || "in_cart" };
+          if (cartListMode.sourceScreenId) cartFilters.screen_id = String(cartListMode.sourceScreenId);
+          const result = await dataApi.getTableData("cart_items", { size: 500, filters: cartFilters });
+          setRows((result.data || []).map(parseCartRow));
+        } catch (err) {
+          setError(err instanceof Error ? err.message : "장바구니 데이터 조회 실패");
+          setRows([]);
+        } finally { setLoading(false); }
+      };
+      fetchCartData();
+      return;
+    }
+
+    fetchData();
+  }, [dataSourceKey, isCartListMode, cartListModeKey, fetchData]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 장바구니 목록 모드 콜백
+  const handleDeleteItem = useCallback((cartId: string) => {
+    setRows((prev) => prev.filter((r) => String(r.__cart_id) !== cartId));
+    setSelectedKeys((prev) => { const next = new Set(prev); next.delete(cartId); return next; });
+  }, []);
+
+  const handleUpdateQuantity = useCallback((cartId: string, quantity: number, unit?: string, entries?: PackageEntry[]) => {
+    setRows((prev) => prev.map((r) => {
+      if (String(r.__cart_id) !== cartId) return r;
+      return { ...r, __cart_quantity: quantity, __cart_package_unit: unit || r.__cart_package_unit, __cart_package_entries: entries || r.__cart_package_entries, __cart_modified: true };
+    }));
+  }, []);
+
+  // 데이터 수집
+  useEffect(() => {
+    if (!componentId) return;
+    const unsub = subscribe(
+      `__comp_input__${componentId}__collect_data`,
+      (payload: unknown) => {
+        const request = (payload as Record<string, unknown>)?.value as CollectDataRequest | undefined;
+        const selectedItems = isCartListMode
+          ? filteredRows.filter((r) => selectedKeys.has(String(r.__cart_id ?? "")))
+          : rows;
+        const sm = config?.saveMapping;
+        const mapping = sm?.targetTable && sm.mappings.length > 0
+          ? { targetTable: sm.targetTable, columnMapping: Object.fromEntries(sm.mappings.filter((m) => m.sourceField && m.targetColumn).map((m) => [m.sourceField, m.targetColumn])) }
+          : null;
+        const cartChanges = cart.isDirty ? cart.getChanges() : undefined;
+        const response: CollectedDataResponse = {
+          requestId: request?.requestId ?? "",
+          componentId: componentId,
+          componentType: "pop-card-list-v2",
+          data: { items: selectedItems, cartChanges } as any,
+          mapping,
+        };
+        publish(`__comp_output__${componentId}__collected_data`, response);
+      },
+    );
+    return unsub;
+  }, [componentId, subscribe, publish, isCartListMode, filteredRows, rows, selectedKeys, cart]);
+
+  // 선택 항목 이벤트
+  useEffect(() => {
+    if (!componentId || !isCartListMode) return;
+    const selectedItems = filteredRows.filter((r) => selectedKeys.has(String(r.__cart_id ?? "")));
+    publish(`__comp_output__${componentId}__selected_items`, selectedItems);
+  }, [selectedKeys, filteredRows, componentId, isCartListMode, publish]);
+
+  // 카드 영역 스타일
+  const cardGap = effectiveConfig?.cardGap ?? spec.gap;
+  const cardMinHeight = spec.height;
+  const cardAreaStyle: React.CSSProperties = {
+    gap: `${cardGap}px`,
+    ...(isHorizontalMode
+      ? {
+          gridTemplateRows: `repeat(${gridRows}, minmax(${cardMinHeight}px, auto))`,
+          gridAutoFlow: "column",
+          gridAutoColumns: `${Math.round(cardMinHeight * 1.6)}px`,
+        }
+      : {
+          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+          gridAutoRows: `minmax(${cardMinHeight}px, auto)`,
+        }),
+  };
+
+  const scrollClassName = isHorizontalMode
+    ? "overflow-x-auto overflow-y-hidden"
+    : isExpanded
+      ? "overflow-y-auto overflow-x-hidden"
+      : "overflow-hidden";
+
+  return (
+    <div ref={containerRef} className={`flex h-full w-full flex-col ${className || ""}`}>
+      {isCartListMode && !config?.cartListMode?.sourceScreenId ? (
+        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
+          <p className="text-sm text-muted-foreground">원본 화면을 선택해주세요.</p>
+        </div>
+      ) : !isCartListMode && !dataSource?.tableName ? (
+        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
+          <p className="text-sm text-muted-foreground">데이터 소스를 설정해주세요.</p>
+        </div>
+      ) : effectiveConfig?.hideUntilFiltered && externalFilters.size === 0 ? (
+        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
+          <p className="text-sm text-muted-foreground">필터를 선택하면 데이터가 표시됩니다.</p>
+        </div>
+      ) : loading ? (
+        <div className="flex flex-1 items-center justify-center rounded-md border bg-muted/30 p-4">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : error ? (
+        <div className="flex flex-1 items-center justify-center rounded-md border border-destructive/50 bg-destructive/10 p-4">
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      ) : rows.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed bg-muted/30 p-4">
+          <p className="text-sm text-muted-foreground">데이터가 없습니다.</p>
+        </div>
+      ) : (
+        <>
+          {/* 선택 모드 상단 바 */}
+          {selectMode && (
+            <div className="flex shrink-0 items-center justify-between border-b bg-primary/5 px-3 py-2">
+              <div className="flex items-center gap-2">
+                <div className="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                  <span className="text-xs font-bold">{selectedRowIds.size}</span>
+                </div>
+                <span className="text-sm font-medium">
+                  {selectedRowIds.size > 0 ? `${selectedRowIds.size}개 선택됨` : "카드를 선택하세요"}
+                </span>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={exitSelectMode}
+                className="h-7 px-2 text-xs"
+              >
+                <X className="mr-1 h-3.5 w-3.5" />
+                취소
+              </Button>
+            </div>
+          )}
+
+          {/* 장바구니 모드 상단 바 */}
+          {!selectMode && isCartListMode && (
+            <div className="flex shrink-0 items-center gap-3 border-b px-3 py-2">
+              <input
+                type="checkbox"
+                checked={selectedKeys.size === filteredRows.length && filteredRows.length > 0}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedKeys(new Set(filteredRows.map((r) => String(r.__cart_id ?? ""))));
+                  } else {
+                    setSelectedKeys(new Set());
+                  }
+                }}
+                className="h-4 w-4 rounded border-input"
+              />
+              <span className="text-sm text-muted-foreground">
+                {selectedKeys.size > 0 ? `${selectedKeys.size}개 선택됨` : "전체 선택"}
+              </span>
+            </div>
+          )}
+
+          <div
+            ref={scrollAreaRef}
+            className={`min-h-0 flex-1 grid ${scrollClassName}`}
+            style={{ ...cardAreaStyle, alignContent: "start", justifyContent: isHorizontalMode ? "start" : "center" }}
+          >
+            {displayCards.map((row, index) => (
+              <CardV2
+                key={`card-${index}`}
+                row={row}
+                cardGrid={cardGrid}
+                spec={spec}
+                config={effectiveConfig}
+                onSelect={handleCardSelect}
+                cart={cart}
+                publish={publish}
+                parentComponentId={componentId}
+                isCartListMode={isCartListMode}
+                isSelected={selectedKeys.has(String(row.__cart_id ?? ""))}
+                onToggleSelect={() => {
+                  const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
+                  if (!cartId) return;
+                  setSelectedKeys((prev) => { const next = new Set(prev); if (next.has(cartId)) next.delete(cartId); else next.add(cartId); return next; });
+                }}
+                onDeleteItem={handleDeleteItem}
+                onUpdateQuantity={handleUpdateQuantity}
+                onRefresh={fetchData}
+                selectMode={selectMode}
+                isSelectModeSelected={selectedRowIds.has(String(row.id ?? row.pk ?? ""))}
+                isSelectable={isRowSelectable(row)}
+                onToggleRowSelect={() => toggleRowSelection(row)}
+                onEnterSelectMode={enterSelectMode}
+                onOpenPopModal={openPopModal}
+              />
+            ))}
+          </div>
+
+          {/* 선택 모드 하단 액션 바 */}
+          {selectMode && selectModeConfig && (
+            <div className="shrink-0 border-t bg-background px-3 py-2.5 shadow-[0_-2px_8px_rgba(0,0,0,0.08)]">
+              <div className="flex items-center justify-end gap-2">
+                {selectModeConfig.buttons.map((btn, idx) => (
+                  <Button
+                    key={idx}
+                    variant={btn.variant || (btn.clickMode === "cancel-select" ? "outline" : "default")}
+                    size="sm"
+                    className="h-10 min-w-[80px] px-4 text-sm font-medium"
+                    disabled={selectProcessing || (btn.clickMode !== "cancel-select" && selectedRowIds.size === 0)}
+                    onClick={() => handleSelectModeAction(btn)}
+                  >
+                    {selectProcessing && btn.clickMode !== "cancel-select" && (
+                      <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                    )}
+                    {btn.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* 더보기/페이지네이션 */}
+          {!selectMode && hasMoreCards && (
+            <div className="shrink-0 border-t bg-background px-3 py-2">
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2">
+                  <Button variant="outline" size="sm" onClick={toggleExpand} className="h-9 px-4 text-sm font-medium">
+                    {isExpanded ? (<>접기 <ChevronUp className="ml-1 h-4 w-4" /></>) : (<>더보기 <ChevronDown className="ml-1 h-4 w-4" /></>)}
+                  </Button>
+                  <span className="text-xs text-muted-foreground">
+                    {filteredRows.length}건{externalFilters.size > 0 && filteredRows.length !== rows.length ? ` / ${rows.length}건` : ""}
+                  </span>
+                </div>
+                {isExpanded && needsPagination && (
+                  <div className="flex items-center gap-1.5">
+                    <Button variant="default" size="sm" onClick={() => setCurrentPage((p) => Math.max(1, p - 1))} disabled={currentPage <= 1} className="h-9 w-9 p-0">
+                      <ChevronLeft className="h-5 w-5" />
+                    </Button>
+                    <span className="min-w-[48px] text-center text-sm font-medium">{currentPage} / {totalPages}</span>
+                    <Button variant="default" size="sm" onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))} disabled={currentPage >= totalPages} className="h-9 w-9 p-0">
+                      <ChevronRight className="h-5 w-5" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* POP 화면 모달 (풀스크린) */}
+      <Dialog open={popModalOpen} onOpenChange={(open) => {
+        setPopModalOpen(open);
+        if (!open) {
+          setPopModalLayout(null);
+          setPopModalRow(null);
+        }
+      }}>
+        <DialogContent className="flex h-dvh w-screen max-w-none flex-col gap-0 rounded-none border-none p-0 [&>button]:z-50">
+          <DialogHeader className="flex shrink-0 flex-row items-center justify-between border-b px-4 py-2">
+            <DialogTitle className="text-base">{effectiveConfig?.cardClickModalConfig?.modalTitle || "상세 작업"}</DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-auto">
+            {popModalLayout && (
+              <PopViewerWithModals
+                layout={popModalLayout}
+                viewportWidth={typeof window !== "undefined" ? window.innerWidth : 1024}
+                screenId={popModalScreenId}
+                currentMode={detectGridMode(typeof window !== "undefined" ? window.innerWidth : 1024)}
+              />
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+// ===== 카드 V2 =====
+
+interface CardV2Props {
+  row: RowData;
+  cardGrid?: CardGridConfigV2;
+  spec: CardPresetSpec;
+  config?: PopCardListV2Config;
+  onSelect?: (row: RowData) => void;
+  cart: ReturnType<typeof useCartSync>;
+  publish: (eventName: string, payload?: unknown) => void;
+  parentComponentId?: string;
+  isCartListMode?: boolean;
+  isSelected?: boolean;
+  onToggleSelect?: () => void;
+  onDeleteItem?: (cartId: string) => void;
+  onUpdateQuantity?: (cartId: string, quantity: number, unit?: string, entries?: PackageEntry[]) => void;
+  onRefresh?: () => void;
+  selectMode?: boolean;
+  isSelectModeSelected?: boolean;
+  isSelectable?: boolean;
+  onToggleRowSelect?: () => void;
+  onEnterSelectMode?: (whenStatus: string, buttonConfig: Record<string, unknown>) => void;
+  onOpenPopModal?: (screenId: string, row: RowData) => void;
+}
+
+function CardV2({
+  row, cardGrid, spec, config, onSelect, cart, publish,
+  parentComponentId, isCartListMode, isSelected, onToggleSelect,
+  onDeleteItem, onUpdateQuantity, onRefresh,
+  selectMode, isSelectModeSelected, isSelectable, onToggleRowSelect, onEnterSelectMode,
+  onOpenPopModal,
+}: CardV2Props) {
+  const inputField = config?.inputField;
+  const cartAction = config?.cartAction;
+  const packageConfig = config?.packageConfig;
+  const keyColumnName = cartAction?.keyColumn || "id";
+
+  const [inputValue, setInputValue] = useState<number>(0);
+  const [packageUnit, setPackageUnit] = useState<string | undefined>(undefined);
+  const [packageEntries, setPackageEntries] = useState<PackageEntry[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const rowKey = keyColumnName && row[keyColumnName] ? String(row[keyColumnName]) : "";
+  const isCarted = cart.isItemInCart(rowKey);
+  const existingCartItem = cart.getCartItem(rowKey);
+
+  // DB 장바구니 복원
+  useEffect(() => {
+    if (isCartListMode) return;
+    if (existingCartItem && existingCartItem._origin === "db") {
+      setInputValue(existingCartItem.quantity);
+      setPackageUnit(existingCartItem.packageUnit);
+      setPackageEntries(existingCartItem.packageEntries || []);
+    }
+  }, [isCartListMode, existingCartItem?._origin, existingCartItem?.quantity, existingCartItem?.packageUnit]);
+
+  // 장바구니 목록 모드 초기값
+  useEffect(() => {
+    if (!isCartListMode) return;
+    setInputValue(Number(row.__cart_quantity) || 0);
+    setPackageUnit(row.__cart_package_unit ? String(row.__cart_package_unit) : undefined);
+  }, [isCartListMode, row.__cart_quantity, row.__cart_package_unit]);
+
+  // 제한 컬럼 자동 초기화
+  const limitCol = inputField?.limitColumn || inputField?.maxColumn;
+  const effectiveMax = useMemo(() => {
+    if (limitCol) { const v = Number(row[limitCol]); if (!isNaN(v) && v > 0) return v; }
+    return 999999;
+  }, [limitCol, row]);
+
+  useEffect(() => {
+    if (isCartListMode) return;
+    if (inputField?.enabled && limitCol && effectiveMax > 0 && effectiveMax < 999999) {
+      setInputValue(effectiveMax);
+    }
+  }, [effectiveMax, inputField?.enabled, limitCol, isCartListMode]);
+
+  const handleInputClick = (e: React.MouseEvent) => { e.stopPropagation(); setIsModalOpen(true); };
+  const handleInputConfirm = (value: number, unit?: string, entries?: PackageEntry[]) => {
+    setInputValue(value);
+    setPackageUnit(unit);
+    setPackageEntries(entries || []);
+    if (isCartListMode) onUpdateQuantity?.(String(row.__cart_id), value, unit, entries);
+  };
+
+  const handleCartAdd = () => {
+    if (!rowKey) return;
+    cart.addItem({ row, quantity: inputValue, packageUnit, packageEntries: packageEntries.length > 0 ? packageEntries : undefined }, rowKey);
+    if (parentComponentId) publish(`__comp_output__${parentComponentId}__cart_updated`, { count: cart.cartCount + 1, isDirty: true });
+  };
+
+  const handleCartCancel = () => {
+    if (!rowKey) return;
+    cart.removeItem(rowKey);
+    if (parentComponentId) publish(`__comp_output__${parentComponentId}__cart_updated`, { count: Math.max(0, cart.cartCount - 1), isDirty: true });
+  };
+
+  const handleCartDelete = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const cartId = row.__cart_id != null ? String(row.__cart_id) : "";
+    if (!cartId) return;
+    if (!window.confirm("이 항목을 장바구니에서 삭제하시겠습니까?")) return;
+    try {
+      await dataApi.updateRecord("cart_items", cartId, { status: "cancelled" });
+      onDeleteItem?.(cartId);
+    } catch { toast.error("삭제에 실패했습니다."); }
+  };
+
+  const borderClass = selectMode
+    ? isSelectModeSelected
+      ? "border-primary border-2 bg-primary/5"
+      : isSelectable
+        ? "hover:border-2 hover:border-primary/50"
+        : "opacity-40 pointer-events-none"
+    : isCartListMode
+      ? isSelected ? "border-primary border-2 hover:border-primary/80" : "hover:border-2 hover:border-blue-500"
+      : isCarted ? "border-emerald-500 border-2 hover:border-emerald-600" : "hover:border-2 hover:border-blue-500";
+
+  if (!cardGrid || cardGrid.cells.length === 0) {
+    return (
+      <div className={`flex items-center justify-center rounded-lg border p-4 ${borderClass}`} style={{ minHeight: `${spec.height}px` }}>
+        <span className="text-xs text-muted-foreground">카드 레이아웃을 설정하세요</span>
+      </div>
+    );
+  }
+
+  const gridStyle: React.CSSProperties = {
+    display: "grid",
+    gridTemplateColumns: cardGrid.colWidths.length > 0
+      ? cardGrid.colWidths.map((w) => `minmax(30px, ${w || "1fr"})`).join(" ")
+      : "1fr",
+    gridTemplateRows: cardGrid.rowHeights?.length
+      ? cardGrid.rowHeights.map((h) => {
+          if (!h) return "minmax(24px, auto)";
+          if (h.endsWith("px")) return `minmax(${h}, auto)`;
+          const px = Math.round(parseFloat(h) * 24) || 24;
+          return `minmax(${px}px, auto)`;
+        }).join(" ")
+      : `repeat(${cardGrid.rows || 1}, minmax(24px, auto))`,
+    gap: `${cardGrid.gap || 0}px`,
+  };
+
+  const justifyMap = { left: "flex-start", center: "center", right: "flex-end" } as const;
+  const alignItemsMap = { top: "flex-start", middle: "center", bottom: "flex-end" } as const;
+
+  return (
+    <div
+      className={`relative flex cursor-pointer flex-col rounded-lg border bg-card shadow-sm transition-all duration-150 hover:shadow-md ${borderClass}`}
+      style={{ minHeight: `${spec.height}px` }}
+      onClick={() => {
+        if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
+        if (!selectMode) onSelect?.(row);
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          if (selectMode && isSelectable) { onToggleRowSelect?.(); return; }
+          if (!selectMode) onSelect?.(row);
+        }
+      }}
+    >
+      {/* 선택 모드: 체크 인디케이터 */}
+      {selectMode && isSelectable && (
+        <div className="absolute left-1.5 top-1.5 z-10">
+          <div
+            className={cn(
+              "flex h-6 w-6 items-center justify-center rounded-full border-2 transition-colors duration-150",
+              isSelectModeSelected
+                ? "border-primary bg-primary text-primary-foreground"
+                : "border-muted-foreground/40 bg-background"
+            )}
+            onClick={(e) => { e.stopPropagation(); onToggleRowSelect?.(); }}
+          >
+            {isSelectModeSelected && <Check className="h-3.5 w-3.5" />}
+          </div>
+        </div>
+      )}
+
+      {/* 장바구니 목록 모드: 체크박스 + 삭제 */}
+      {!selectMode && isCartListMode && (
+        <div className="absolute right-1 top-1 z-10 flex items-center gap-1">
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={(e) => { e.stopPropagation(); onToggleSelect?.(); }}
+            onClick={(e) => e.stopPropagation()}
+            className="h-4 w-4 rounded border-input"
+          />
+          <button type="button" onClick={handleCartDelete} className="rounded p-0.5 hover:bg-destructive/10">
+            <Trash2 className="h-3.5 w-3.5 text-destructive" />
+          </button>
+        </div>
+      )}
+
+      {/* CSS Grid 기반 셀 렌더링 */}
+      <div className="flex-1 overflow-hidden p-1" style={gridStyle}>
+        {cardGrid.cells.map((cell) => (
+          <div
+            key={cell.id}
+            className="overflow-hidden p-1"
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: alignItemsMap[cell.verticalAlign || "top"],
+              alignItems: justifyMap[cell.align || "left"],
+              gridColumn: `${cell.col} / span ${cell.colSpan || 1}`,
+              gridRow: `${cell.row} / span ${cell.rowSpan || 1}`,
+              border: cardGrid.showCellBorder ? "1px solid hsl(var(--border))" : "none",
+            }}
+          >
+            {renderCellV2({
+              cell,
+              row,
+              inputValue,
+              isCarted,
+              onInputClick: handleInputClick,
+              onCartAdd: handleCartAdd,
+              onCartCancel: handleCartCancel,
+              onEnterSelectMode,
+              onActionButtonClick: async (taskPreset, actionRow, buttonConfig) => {
+                const cfg = buttonConfig as Record<string, unknown> | undefined;
+                const allActions = (cfg?.__allActions as ActionButtonClickAction[] | undefined) || [];
+                const processId = cfg?.__processId as string | number | undefined;
+
+                // 단일 액션 폴백 (기존 구조 호환)
+                const actionsToRun = allActions.length > 0
+                  ? allActions
+                  : cfg?.type
+                    ? [cfg as unknown as ActionButtonClickAction]
+                    : [];
+
+                if (actionsToRun.length === 0) {
+                  if (parentComponentId) {
+                    publish(`__comp_output__${parentComponentId}__action`, { taskPreset, row: actionRow });
+                  }
+                  return;
+                }
+
+                for (const action of actionsToRun) {
+                  if (action.type === "immediate" && action.updates && action.updates.length > 0 && action.targetTable) {
+                    if (action.confirmMessage) {
+                      if (!window.confirm(action.confirmMessage)) return;
+                    }
+                    try {
+                      const rowId = processId ?? actionRow.id ?? actionRow.pk;
+                      if (!rowId) { toast.error("대상 레코드의 ID를 찾을 수 없습니다."); return; }
+                      const lookupValue = action.joinConfig
+                        ? String(actionRow[action.joinConfig.sourceColumn] ?? rowId)
+                        : rowId;
+                      const lookupColumn = action.joinConfig?.targetColumn || "id";
+                      const tasks = action.updates.map((u, idx) => ({
+                        id: `btn-update-${idx}`,
+                        type: "data-update" as const,
+                        targetTable: action.targetTable!,
+                        targetColumn: u.column,
+                        operationType: "assign" as const,
+                        valueSource: "fixed" as const,
+                        fixedValue: u.valueType === "static" ? (u.value ?? "") :
+                                    u.valueType === "currentUser" ? "__CURRENT_USER__" :
+                                    u.valueType === "currentTime" ? "__CURRENT_TIME__" :
+                                    u.valueType === "columnRef" ? String(actionRow[u.value ?? ""] ?? "") :
+                                    (u.value ?? ""),
+                        lookupMode: "manual" as const,
+                        manualItemField: lookupColumn,
+                        manualPkColumn: lookupColumn,
+                      }));
+                      const targetRow = action.joinConfig
+                        ? { ...actionRow, [lookupColumn]: lookupValue }
+                        : processId ? { ...actionRow, id: processId } : actionRow;
+                      const result = await apiClient.post("/pop/execute-action", {
+                        tasks,
+                        data: { items: [targetRow], fieldValues: {} },
+                        mappings: {},
+                      });
+                      if (result.data?.success) {
+                        toast.success(result.data.message || "처리 완료");
+                        onRefresh?.();
+                      } else {
+                        toast.error(result.data?.message || "처리 실패");
+                        return;
+                      }
+                    } catch (err: unknown) {
+                      toast.error(err instanceof Error ? err.message : "처리 중 오류 발생");
+                      return;
+                    }
+                  } else if (action.type === "modal-open" && action.modalScreenId) {
+                    onOpenPopModal?.(action.modalScreenId, actionRow);
+                  }
+                }
+              },
+              packageEntries,
+              inputUnit: inputField?.unit,
+            })}
+          </div>
+        ))}
+      </div>
+
+      {inputField?.enabled && (
+        <NumberInputModal
+          open={isModalOpen}
+          onOpenChange={setIsModalOpen}
+          unit={inputField.unit || "EA"}
+          initialValue={inputValue}
+          initialPackageUnit={packageUnit}
+          maxValue={effectiveMax}
+          packageConfig={packageConfig}
+          showPackageUnit={inputField.showPackageUnit}
+          onConfirm={handleInputConfirm}
+        />
+      )}
+
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Config.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Config.tsx
new file mode 100644
index 00000000..79d8a31e
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Config.tsx
@@ -0,0 +1,2963 @@
+"use client";
+
+/**
+ * pop-card-list-v2 설정 패널 (3탭)
+ *
+ * 탭 1: 데이터 — 테이블/컬럼 선택, 조인, 정렬
+ * 탭 2: 카드 디자인 — 열 수, 시각적 그리드 디자이너, 셀 클릭 시 타입별 상세 인라인
+ * 탭 3: 동작 — 카드 선택 동작, 오버플로우, 카트
+ */
+
+import { useState, useEffect, useRef, useCallback, useMemo, Fragment } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Check, ChevronsUpDown, Plus, Minus, Trash2, ChevronDown, ChevronRight } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import type {
+  PopCardListV2Config,
+  CardGridConfigV2,
+  CardCellDefinitionV2,
+  CardCellType,
+  CardListDataSource,
+  CardColumnJoin,
+  CardSortConfig,
+  V2OverflowConfig,
+  V2CardClickAction,
+  V2CardClickModalConfig,
+  ActionButtonUpdate,
+  TimelineDataSource,
+  StatusValueMapping,
+  TimelineStatusSemantic,
+  SelectModeButtonConfig,
+  ActionButtonDef,
+  ActionButtonShowCondition,
+  ActionButtonClickAction,
+} from "../types";
+import type { ButtonVariant } from "../pop-button";
+import {
+  fetchTableList,
+  fetchTableColumns,
+  type TableInfo,
+  type ColumnInfo,
+} from "../pop-dashboard/utils/dataFetcher";
+
+// ===== Props =====
+
+interface ConfigPanelProps {
+  config: PopCardListV2Config | undefined;
+  onUpdate: (config: PopCardListV2Config) => void;
+}
+
+// ===== 기본 설정값 =====
+
+const V2_DEFAULT_CONFIG: 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",
+};
+
+// ===== 탭 정의 =====
+
+type V2ConfigTab = "data" | "design" | "actions";
+
+const TAB_LABELS: { id: V2ConfigTab; label: string }[] = [
+  { id: "data", label: "데이터" },
+  { id: "design", label: "카드 디자인" },
+  { id: "actions", label: "동작" },
+];
+
+// ===== 셀 타입 라벨 =====
+
+const V2_CELL_TYPE_LABELS: Record<CardCellType, { label: string; group: string }> = {
+  text: { label: "텍스트", group: "기본" },
+  field: { label: "필드 (라벨+값)", group: "기본" },
+  image: { label: "이미지", group: "기본" },
+  badge: { label: "배지", group: "기본" },
+  button: { label: "버튼", group: "동작" },
+  "number-input": { label: "숫자 입력", group: "입력" },
+  "cart-button": { label: "담기 버튼", group: "입력" },
+  "package-summary": { label: "포장 요약", group: "요약" },
+  "status-badge": { label: "상태 배지", group: "표시" },
+  timeline: { label: "타임라인", group: "표시" },
+  "footer-status": { label: "하단 상태", group: "표시" },
+  "action-buttons": { label: "액션 버튼", group: "동작" },
+};
+
+const CELL_TYPE_GROUPS = ["기본", "표시", "입력", "동작", "요약"] as const;
+
+// ===== 그리드 유틸 =====
+
+const parseFr = (v: string): number => {
+  const num = parseFloat(v);
+  return isNaN(num) || num <= 0 ? 1 : num;
+};
+
+const GRID_LIMITS = {
+  cols: { min: 1, max: 6 },
+  rows: { min: 1, max: 6 },
+  gap: { min: 0, max: 16 },
+  minFr: 0.3,
+} as const;
+
+const DEFAULT_ROW_HEIGHT = 32;
+const MIN_ROW_HEIGHT = 24;
+
+const parsePx = (v: string): number => {
+  const num = parseInt(v);
+  return isNaN(num) || num < MIN_ROW_HEIGHT ? DEFAULT_ROW_HEIGHT : num;
+};
+
+const migrateRowHeight = (v: string): string => {
+  if (!v || v.endsWith("fr")) {
+    return `${Math.round(parseFr(v) * DEFAULT_ROW_HEIGHT)}px`;
+  }
+  if (v.endsWith("px")) return v;
+  const num = parseInt(v);
+  return `${isNaN(num) || num < MIN_ROW_HEIGHT ? DEFAULT_ROW_HEIGHT : num}px`;
+};
+
+const shortType = (t: string): string => {
+  const lower = t.toLowerCase();
+  if (lower.includes("character varying") || lower === "varchar") return "varchar";
+  if (lower === "text") return "text";
+  if (lower.includes("timestamp")) return "ts";
+  if (lower === "integer" || lower === "int4") return "int";
+  if (lower === "bigint" || lower === "int8") return "bigint";
+  if (lower === "numeric" || lower === "decimal") return "num";
+  if (lower === "boolean" || lower === "bool") return "bool";
+  if (lower === "date") return "date";
+  if (lower === "jsonb" || lower === "json") return "json";
+  return t.length > 8 ? t.slice(0, 6) + ".." : t;
+};
+
+// ===== 메인 컴포넌트 =====
+
+export function PopCardListV2ConfigPanel({ config, onUpdate }: ConfigPanelProps) {
+  const [tab, setTab] = useState<V2ConfigTab>("data");
+  const [tables, setTables] = useState<TableInfo[]>([]);
+  const [columns, setColumns] = useState<ColumnInfo[]>([]);
+  const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
+
+  const cfg: PopCardListV2Config = {
+    ...V2_DEFAULT_CONFIG,
+    ...config,
+    dataSource: { ...V2_DEFAULT_CONFIG.dataSource, ...config?.dataSource },
+    cardGrid: { ...V2_DEFAULT_CONFIG.cardGrid, ...config?.cardGrid },
+    overflow: { ...V2_DEFAULT_CONFIG.overflow, ...config?.overflow } as V2OverflowConfig,
+  };
+
+  const update = (partial: Partial<PopCardListV2Config>) => {
+    onUpdate({ ...cfg, ...partial });
+  };
+
+  useEffect(() => {
+    fetchTableList()
+      .then(setTables)
+      .catch(() => setTables([]));
+  }, []);
+
+  useEffect(() => {
+    if (!cfg.dataSource.tableName) {
+      setColumns([]);
+      return;
+    }
+    fetchTableColumns(cfg.dataSource.tableName)
+      .then(setColumns)
+      .catch(() => setColumns([]));
+  }, [cfg.dataSource.tableName]);
+
+  useEffect(() => {
+    if (cfg.selectedColumns && cfg.selectedColumns.length > 0) {
+      setSelectedColumns(cfg.selectedColumns);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cfg.dataSource.tableName]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* 탭 바 */}
+      <div className="flex gap-1 rounded-md border bg-muted/30 p-0.5">
+        {TAB_LABELS.map((t) => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className={cn(
+              "flex-1 rounded-sm py-1 text-center text-[10px] font-medium transition-colors",
+              tab === t.id
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* 탭 컨텐츠 */}
+      {tab === "data" && (
+        <TabData
+          cfg={cfg}
+          tables={tables}
+          columns={columns}
+          selectedColumns={selectedColumns}
+          onTableChange={(tableName) => {
+            setSelectedColumns([]);
+            update({
+              dataSource: { ...cfg.dataSource, tableName },
+              selectedColumns: [],
+              cardGrid: { ...cfg.cardGrid, cells: [] },
+            });
+          }}
+          onColumnsChange={(cols) => {
+            setSelectedColumns(cols);
+            update({ selectedColumns: cols });
+          }}
+          onDataSourceChange={(dataSource) => update({ dataSource })}
+          onSortChange={(sort) =>
+            update({ dataSource: { ...cfg.dataSource, sort } })
+          }
+        />
+      )}
+
+      {tab === "design" && (
+        <TabCardDesign
+          cfg={cfg}
+          columns={columns}
+          selectedColumns={selectedColumns}
+          tables={tables}
+          onGridChange={(cardGrid) => update({ cardGrid })}
+          onGridColumnsChange={(gridColumns) => update({ gridColumns })}
+          onCardGapChange={(cardGap) => update({ cardGap })}
+        />
+      )}
+
+      {tab === "actions" && (
+        <TabActions
+          cfg={cfg}
+          onUpdate={update}
+        />
+      )}
+    </div>
+  );
+}
+
+// ===== 탭 1: 데이터 =====
+
+function TabData({
+  cfg,
+  tables,
+  columns,
+  selectedColumns,
+  onTableChange,
+  onColumnsChange,
+  onDataSourceChange,
+  onSortChange,
+}: {
+  cfg: PopCardListV2Config;
+  tables: TableInfo[];
+  columns: ColumnInfo[];
+  selectedColumns: string[];
+  onTableChange: (tableName: string) => void;
+  onColumnsChange: (cols: string[]) => void;
+  onDataSourceChange: (ds: CardListDataSource) => void;
+  onSortChange: (sort: CardSortConfig[] | undefined) => void;
+}) {
+  const [tableOpen, setTableOpen] = useState(false);
+  const ds = cfg.dataSource;
+
+  const selectedDisplay = ds.tableName
+    ? tables.find((t) => t.tableName === ds.tableName)?.displayName || ds.tableName
+    : "";
+
+  const toggleColumn = (colName: string) => {
+    if (selectedColumns.includes(colName)) {
+      onColumnsChange(selectedColumns.filter((c) => c !== colName));
+    } else {
+      onColumnsChange([...selectedColumns, colName]);
+    }
+  };
+
+  const sort = ds.sort?.[0];
+
+  return (
+    <div className="space-y-3">
+      {/* 테이블 선택 */}
+      <div>
+        <Label className="text-xs">데이터 테이블</Label>
+        <Popover open={tableOpen} onOpenChange={setTableOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              role="combobox"
+              aria-expanded={tableOpen}
+              className="mt-1 h-8 w-full justify-between text-xs font-normal"
+            >
+              {ds.tableName ? selectedDisplay : "테이블 검색 / 선택"}
+              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="p-0"
+            style={{ width: "var(--radix-popover-trigger-width)" }}
+            align="start"
+          >
+            <Command>
+              <CommandInput placeholder="테이블명 검색" className="text-xs" />
+              <CommandList>
+                <CommandEmpty className="py-3 text-center text-xs text-muted-foreground">
+                  검색 결과가 없습니다
+                </CommandEmpty>
+                <CommandGroup>
+                  <CommandItem
+                    value="__none__"
+                    onSelect={() => { onTableChange(""); setTableOpen(false); }}
+                    className="text-xs"
+                  >
+                    <Check className={cn("mr-2 h-3 w-3", !ds.tableName ? "opacity-100" : "opacity-0")} />
+                    선택 안 함
+                  </CommandItem>
+                  {tables.map((t) => (
+                    <CommandItem
+                      key={t.tableName}
+                      value={`${t.tableName} ${t.displayName || ""}`}
+                      onSelect={() => { onTableChange(t.tableName); setTableOpen(false); }}
+                      className="text-xs"
+                    >
+                      <Check className={cn("mr-2 h-3 w-3", ds.tableName === t.tableName ? "opacity-100" : "opacity-0")} />
+                      <div className="flex flex-col">
+                        <span>{t.displayName || t.tableName}</span>
+                        {t.displayName && t.displayName !== t.tableName && (
+                          <span className="text-[10px] text-muted-foreground">{t.tableName}</span>
+                        )}
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* 컬럼 선택 */}
+      {ds.tableName && columns.length > 0 && (
+        <div>
+          <Label className="text-xs">
+            사용할 컬럼 ({selectedColumns.length}개 선택됨)
+          </Label>
+          <div className="mt-1 max-h-[160px] space-y-0.5 overflow-auto rounded border p-1">
+            {columns.map((col) => (
+              <label
+                key={col.name}
+                className="flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted/50"
+              >
+                <input
+                  type="checkbox"
+                  checked={selectedColumns.includes(col.name)}
+                  onChange={() => toggleColumn(col.name)}
+                  className="h-3 w-3"
+                />
+                <span className="text-xs">{col.name}</span>
+                <span className="ml-auto text-[10px] text-muted-foreground">
+                  {shortType(col.type)}
+                </span>
+              </label>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 조인 설정 (접이식) */}
+      {ds.tableName && (
+        <JoinSection
+          dataSource={ds}
+          tables={tables}
+          mainColumns={columns}
+          onChange={onDataSourceChange}
+        />
+      )}
+
+      {/* 정렬 */}
+      {ds.tableName && columns.length > 0 && (
+        <div>
+          <Label className="text-xs">정렬 기준</Label>
+          <div className="mt-1 flex gap-1">
+            <Select
+              value={sort?.column || "__none__"}
+              onValueChange={(v) =>
+                onSortChange(v && v !== "__none__" ? [{ column: v, direction: sort?.direction || "desc" }] : undefined)
+              }
+            >
+              <SelectTrigger className="h-7 flex-1 text-[10px]">
+                <SelectValue placeholder="정렬 컬럼" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
+                {columns.map((c) => (
+                  <SelectItem key={c.name} value={c.name} className="text-[10px]">{c.name}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {sort?.column && (
+              <Select
+                value={sort.direction}
+                onValueChange={(v) =>
+                  onSortChange([{ column: sort.column, direction: v as "asc" | "desc" }])
+                }
+              >
+                <SelectTrigger className="h-7 w-20 text-[10px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="asc" className="text-[10px]">오름차순</SelectItem>
+                  <SelectItem value="desc" className="text-[10px]">내림차순</SelectItem>
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ===== 조인 섹션 =====
+
+function JoinSection({
+  dataSource,
+  tables,
+  mainColumns,
+  onChange,
+}: {
+  dataSource: CardListDataSource;
+  tables: TableInfo[];
+  mainColumns: ColumnInfo[];
+  onChange: (ds: CardListDataSource) => void;
+}) {
+  const [expanded, setExpanded] = useState((dataSource.joins?.length || 0) > 0);
+  const joins = dataSource.joins || [];
+
+  const addJoin = () => {
+    const newJoin: CardColumnJoin = {
+      targetTable: "",
+      joinType: "LEFT",
+      sourceColumn: "",
+      targetColumn: "",
+    };
+    onChange({ ...dataSource, joins: [...joins, newJoin] });
+    setExpanded(true);
+  };
+
+  const removeJoin = (index: number) => {
+    onChange({ ...dataSource, joins: joins.filter((_, i) => i !== index) });
+  };
+
+  const updateJoin = (index: number, partial: Partial<CardColumnJoin>) => {
+    onChange({
+      ...dataSource,
+      joins: joins.map((j, i) => (i === index ? { ...j, ...partial } : j)),
+    });
+  };
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center gap-1 text-xs font-medium"
+      >
+        <span className={cn("transition-transform", expanded && "rotate-90")}>
+          {">"}
+        </span>
+        조인 설정 ({joins.length}개)
+      </button>
+      {expanded && (
+        <div className="mt-2 space-y-2">
+          <p className="text-[10px] text-muted-foreground">
+            다른 테이블의 데이터를 연결하여 함께 표시 (선택사항)
+          </p>
+          {joins.map((join, i) => (
+            <JoinItemV2
+              key={i}
+              join={join}
+              index={i}
+              tables={tables}
+              mainColumns={mainColumns}
+              mainTableName={dataSource.tableName}
+              onUpdate={(partial) => updateJoin(i, partial)}
+              onRemove={() => removeJoin(i)}
+            />
+          ))}
+          <Button variant="outline" size="sm" onClick={addJoin} className="h-7 w-full text-xs">
+            <Plus className="mr-1 h-3 w-3" />
+            테이블 연결 추가
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ===== 조인 아이템 =====
+
+function JoinItemV2({
+  join,
+  index,
+  tables,
+  mainColumns,
+  mainTableName,
+  onUpdate,
+  onRemove,
+}: {
+  join: CardColumnJoin;
+  index: number;
+  tables: TableInfo[];
+  mainColumns: ColumnInfo[];
+  mainTableName: string;
+  onUpdate: (partial: Partial<CardColumnJoin>) => void;
+  onRemove: () => void;
+}) {
+  const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
+  const [tableOpen, setTableOpen] = useState(false);
+
+  useEffect(() => {
+    if (!join.targetTable) { setTargetColumns([]); return; }
+    fetchTableColumns(join.targetTable)
+      .then(setTargetColumns)
+      .catch(() => setTargetColumns([]));
+  }, [join.targetTable]);
+
+  const autoMatches = mainColumns.filter((mc) =>
+    targetColumns.some((tc) => tc.name === mc.name && tc.type === mc.type)
+  );
+
+  const selectableTables = tables.filter((t) => t.tableName !== mainTableName);
+  const hasJoinCondition = join.sourceColumn !== "" && join.targetColumn !== "";
+  const selectedTargetCols = join.selectedTargetColumns || [];
+  const pickableTargetCols = targetColumns.filter((tc) => tc.name !== join.targetColumn);
+
+  const toggleTargetCol = (colName: string) => {
+    const next = selectedTargetCols.includes(colName)
+      ? selectedTargetCols.filter((c) => c !== colName)
+      : [...selectedTargetCols, colName];
+    onUpdate({ selectedTargetColumns: next });
+  };
+
+  return (
+    <div className="space-y-2 rounded border p-2">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-medium">연결 #{index + 1}</span>
+        <Button variant="ghost" size="sm" onClick={onRemove} className="h-5 w-5 p-0">
+          <Trash2 className="h-3 w-3 text-destructive" />
+        </Button>
+      </div>
+
+      {/* 대상 테이블 */}
+      <Popover open={tableOpen} onOpenChange={setTableOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" role="combobox" className="h-7 w-full justify-between text-[10px]">
+            {join.targetTable || "테이블 선택..."}
+            <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+          <Command>
+            <CommandInput placeholder="테이블 검색..." className="text-[10px]" />
+            <CommandList>
+              <CommandEmpty className="py-2 text-center text-[10px]">없음</CommandEmpty>
+              <CommandGroup>
+                {selectableTables.map((t) => (
+                  <CommandItem
+                    key={t.tableName}
+                    value={`${t.tableName} ${t.displayName || ""}`}
+                    onSelect={() => {
+                      onUpdate({ targetTable: t.tableName, sourceColumn: "", targetColumn: "", selectedTargetColumns: [] });
+                      setTableOpen(false);
+                    }}
+                    className="text-[10px]"
+                  >
+                    <Check className={cn("mr-1 h-3 w-3", join.targetTable === t.tableName ? "opacity-100" : "opacity-0")} />
+                    {t.tableName}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* 자동 매칭 */}
+      {join.targetTable && autoMatches.length > 0 && (
+        <div className="space-y-0.5">
+          <span className="text-[9px] text-muted-foreground">연결 조건</span>
+          {autoMatches.map((mc) => {
+            const isSelected = join.sourceColumn === mc.name && join.targetColumn === mc.name;
+            return (
+              <button
+                key={mc.name}
+                type="button"
+                onClick={() => {
+                  if (isSelected) onUpdate({ sourceColumn: "", targetColumn: "" });
+                  else onUpdate({ sourceColumn: mc.name, targetColumn: mc.name });
+                }}
+                className={cn(
+                  "flex w-full items-center gap-1 rounded px-1.5 py-0.5 text-[10px] transition-colors",
+                  isSelected ? "bg-primary/10 text-primary" : "hover:bg-muted"
+                )}
+              >
+                <div className={cn(
+                  "flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border",
+                  isSelected ? "border-primary bg-primary" : "border-muted-foreground/30"
+                )}>
+                  {isSelected && <Check className="h-2.5 w-2.5 text-primary-foreground" />}
+                </div>
+                <span className="flex-1 truncate">{mc.name}</span>
+                <span className="text-[8px] text-muted-foreground">{shortType(mc.type)}</span>
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 수동 매칭 */}
+      {join.targetTable && autoMatches.length === 0 && (
+        <div className="flex items-center gap-1">
+          <Select value={join.sourceColumn || ""} onValueChange={(v) => onUpdate({ sourceColumn: v, targetColumn: "" })}>
+            <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="메인" /></SelectTrigger>
+            <SelectContent>
+              {mainColumns.map((mc) => (
+                <SelectItem key={mc.name} value={mc.name} className="text-[10px]">{mc.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-[10px] text-muted-foreground">=</span>
+          <Select value={join.targetColumn || ""} onValueChange={(v) => onUpdate({ targetColumn: v })} disabled={!join.sourceColumn}>
+            <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="대상" /></SelectTrigger>
+            <SelectContent>
+              {targetColumns.map((tc) => (
+                <SelectItem key={tc.name} value={tc.name} className="text-[10px]">{tc.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
+      {/* 표시 방식 */}
+      {join.targetTable && (
+        <div className="flex gap-1">
+          {(["LEFT", "INNER"] as const).map((jt) => (
+            <button
+              key={jt}
+              type="button"
+              onClick={() => onUpdate({ joinType: jt })}
+              className={cn(
+                "flex-1 rounded border px-2 py-1 text-[10px] transition-colors",
+                join.joinType === jt ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-muted"
+              )}
+            >
+              {jt === "LEFT" ? "빈칸 허용" : "일치만"}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* 가져올 컬럼 */}
+      {hasJoinCondition && pickableTargetCols.length > 0 && (
+        <div>
+          <span className="text-[9px] text-muted-foreground">가져올 컬럼 ({selectedTargetCols.length}개)</span>
+          <div className="mt-1 max-h-[100px] space-y-0.5 overflow-y-auto">
+            {pickableTargetCols.map((tc) => {
+              const isChecked = selectedTargetCols.includes(tc.name);
+              return (
+                <button
+                  key={tc.name}
+                  type="button"
+                  onClick={() => toggleTargetCol(tc.name)}
+                  className={cn(
+                    "flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-[10px] transition-colors",
+                    isChecked ? "bg-primary/10 text-primary" : "hover:bg-muted"
+                  )}
+                >
+                  <div className={cn(
+                    "flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border",
+                    isChecked ? "border-primary bg-primary" : "border-muted-foreground/30"
+                  )}>
+                    {isChecked && <Check className="h-2.5 w-2.5 text-primary-foreground" />}
+                  </div>
+                  <span className="flex-1 truncate">{tc.name}</span>
+                  <span className="text-[8px] text-muted-foreground">{shortType(tc.type)}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ===== 탭 2: 카드 디자인 =====
+
+function TabCardDesign({
+  cfg,
+  columns,
+  selectedColumns,
+  tables,
+  onGridChange,
+  onGridColumnsChange,
+  onCardGapChange,
+}: {
+  cfg: PopCardListV2Config;
+  columns: ColumnInfo[];
+  selectedColumns: string[];
+  tables: TableInfo[];
+  onGridChange: (g: CardGridConfigV2) => void;
+  onGridColumnsChange: (n: number) => void;
+  onCardGapChange: (n: number) => void;
+}) {
+  const availableColumns = columns.filter((c) => selectedColumns.includes(c.name));
+  const joinedColumns = (cfg.dataSource.joins || []).flatMap((j) =>
+    (j.selectedTargetColumns || []).map((col) => ({
+      name: `${j.targetTable}.${col}`,
+      displayName: col,
+      sourceTable: j.targetTable,
+    }))
+  );
+  const allColumnOptions = [
+    ...availableColumns.map((c) => ({ value: c.name, label: c.name })),
+    ...joinedColumns.map((c) => ({ value: c.name, label: `${c.displayName} (${c.sourceTable})` })),
+  ];
+
+  const [selectedCellId, setSelectedCellId] = useState<string | null>(null);
+  const [mergeMode, setMergeMode] = useState(false);
+  const [mergeCellKeys, setMergeCellKeys] = useState<Set<string>>(new Set());
+  const widthBarRef = useRef<HTMLDivElement>(null);
+  const gridRef = useRef<HTMLDivElement>(null);
+  const gridConfigRef = useRef<CardGridConfigV2 | undefined>(undefined);
+  const isDraggingRef = useRef(false);
+  const [gridLines, setGridLines] = useState<{ colLines: number[]; rowLines: number[] }>({ colLines: [], rowLines: [] });
+
+  // 그리드 정규화
+  const rawGrid = cfg.cardGrid;
+  const migratedRowHeights = (rawGrid.rowHeights || Array(rawGrid.rows).fill(`${DEFAULT_ROW_HEIGHT}px`)).map(migrateRowHeight);
+  const safeColWidths = rawGrid.colWidths || [];
+  const normalizedColWidths = safeColWidths.length >= rawGrid.cols
+    ? safeColWidths.slice(0, rawGrid.cols)
+    : [...safeColWidths, ...Array(rawGrid.cols - safeColWidths.length).fill("1fr")];
+  const normalizedRowHeights = migratedRowHeights.length >= rawGrid.rows
+    ? migratedRowHeights.slice(0, rawGrid.rows)
+    : [...migratedRowHeights, ...Array(rawGrid.rows - migratedRowHeights.length).fill(`${DEFAULT_ROW_HEIGHT}px`)];
+
+  const grid: CardGridConfigV2 = {
+    ...rawGrid,
+    colWidths: normalizedColWidths,
+    rowHeights: normalizedRowHeights,
+  };
+  gridConfigRef.current = grid;
+
+  const updateGrid = (partial: Partial<CardGridConfigV2>) => {
+    onGridChange({ ...grid, ...partial });
+  };
+
+  // 점유 맵
+  const buildOccupationMap = (): Record<string, string> => {
+    const map: Record<string, string> = {};
+    grid.cells.forEach((cell) => {
+      const rs = Number(cell.rowSpan) || 1;
+      const cs = Number(cell.colSpan) || 1;
+      for (let r = cell.row; r < cell.row + rs; r++) {
+        for (let c = cell.col; c < cell.col + cs; c++) {
+          map[`${r}-${c}`] = cell.id;
+        }
+      }
+    });
+    return map;
+  };
+  const occupationMap = buildOccupationMap();
+  const getCellByOrigin = (r: number, c: number) => grid.cells.find((cell) => cell.row === r && cell.col === c);
+
+  // 셀 CRUD
+  const addCellAt = (row: number, col: number) => {
+    const newCell: CardCellDefinitionV2 = {
+      id: `cell-${Date.now()}`,
+      row, col, rowSpan: 1, colSpan: 1,
+      type: "text",
+    };
+    updateGrid({ cells: [...grid.cells, newCell] });
+    setSelectedCellId(newCell.id);
+  };
+
+  const removeCell = (id: string) => {
+    updateGrid({ cells: grid.cells.filter((c) => c.id !== id) });
+    if (selectedCellId === id) setSelectedCellId(null);
+  };
+
+  const updateCell = (id: string, partial: Partial<CardCellDefinitionV2>) => {
+    updateGrid({ cells: grid.cells.map((c) => (c.id === id ? { ...c, ...partial } : c)) });
+  };
+
+  // 병합
+  const toggleMergeMode = () => {
+    if (mergeMode) { setMergeMode(false); setMergeCellKeys(new Set()); }
+    else { setMergeMode(true); setMergeCellKeys(new Set()); setSelectedCellId(null); }
+  };
+
+  const toggleMergeCell = (row: number, col: number) => {
+    const key = `${row}-${col}`;
+    if (occupationMap[key]) return;
+    const next = new Set(mergeCellKeys);
+    if (next.has(key)) next.delete(key); else next.add(key);
+    setMergeCellKeys(next);
+  };
+
+  const validateMerge = (): { minRow: number; maxRow: number; minCol: number; maxCol: number } | null => {
+    if (mergeCellKeys.size < 2) return null;
+    const positions = Array.from(mergeCellKeys).map((k) => { const [r, c] = k.split("-").map(Number); return { row: r, col: c }; });
+    const minRow = Math.min(...positions.map((p) => p.row));
+    const maxRow = Math.max(...positions.map((p) => p.row));
+    const minCol = Math.min(...positions.map((p) => p.col));
+    const maxCol = Math.max(...positions.map((p) => p.col));
+    if (mergeCellKeys.size !== (maxRow - minRow + 1) * (maxCol - minCol + 1)) return null;
+    for (const key of mergeCellKeys) { if (occupationMap[key]) return null; }
+    return { minRow, maxRow, minCol, maxCol };
+  };
+
+  const confirmMerge = () => {
+    const bbox = validateMerge();
+    if (!bbox) return;
+    const newCell: CardCellDefinitionV2 = {
+      id: `cell-${Date.now()}`,
+      row: bbox.minRow, col: bbox.minCol,
+      rowSpan: bbox.maxRow - bbox.minRow + 1,
+      colSpan: bbox.maxCol - bbox.minCol + 1,
+      type: "text",
+    };
+    updateGrid({ cells: [...grid.cells, newCell] });
+    setSelectedCellId(newCell.id);
+    setMergeMode(false);
+    setMergeCellKeys(new Set());
+  };
+
+  // 셀 분할
+  const splitCellHorizontally = (cell: CardCellDefinitionV2) => {
+    const cs = Number(cell.colSpan) || 1;
+    const rs = Number(cell.rowSpan) || 1;
+    if (cs >= 2) {
+      const leftSpan = Math.ceil(cs / 2);
+      const newCell: CardCellDefinitionV2 = { id: `cell-${Date.now()}`, row: cell.row, col: cell.col + leftSpan, rowSpan: rs, colSpan: cs - leftSpan, type: "text" };
+      const updatedCells = grid.cells.map((c) => c.id === cell.id ? { ...c, colSpan: leftSpan } : c);
+      updateGrid({ cells: [...updatedCells, newCell] });
+      setSelectedCellId(newCell.id);
+    } else {
+      if (grid.cols >= GRID_LIMITS.cols.max) return;
+      const insertPos = cell.col + 1;
+      const updatedCells = grid.cells.map((c) => {
+        if (c.id === cell.id) return c;
+        const cEnd = c.col + (Number(c.colSpan) || 1) - 1;
+        if (c.col >= insertPos) return { ...c, col: c.col + 1 };
+        if (cEnd >= insertPos) return { ...c, colSpan: (Number(c.colSpan) || 1) + 1 };
+        return c;
+      });
+      const newCell: CardCellDefinitionV2 = { id: `cell-${Date.now()}`, row: cell.row, col: insertPos, rowSpan: rs, colSpan: 1, type: "text" };
+      const colIdx = cell.col - 1;
+      if (colIdx < 0 || colIdx >= grid.colWidths.length) return;
+      const currentFr = parseFr(grid.colWidths[colIdx]);
+      const halfFr = Math.max(GRID_LIMITS.minFr, currentFr / 2);
+      const frStr = `${Math.round(halfFr * 10) / 10}fr`;
+      const newWidths = [...grid.colWidths];
+      newWidths[colIdx] = frStr;
+      newWidths.splice(colIdx + 1, 0, frStr);
+      updateGrid({ cols: grid.cols + 1, colWidths: newWidths, cells: [...updatedCells, newCell] });
+      setSelectedCellId(newCell.id);
+    }
+  };
+
+  const splitCellVertically = (cell: CardCellDefinitionV2) => {
+    const rs = Number(cell.rowSpan) || 1;
+    const cs = Number(cell.colSpan) || 1;
+    const heights = grid.rowHeights || Array(grid.rows).fill(`${DEFAULT_ROW_HEIGHT}px`);
+    if (rs >= 2) {
+      const topSpan = Math.ceil(rs / 2);
+      const newCell: CardCellDefinitionV2 = { id: `cell-${Date.now()}`, row: cell.row + topSpan, col: cell.col, rowSpan: rs - topSpan, colSpan: cs, type: "text" };
+      const updatedCells = grid.cells.map((c) => c.id === cell.id ? { ...c, rowSpan: topSpan } : c);
+      updateGrid({ cells: [...updatedCells, newCell] });
+      setSelectedCellId(newCell.id);
+    } else {
+      if (grid.rows >= GRID_LIMITS.rows.max) return;
+      const insertPos = cell.row + 1;
+      const updatedCells = grid.cells.map((c) => {
+        if (c.id === cell.id) return c;
+        const cEnd = c.row + (Number(c.rowSpan) || 1) - 1;
+        if (c.row >= insertPos) return { ...c, row: c.row + 1 };
+        if (cEnd >= insertPos) return { ...c, rowSpan: (Number(c.rowSpan) || 1) + 1 };
+        return c;
+      });
+      const newCell: CardCellDefinitionV2 = { id: `cell-${Date.now()}`, row: insertPos, col: cell.col, rowSpan: 1, colSpan: cs, type: "text" };
+      const newHeights = [...heights];
+      newHeights.splice(cell.row - 1 + 1, 0, `${DEFAULT_ROW_HEIGHT}px`);
+      updateGrid({ rows: grid.rows + 1, rowHeights: newHeights, cells: [...updatedCells, newCell] });
+      setSelectedCellId(newCell.id);
+    }
+  };
+
+  // 클릭 핸들러
+  const handleEmptyCellClick = (row: number, col: number) => {
+    if (mergeMode) toggleMergeCell(row, col);
+    else addCellAt(row, col);
+  };
+  const handleCellClick = (cell: CardCellDefinitionV2) => {
+    if (mergeMode) return;
+    setSelectedCellId(selectedCellId === cell.id ? null : cell.id);
+  };
+
+  // 열 너비 드래그
+  const handleColDragStart = useCallback((e: React.MouseEvent, dividerIndex: number) => {
+    e.preventDefault();
+    isDraggingRef.current = true;
+    const startX = e.clientX;
+    const bar = widthBarRef.current;
+    if (!bar) return;
+    const barWidth = bar.offsetWidth;
+    if (barWidth === 0) return;
+    const currentGrid = gridConfigRef.current;
+    if (!currentGrid) return;
+    const startFrs = (currentGrid.colWidths || []).map(parseFr);
+    const totalFr = startFrs.reduce((a, b) => a + b, 0);
+
+    const onMove = (me: MouseEvent) => {
+      const delta = me.clientX - startX;
+      const frDelta = (delta / barWidth) * totalFr;
+      const newFrs = [...startFrs];
+      newFrs[dividerIndex] = Math.max(GRID_LIMITS.minFr, startFrs[dividerIndex] + frDelta);
+      newFrs[dividerIndex + 1] = Math.max(GRID_LIMITS.minFr, startFrs[dividerIndex + 1] - frDelta);
+      onGridChange({ ...currentGrid, colWidths: newFrs.map((fr) => `${Math.round(fr * 10) / 10}fr`) });
+    };
+    const onUp = () => { isDraggingRef.current = false; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [onGridChange]);
+
+  // 행 높이 드래그
+  const handleRowDragStart = useCallback((e: React.MouseEvent, dividerIndex: number) => {
+    e.preventDefault();
+    isDraggingRef.current = true;
+    const startY = e.clientY;
+    const currentGrid = gridConfigRef.current;
+    if (!currentGrid) return;
+    const heights = (currentGrid.rowHeights || Array(currentGrid.rows).fill(`${DEFAULT_ROW_HEIGHT}px`)).map(parsePx);
+    if (dividerIndex < 0 || dividerIndex + 1 >= heights.length) return;
+
+    const onMove = (me: MouseEvent) => {
+      const delta = me.clientY - startY;
+      const newH = [...heights];
+      newH[dividerIndex] = Math.max(MIN_ROW_HEIGHT, heights[dividerIndex] + delta);
+      newH[dividerIndex + 1] = Math.max(MIN_ROW_HEIGHT, heights[dividerIndex + 1] - delta);
+      onGridChange({ ...currentGrid, rowHeights: newH.map((h) => `${Math.round(h)}px`) });
+    };
+    const onUp = () => { isDraggingRef.current = false; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }, [onGridChange]);
+
+  // 내부 셀 경계 드래그
+  useEffect(() => {
+    const gridEl = gridRef.current;
+    if (!gridEl) return;
+    const measure = () => {
+      if (isDraggingRef.current) return;
+      const style = window.getComputedStyle(gridEl);
+      const colSizes = style.gridTemplateColumns.split(" ").map(parseFloat).filter((v) => !isNaN(v));
+      const rowSizes = style.gridTemplateRows.split(" ").map(parseFloat).filter((v) => !isNaN(v));
+      const gapSize = parseFloat(style.gap) || 0;
+      const colLines: number[] = [];
+      let x = 0;
+      for (let i = 0; i < colSizes.length - 1; i++) { x += colSizes[i] + gapSize; colLines.push(x - gapSize / 2); }
+      const rowLines: number[] = [];
+      let y = 0;
+      for (let i = 0; i < rowSizes.length - 1; i++) { y += rowSizes[i] + gapSize; rowLines.push(y - gapSize / 2); }
+      setGridLines({ colLines, rowLines });
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(gridEl);
+    measure();
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [grid.colWidths.join(","), grid.rowHeights?.join(","), grid.gap, grid.cols, grid.rows]);
+
+  const handleInternalColDrag = useCallback((e: React.MouseEvent, lineIdx: number) => {
+    e.preventDefault(); e.stopPropagation();
+    isDraggingRef.current = true;
+    const startX = e.clientX;
+    const gridEl = gridRef.current;
+    if (!gridEl) return;
+    const gridWidth = gridEl.offsetWidth;
+    if (gridWidth === 0) return;
+    const currentGrid = gridConfigRef.current;
+    if (!currentGrid) return;
+    const startFrs = (currentGrid.colWidths || []).map(parseFr);
+    const totalFr = startFrs.reduce((a, b) => a + b, 0);
+    const onMove = (me: MouseEvent) => {
+      const delta = me.clientX - startX;
+      const frDelta = (delta / gridWidth) * totalFr;
+      const newFrs = [...startFrs];
+      newFrs[lineIdx] = Math.max(GRID_LIMITS.minFr, startFrs[lineIdx] + frDelta);
+      newFrs[lineIdx + 1] = Math.max(GRID_LIMITS.minFr, startFrs[lineIdx + 1] - frDelta);
+      onGridChange({ ...currentGrid, colWidths: newFrs.map((fr) => `${Math.round(fr * 10) / 10}fr`) });
+    };
+    const onUp = () => { isDraggingRef.current = false; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+    document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp);
+  }, [onGridChange]);
+
+  const handleInternalRowDrag = useCallback((e: React.MouseEvent, lineIdx: number) => {
+    e.preventDefault(); e.stopPropagation();
+    isDraggingRef.current = true;
+    const startY = e.clientY;
+    const currentGrid = gridConfigRef.current;
+    if (!currentGrid) return;
+    const heights = (currentGrid.rowHeights || Array(currentGrid.rows).fill(`${DEFAULT_ROW_HEIGHT}px`)).map(parsePx);
+    if (lineIdx < 0 || lineIdx + 1 >= heights.length) return;
+    const onMove = (me: MouseEvent) => {
+      const delta = me.clientY - startY;
+      const newH = [...heights];
+      newH[lineIdx] = Math.max(MIN_ROW_HEIGHT, heights[lineIdx] + delta);
+      newH[lineIdx + 1] = Math.max(MIN_ROW_HEIGHT, heights[lineIdx + 1] - delta);
+      onGridChange({ ...currentGrid, rowHeights: newH.map((h) => `${Math.round(h)}px`) });
+    };
+    const onUp = () => { isDraggingRef.current = false; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+    document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp);
+  }, [onGridChange]);
+
+  // 경계선 가시성
+  const isColLineVisible = (lineIdx: number): boolean => {
+    const leftCol = lineIdx + 1, rightCol = lineIdx + 2;
+    for (let r = 1; r <= grid.rows; r++) {
+      const left = occupationMap[`${r}-${leftCol}`], right = occupationMap[`${r}-${rightCol}`];
+      if (left !== right || (!left && !right)) return true;
+    }
+    return false;
+  };
+  const isRowLineVisible = (lineIdx: number): boolean => {
+    const topRow = lineIdx + 1, bottomRow = lineIdx + 2;
+    for (let c = 1; c <= grid.cols; c++) {
+      const top = occupationMap[`${topRow}-${c}`], bottom = occupationMap[`${bottomRow}-${c}`];
+      if (top !== bottom || (!top && !bottom)) return true;
+    }
+    return false;
+  };
+
+  const selectedCell = selectedCellId ? grid.cells.find((c) => c.id === selectedCellId) : null;
+  useEffect(() => {
+    if (selectedCellId && !grid.cells.find((c) => c.id === selectedCellId)) setSelectedCellId(null);
+  }, [grid.cells, selectedCellId]);
+
+  const mergeValid = validateMerge();
+
+  const gridPositions: { row: number; col: number }[] = [];
+  for (let r = 1; r <= grid.rows; r++) {
+    for (let c = 1; c <= grid.cols; c++) {
+      gridPositions.push({ row: r, col: c });
+    }
+  }
+  const rowHeightsArr = grid.rowHeights || Array(grid.rows).fill(`${DEFAULT_ROW_HEIGHT}px`);
+
+  // 바 그룹핑
+  type BarGroup = { startIdx: number; count: number; totalFr: number };
+  const colGroups: BarGroup[] = (() => {
+    const groups: BarGroup[] = [];
+    if (grid.colWidths.length === 0) return groups;
+    let cur: BarGroup = { startIdx: 0, count: 1, totalFr: parseFr(grid.colWidths[0]) };
+    for (let i = 0; i < grid.cols - 1; i++) {
+      if (isColLineVisible(i)) { groups.push(cur); cur = { startIdx: i + 1, count: 1, totalFr: parseFr(grid.colWidths[i + 1]) }; }
+      else { cur.count++; cur.totalFr += parseFr(grid.colWidths[i + 1]); }
+    }
+    groups.push(cur);
+    return groups;
+  })();
+
+  const rowGroups: BarGroup[] = (() => {
+    const groups: BarGroup[] = [];
+    if (rowHeightsArr.length === 0) return groups;
+    let cur: BarGroup = { startIdx: 0, count: 1, totalFr: parsePx(rowHeightsArr[0]) };
+    for (let i = 0; i < grid.rows - 1; i++) {
+      if (isRowLineVisible(i)) { groups.push(cur); cur = { startIdx: i + 1, count: 1, totalFr: parsePx(rowHeightsArr[i + 1]) }; }
+      else { cur.count++; cur.totalFr += parsePx(rowHeightsArr[i + 1]); }
+    }
+    groups.push(cur);
+    return groups;
+  })();
+
+  return (
+    <div className="space-y-2">
+      {/* 카드 배치 */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-1">
+          <span className="text-[9px] text-muted-foreground">열 수</span>
+          <Button variant="ghost" size="sm" onClick={() => onGridColumnsChange(Math.max(1, (cfg.gridColumns || 3) - 1))} className="h-5 w-5 p-0"><Minus className="h-2.5 w-2.5" /></Button>
+          <span className="w-4 text-center text-[10px]">{cfg.gridColumns || 3}</span>
+          <Button variant="ghost" size="sm" onClick={() => onGridColumnsChange(Math.min(6, (cfg.gridColumns || 3) + 1))} className="h-5 w-5 p-0"><Plus className="h-2.5 w-2.5" /></Button>
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="text-[9px] text-muted-foreground">카드 간격</span>
+          <Button variant="ghost" size="sm" onClick={() => onCardGapChange(Math.max(0, (cfg.cardGap || 8) - 4))} className="h-5 w-5 p-0"><Minus className="h-2.5 w-2.5" /></Button>
+          <span className="w-6 text-center text-[9px]">{cfg.cardGap || 8}px</span>
+          <Button variant="ghost" size="sm" onClick={() => onCardGapChange(Math.min(24, (cfg.cardGap || 8) + 4))} className="h-5 w-5 p-0"><Plus className="h-2.5 w-2.5" /></Button>
+        </div>
+      </div>
+
+      {/* 인라인 툴바 */}
+      <div className="flex flex-wrap items-center gap-1.5 rounded border bg-muted/30 px-2 py-1">
+        <button
+          onClick={() => updateGrid({ showCellBorder: !grid.showCellBorder })}
+          className={cn("h-5 rounded border px-1.5 text-[9px] transition-colors", grid.showCellBorder ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-muted-foreground")}
+        >보더</button>
+        <div className="flex items-center gap-0.5">
+          <span className="text-[9px] text-muted-foreground">간격</span>
+          <Button variant="ghost" size="sm" onClick={() => updateGrid({ gap: Math.max(GRID_LIMITS.gap.min, grid.gap - 2) })} disabled={grid.gap <= GRID_LIMITS.gap.min} className="h-5 w-5 p-0"><Minus className="h-2.5 w-2.5" /></Button>
+          <span className="w-6 text-center text-[9px]">{grid.gap}px</span>
+          <Button variant="ghost" size="sm" onClick={() => updateGrid({ gap: Math.min(GRID_LIMITS.gap.max, grid.gap + 2) })} disabled={grid.gap >= GRID_LIMITS.gap.max} className="h-5 w-5 p-0"><Plus className="h-2.5 w-2.5" /></Button>
+        </div>
+        <button onClick={toggleMergeMode} className={cn("h-5 rounded border px-1.5 text-[9px] transition-colors", mergeMode ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-muted-foreground")}>병합</button>
+        <div className="mx-0.5 h-3 w-px bg-border" />
+        <Button variant="outline" size="sm" onClick={() => { if (selectedCell) splitCellHorizontally(selectedCell); }} disabled={!selectedCell || (grid.cols >= GRID_LIMITS.cols.max && (Number(selectedCell?.colSpan) || 1) <= 1)} className="h-5 px-1.5 text-[9px]">칸 나누기</Button>
+        <Button variant="outline" size="sm" onClick={() => { if (selectedCell) splitCellVertically(selectedCell); }} disabled={!selectedCell || (grid.rows >= GRID_LIMITS.rows.max && (Number(selectedCell?.rowSpan) || 1) <= 1)} className="h-5 px-1.5 text-[9px]">줄 나누기</Button>
+      </div>
+
+      {/* 병합 모드 안내 */}
+      {mergeMode && (
+        <div className="flex items-center gap-1 rounded border border-primary/50 bg-primary/5 px-2 py-1">
+          <span className="flex-1 text-[9px] text-primary">
+            {mergeCellKeys.size > 0 ? `${mergeCellKeys.size}칸 선택됨${mergeValid ? " (병합 가능)" : " (직사각형으로 선택)"}` : "빈 셀을 클릭하여 선택"}
+          </span>
+          <Button variant="default" size="sm" onClick={confirmMerge} disabled={!mergeValid} className="h-5 px-2 text-[9px]">확정</Button>
+          <Button variant="ghost" size="sm" onClick={() => { setMergeMode(false); setMergeCellKeys(new Set()); }} className="h-5 px-1.5 text-[9px]">취소</Button>
+        </div>
+      )}
+
+      {/* 열 너비 드래그 바 */}
+      <div className="flex items-center gap-1">
+        <div className="w-4 shrink-0" />
+        <div ref={widthBarRef} className="flex h-5 flex-1 select-none overflow-hidden rounded border">
+          {colGroups.map((group, gi) => (
+            <Fragment key={gi}>
+              <div className="flex items-center justify-center bg-muted/30 text-[7px] text-muted-foreground" style={{ flex: group.totalFr }}>
+                {group.count > 1 ? `${Math.round(group.totalFr * 10) / 10}fr` : grid.colWidths[group.startIdx]}
+              </div>
+              {gi < colGroups.length - 1 && (
+                <div className="w-1 shrink-0 cursor-col-resize bg-border transition-colors hover:bg-primary" onMouseDown={(e) => handleColDragStart(e, group.startIdx + group.count - 1)} />
+              )}
+            </Fragment>
+          ))}
+        </div>
+      </div>
+
+      {/* 행 높이 바 + 그리드 */}
+      <div className="flex gap-1">
+        <div className="flex w-4 shrink-0 select-none flex-col overflow-hidden rounded border">
+          {rowGroups.map((group, gi) => (
+            <Fragment key={gi}>
+              <div className="flex items-center justify-center bg-muted/30 text-[6px] text-muted-foreground" style={{ flex: group.totalFr }}>{Math.round(group.totalFr)}</div>
+              {gi < rowGroups.length - 1 && (
+                <div className="h-1 shrink-0 cursor-row-resize bg-border transition-colors hover:bg-primary" onMouseDown={(e) => handleRowDragStart(e, group.startIdx + group.count - 1)} />
+              )}
+            </Fragment>
+          ))}
+        </div>
+        <div className="relative flex-1">
+          <div
+            ref={gridRef}
+            className="rounded border bg-muted/10 p-0.5"
+            style={{
+              display: "grid",
+              gridTemplateColumns: grid.colWidths.length > 0 ? grid.colWidths.map((w) => `minmax(30px, ${w})`).join(" ") : "1fr",
+              gridTemplateRows: rowHeightsArr.join(" "),
+              gap: `${Number(grid.gap) || 0}px`,
+            }}
+          >
+            {gridPositions.map(({ row, col }) => {
+              const cellAtOrigin = getCellByOrigin(row, col);
+              const occupiedBy = occupationMap[`${row}-${col}`];
+              const isMergeSelected = mergeCellKeys.has(`${row}-${col}`);
+              if (occupiedBy && !cellAtOrigin) return null;
+              if (cellAtOrigin) {
+                const isSelected = selectedCellId === cellAtOrigin.id;
+                return (
+                  <div
+                    key={`${row}-${col}`}
+                    className={cn("flex cursor-pointer items-center justify-center rounded p-0.5 transition-all", isSelected ? "bg-primary/20 ring-2 ring-primary" : "bg-primary/10 hover:bg-primary/15")}
+                    style={{
+                      gridColumn: `${col} / span ${Number(cellAtOrigin.colSpan) || 1}`,
+                      gridRow: `${row} / span ${Number(cellAtOrigin.rowSpan) || 1}`,
+                      border: grid.showCellBorder ? "1px solid hsl(var(--border))" : "none",
+                    }}
+                    onClick={() => handleCellClick(cellAtOrigin)}
+                  >
+                    <div className="flex flex-col items-center gap-0.5 overflow-hidden text-center">
+                      <span className="truncate text-[8px] font-medium text-primary">{cellAtOrigin.columnName || cellAtOrigin.label || "미지정"}</span>
+                      <span className="text-[6px] text-muted-foreground">{V2_CELL_TYPE_LABELS[cellAtOrigin.type]?.label || cellAtOrigin.type}</span>
+                    </div>
+                  </div>
+                );
+              }
+              return (
+                <div
+                  key={`${row}-${col}`}
+                  className={cn(
+                    "flex cursor-pointer items-center justify-center rounded border border-dashed transition-colors",
+                    isMergeSelected ? "border-primary bg-primary/20 text-primary" : mergeMode ? "border-primary/40 text-primary/40 hover:border-primary hover:bg-primary/10" : "border-muted-foreground/30 text-muted-foreground/40 hover:border-primary/50 hover:bg-primary/5"
+                  )}
+                  style={{ gridColumn: `${col} / span 1`, gridRow: `${row} / span 1` }}
+                  onClick={() => handleEmptyCellClick(row, col)}
+                >
+                  {isMergeSelected ? <Check className="h-3 w-3" /> : <Plus className="h-3 w-3" />}
+                </div>
+              );
+            })}
+          </div>
+          {/* 내부 경계 드래그 오버레이 */}
+          <div className="pointer-events-none absolute inset-0" style={{ padding: "2px" }}>
+            {gridLines.colLines.map((x, i) => {
+              if (!isColLineVisible(i)) return null;
+              return <div key={`ch-${i}`} className="pointer-events-auto absolute top-0 bottom-0 z-10 cursor-col-resize transition-colors hover:bg-primary/30" style={{ left: `${x - 3}px`, width: "6px" }} onMouseDown={(e) => handleInternalColDrag(e, i)} />;
+            })}
+            {gridLines.rowLines.map((y, i) => {
+              if (!isRowLineVisible(i)) return null;
+              return <div key={`rh-${i}`} className="pointer-events-auto absolute left-0 right-0 z-10 cursor-row-resize transition-colors hover:bg-primary/30" style={{ top: `${y - 3}px`, height: "6px" }} onMouseDown={(e) => handleInternalRowDrag(e, i)} />;
+            })}
+          </div>
+        </div>
+      </div>
+
+      <p className="text-[8px] text-muted-foreground">
+        {grid.cols}열 x {grid.rows}행 (최대 {GRID_LIMITS.cols.max}x{GRID_LIMITS.rows.max})
+      </p>
+
+      {/* 선택된 셀 설정 패널 */}
+      {selectedCell && !mergeMode && (
+        <CellDetailEditor
+          cell={selectedCell}
+          allCells={grid.cells}
+          allColumnOptions={allColumnOptions}
+          columns={columns}
+          selectedColumns={selectedColumns}
+          tables={tables}
+          dataSource={cfg.dataSource}
+          onUpdate={(partial) => updateCell(selectedCell.id, partial)}
+          onRemove={() => removeCell(selectedCell.id)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ===== 셀 상세 에디터 (타입별 인라인) =====
+
+function CellDetailEditor({
+  cell,
+  allCells,
+  allColumnOptions,
+  columns,
+  selectedColumns,
+  tables,
+  dataSource,
+  onUpdate,
+  onRemove,
+}: {
+  cell: CardCellDefinitionV2;
+  allCells: CardCellDefinitionV2[];
+  allColumnOptions: { value: string; label: string }[];
+  columns: ColumnInfo[];
+  selectedColumns: string[];
+  tables: TableInfo[];
+  dataSource: CardListDataSource;
+  onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
+  onRemove: () => void;
+}) {
+  const availableTableOptions = useMemo(() => {
+    const opts: { value: string; label: string }[] = [];
+    if (dataSource.tableName) {
+      opts.push({ value: dataSource.tableName, label: `${dataSource.tableName} (메인)` });
+    }
+    for (const j of dataSource.joins || []) {
+      if (j.targetTable) {
+        opts.push({ value: j.targetTable, label: `${j.targetTable} (조인)` });
+      }
+    }
+    const added = new Set(opts.map((o) => o.value));
+    for (const c of allCells) {
+      const pt = c.timelineSource?.processTable;
+      if (pt && !added.has(pt)) {
+        opts.push({ value: pt, label: `${pt} (타임라인)` });
+        added.add(pt);
+      }
+    }
+    return opts;
+  }, [dataSource, allCells]);
+
+  return (
+    <div className="space-y-2 rounded border bg-muted/20 p-2">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-medium">
+          셀 (행{cell.row} 열{cell.col}
+          {((Number(cell.colSpan) || 1) > 1 || (Number(cell.rowSpan) || 1) > 1) && `, ${Number(cell.colSpan) || 1}x${Number(cell.rowSpan) || 1}`})
+        </span>
+        <Button variant="ghost" size="sm" onClick={onRemove} className="h-5 w-5 p-0">
+          <Trash2 className="h-3 w-3 text-destructive" />
+        </Button>
+      </div>
+
+      {/* 컬럼 + 타입 */}
+      <div className="flex gap-1">
+        {cell.type !== "action-buttons" && (
+          <Select value={cell.columnName || "none"} onValueChange={(v) => onUpdate({ columnName: v === "none" ? "" : v })}>
+            <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none" className="text-[10px]">미지정</SelectItem>
+              {allColumnOptions.map((o) => (
+                <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        <Select value={cell.type} onValueChange={(v) => onUpdate({ type: v as CardCellType })}>
+          <SelectTrigger className={cn("h-7 text-[10px]", cell.type === "action-buttons" ? "flex-1" : "w-24")}><SelectValue /></SelectTrigger>
+          <SelectContent>
+            {CELL_TYPE_GROUPS.map((group) => {
+              const types = (Object.entries(V2_CELL_TYPE_LABELS) as [CardCellType, { label: string; group: string }][]).filter(([, v]) => v.group === group);
+              if (types.length === 0) return null;
+              return (
+                <Fragment key={group}>
+                  <SelectItem value={`__group_${group}__`} disabled className="text-[8px] font-medium text-muted-foreground">{group}</SelectItem>
+                  {types.map(([key, v]) => (
+                    <SelectItem key={key} value={key} className="text-[10px]">{v.label}</SelectItem>
+                  ))}
+                </Fragment>
+              );
+            })}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 라벨 + 위치 */}
+      <div className="flex gap-1">
+        <Input value={cell.label || ""} onChange={(e) => onUpdate({ label: e.target.value })} placeholder="라벨 (선택)" className="h-7 flex-1 text-[10px]" />
+        <Select value={cell.labelPosition || "top"} onValueChange={(v) => onUpdate({ labelPosition: v as "top" | "left" })}>
+          <SelectTrigger className="h-7 w-16 text-[10px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="top" className="text-[10px]">위</SelectItem>
+            <SelectItem value="left" className="text-[10px]">왼쪽</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 크기 + 정렬 */}
+      <div className="flex gap-1">
+        <Select value={cell.fontSize || "md"} onValueChange={(v) => onUpdate({ fontSize: v as CardCellDefinitionV2["fontSize"] })}>
+          <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="xs" className="text-[10px]">아주 작게</SelectItem>
+            <SelectItem value="sm" className="text-[10px]">작게</SelectItem>
+            <SelectItem value="md" className="text-[10px]">보통</SelectItem>
+            <SelectItem value="lg" className="text-[10px]">크게</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={cell.align || "left"} onValueChange={(v) => onUpdate({ align: v as CardCellDefinitionV2["align"] })}>
+          <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left" className="text-[10px]">좌측</SelectItem>
+            <SelectItem value="center" className="text-[10px]">중앙</SelectItem>
+            <SelectItem value="right" className="text-[10px]">우측</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={cell.verticalAlign || "top"} onValueChange={(v) => onUpdate({ verticalAlign: v as CardCellDefinitionV2["verticalAlign"] })}>
+          <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="top" className="text-[10px]">상단</SelectItem>
+            <SelectItem value="middle" className="text-[10px]">중간</SelectItem>
+            <SelectItem value="bottom" className="text-[10px]">하단</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 타입별 상세 설정 */}
+      {cell.type === "status-badge" && <StatusMappingEditor cell={cell} allCells={allCells} onUpdate={onUpdate} />}
+      {cell.type === "timeline" && <TimelineConfigEditor cell={cell} allColumnOptions={allColumnOptions} tables={tables} onUpdate={onUpdate} />}
+      {cell.type === "action-buttons" && <ActionButtonsEditor cell={cell} allCells={allCells} allColumnOptions={allColumnOptions} availableTableOptions={availableTableOptions} onUpdate={onUpdate} />}
+      {cell.type === "footer-status" && <FooterStatusEditor cell={cell} allColumnOptions={allColumnOptions} onUpdate={onUpdate} />}
+      {cell.type === "field" && <FieldConfigEditor cell={cell} allColumnOptions={allColumnOptions} onUpdate={onUpdate} />}
+      {cell.type === "number-input" && (
+        <div className="space-y-1">
+          <span className="text-[9px] font-medium text-muted-foreground">숫자 입력 설정</span>
+          <div className="flex gap-1">
+            <Input value={cell.inputUnit || ""} onChange={(e) => onUpdate({ inputUnit: e.target.value })} placeholder="단위 (EA)" className="h-7 flex-1 text-[10px]" />
+            <Select value={cell.limitColumn || "__none__"} onValueChange={(v) => onUpdate({ limitColumn: v === "__none__" ? undefined : v })}>
+              <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="제한 컬럼" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
+                {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+      {cell.type === "cart-button" && (
+        <div className="space-y-1">
+          <span className="text-[9px] font-medium text-muted-foreground">담기 버튼 설정</span>
+          <div className="flex gap-1">
+            <Input value={cell.cartLabel || ""} onChange={(e) => onUpdate({ cartLabel: e.target.value })} placeholder="담기" className="h-7 flex-1 text-[10px]" />
+            <Input value={cell.cartCancelLabel || ""} onChange={(e) => onUpdate({ cartCancelLabel: e.target.value })} placeholder="취소" className="h-7 flex-1 text-[10px]" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ===== 상태 배지 매핑 에디터 =====
+
+const SEMANTIC_COLORS: Record<string, string> = {
+  pending: "#64748b", active: "#3b82f6", done: "#10b981",
+};
+
+function StatusMappingEditor({
+  cell,
+  allCells,
+  onUpdate,
+}: {
+  cell: CardCellDefinitionV2;
+  allCells: CardCellDefinitionV2[];
+  onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
+}) {
+  const statusMap = cell.statusMap || [];
+
+  const timelineCell = allCells.find(
+    (c) => c.type === "timeline" && c.timelineSource?.statusMappings?.length,
+  );
+  const hasTimeline = !!timelineCell;
+
+  const loadFromTimeline = () => {
+    const src = timelineCell?.timelineSource;
+    if (!src?.statusMappings) return;
+    const partial: Partial<CardCellDefinitionV2> = {
+      statusMap: src.statusMappings.map((m) => ({
+        value: m.dbValue,
+        label: m.label,
+        color: SEMANTIC_COLORS[m.semantic] || "#6b7280",
+      })),
+    };
+    if (src.statusColumn) {
+      partial.column = src.statusColumn;
+    }
+    onUpdate(partial);
+  };
+
+  const addMapping = () => {
+    onUpdate({ statusMap: [...statusMap, { value: "", label: "", color: "#6b7280" }] });
+  };
+
+  const updateMapping = (index: number, partial: Partial<{ value: string; label: string; color: string }>) => {
+    onUpdate({ statusMap: statusMap.map((m, i) => (i === index ? { ...m, ...partial } : m)) });
+  };
+
+  const removeMapping = (index: number) => {
+    onUpdate({ statusMap: statusMap.filter((_, i) => i !== index) });
+  };
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <span className="text-[9px] font-medium text-muted-foreground">상태값-색상 매핑</span>
+        <div className="flex gap-1">
+          {hasTimeline && (
+            <Button variant="ghost" size="sm" onClick={loadFromTimeline} className="h-5 px-1.5 text-[9px]">
+              타임라인 연동
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={addMapping} className="h-5 px-1.5 text-[9px]">
+            <Plus className="mr-0.5 h-3 w-3" />추가
+          </Button>
+        </div>
+      </div>
+      {statusMap.map((m, i) => (
+        <div key={i} className="flex items-center gap-1">
+          <Input value={m.value} onChange={(e) => updateMapping(i, { value: e.target.value })} placeholder="값" className="h-6 flex-1 text-[10px]" />
+          <Input value={m.label} onChange={(e) => updateMapping(i, { label: e.target.value })} placeholder="라벨" className="h-6 flex-1 text-[10px]" />
+          <input type="color" value={m.color} onChange={(e) => updateMapping(i, { color: e.target.value })} className="h-6 w-8 cursor-pointer rounded border" />
+          <Button variant="ghost" size="sm" onClick={() => removeMapping(i)} className="h-5 w-5 p-0">
+            <Trash2 className="h-3 w-3 text-destructive" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ===== 타임라인 설정 =====
+
+function TimelineConfigEditor({
+  cell,
+  allColumnOptions,
+  tables,
+  onUpdate,
+}: {
+  cell: CardCellDefinitionV2;
+  allColumnOptions: { value: string; label: string }[];
+  tables: TableInfo[];
+  onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
+}) {
+  const src = cell.timelineSource || { processTable: "", foreignKey: "", seqColumn: "", nameColumn: "", statusColumn: "" };
+  const [processColumns, setProcessColumns] = useState<ColumnInfo[]>([]);
+  const [tableOpen, setTableOpen] = useState(false);
+
+  useEffect(() => {
+    if (!src.processTable) { setProcessColumns([]); return; }
+    fetchTableColumns(src.processTable)
+      .then(setProcessColumns)
+      .catch(() => setProcessColumns([]));
+  }, [src.processTable]);
+
+  const updateSource = (partial: Partial<TimelineDataSource>) => {
+    onUpdate({ timelineSource: { ...src, ...partial } });
+  };
+
+  const colOptions = processColumns.map((c) => ({ value: c.name, label: c.name }));
+
+  return (
+    <div className="space-y-2">
+      <span className="text-[9px] font-medium text-muted-foreground">하위 데이터 소스</span>
+
+      {/* 하위 테이블 선택 */}
+      <div>
+        <Label className="text-[9px] text-muted-foreground">하위 테이블</Label>
+        <Popover open={tableOpen} onOpenChange={setTableOpen}>
+          <PopoverTrigger asChild>
+            <Button variant="outline" role="combobox" className="mt-0.5 h-7 w-full justify-between text-[10px] font-normal">
+              {src.processTable || "테이블 선택"}
+              <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="p-0" style={{ width: "var(--radix-popover-trigger-width)" }} align="start">
+            <Command>
+              <CommandInput placeholder="테이블 검색..." className="text-[10px]" />
+              <CommandList>
+                <CommandEmpty className="text-[10px]">테이블을 찾을 수 없습니다.</CommandEmpty>
+                <CommandGroup>
+                  {tables.map((t) => (
+                    <CommandItem
+                      key={t.tableName}
+                      value={`${t.tableName} ${t.displayName || ""}`}
+                      onSelect={() => {
+                        updateSource({ processTable: t.tableName, foreignKey: "", seqColumn: "", nameColumn: "", statusColumn: "" });
+                        setTableOpen(false);
+                      }}
+                      className="text-[10px]"
+                    >
+                      <Check className={cn("mr-1 h-3 w-3", src.processTable === t.tableName ? "opacity-100" : "opacity-0")} />
+                      {t.displayName || t.tableName}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* 컬럼 매핑 (하위 테이블 선택 후) */}
+      {src.processTable && processColumns.length > 0 && (
+        <div className="space-y-1">
+          <Label className="text-[9px] text-muted-foreground">컬럼 매핑</Label>
+          <div className="grid grid-cols-2 gap-1">
+            <div>
+              <span className="text-[8px] text-muted-foreground">연결 FK</span>
+              <Select value={src.foreignKey || "__none__"} onValueChange={(v) => updateSource({ foreignKey: v === "__none__" ? "" : v })}>
+                <SelectTrigger className="h-6 text-[9px]"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">미선택</SelectItem>
+                  {colOptions.map((c) => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <span className="text-[8px] text-muted-foreground">순서</span>
+              <Select value={src.seqColumn || "__none__"} onValueChange={(v) => updateSource({ seqColumn: v === "__none__" ? "" : v })}>
+                <SelectTrigger className="h-6 text-[9px]"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">미선택</SelectItem>
+                  {colOptions.map((c) => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <span className="text-[8px] text-muted-foreground">표시명</span>
+              <Select value={src.nameColumn || "__none__"} onValueChange={(v) => updateSource({ nameColumn: v === "__none__" ? "" : v })}>
+                <SelectTrigger className="h-6 text-[9px]"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">미선택</SelectItem>
+                  {colOptions.map((c) => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <span className="text-[8px] text-muted-foreground">상태</span>
+              <Select value={src.statusColumn || "__none__"} onValueChange={(v) => updateSource({ statusColumn: v === "__none__" ? "" : v })}>
+                <SelectTrigger className="h-6 text-[9px]"><SelectValue placeholder="선택" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none__">미선택</SelectItem>
+                  {colOptions.map((c) => <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 상태 값 매핑 (동적 배열) */}
+      {src.processTable && src.statusColumn && (
+        <StatusMappingsEditor
+          mappings={src.statusMappings || []}
+          onChange={(mappings) => updateSource({ statusMappings: mappings })}
+        />
+      )}
+
+      {/* 구분선 */}
+      <div className="border-t pt-2">
+        <span className="text-[9px] font-medium text-muted-foreground">표시 옵션</span>
+      </div>
+
+      <div className="flex items-center gap-1">
+        <span className="w-20 shrink-0 text-[9px] text-muted-foreground">최대 표시 수</span>
+        <Input
+          type="number"
+          min={3}
+          max={10}
+          value={cell.visibleCount || 5}
+          onChange={(e) => onUpdate({ visibleCount: parseInt(e.target.value) || 5 })}
+          className="h-7 w-16 text-[10px]"
+        />
+        <Select
+          value={cell.timelinePriority || "before"}
+          onValueChange={(v) => onUpdate({ timelinePriority: v as "before" | "after" })}
+        >
+          <SelectTrigger className="h-7 w-[72px] text-[10px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="before">전 우선</SelectItem>
+            <SelectItem value="after">후 우선</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex items-center gap-1">
+        <Label className="w-20 shrink-0 text-[9px] text-muted-foreground">현재 항목 강조</Label>
+        <Switch
+          checked={cell.currentHighlight !== false}
+          onCheckedChange={(v) => onUpdate({ currentHighlight: v })}
+        />
+      </div>
+      <div className="flex items-center gap-1">
+        <Label className="w-20 shrink-0 text-[9px] text-muted-foreground">클릭시 상세</Label>
+        <Switch
+          checked={cell.showDetailModal !== false}
+          onCheckedChange={(v) => onUpdate({ showDetailModal: v })}
+        />
+        <span className="text-[8px] text-muted-foreground">전체 목록 모달</span>
+      </div>
+    </div>
+  );
+}
+
+// ===== 상태 값 매핑 에디터 (동적 배열) =====
+
+const SEMANTIC_OPTIONS: { value: TimelineStatusSemantic; label: string }[] = [
+  { value: "pending", label: "대기" },
+  { value: "active", label: "진행" },
+  { value: "done", label: "완료" },
+];
+
+const DEFAULT_STATUS_MAPPINGS: StatusValueMapping[] = [
+  { dbValue: "waiting", label: "대기", semantic: "pending" },
+  { dbValue: "accepted", label: "접수", semantic: "active" },
+  { dbValue: "in_progress", label: "진행중", semantic: "active" },
+  { dbValue: "completed", label: "완료", semantic: "done" },
+];
+
+function StatusMappingsEditor({
+  mappings,
+  onChange,
+}: {
+  mappings: StatusValueMapping[];
+  onChange: (mappings: StatusValueMapping[]) => void;
+}) {
+  const addMapping = () => {
+    onChange([...mappings, { dbValue: "", label: "", semantic: "pending" }]);
+  };
+
+  const updateMapping = (index: number, partial: Partial<StatusValueMapping>) => {
+    onChange(mappings.map((m, i) => (i === index ? { ...m, ...partial } : m)));
+  };
+
+  const removeMapping = (index: number) => {
+    onChange(mappings.filter((_, i) => i !== index));
+  };
+
+  const applyDefaults = () => {
+    onChange([...DEFAULT_STATUS_MAPPINGS]);
+  };
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <Label className="text-[9px] text-muted-foreground">상태 값 매핑</Label>
+        <div className="flex gap-1">
+          {mappings.length === 0 && (
+            <Button variant="ghost" size="sm" onClick={applyDefaults} className="h-5 px-1.5 text-[9px]">
+              기본값 적용
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={addMapping} className="h-5 px-1.5 text-[9px]">
+            <Plus className="mr-0.5 h-3 w-3" />추가
+          </Button>
+        </div>
+      </div>
+      <p className="text-[8px] text-muted-foreground">DB 값, 화면 라벨, 의미(대기/진행/완료)를 매핑합니다.</p>
+      {mappings.map((m, i) => (
+        <div key={i} className="flex items-center gap-1">
+          <Input
+            value={m.dbValue}
+            onChange={(e) => updateMapping(i, { dbValue: e.target.value })}
+            placeholder="DB 값"
+            className="h-6 flex-1 text-[10px]"
+          />
+          <Input
+            value={m.label}
+            onChange={(e) => updateMapping(i, { label: e.target.value })}
+            placeholder="라벨"
+            className="h-6 flex-1 text-[10px]"
+          />
+          <Select value={m.semantic} onValueChange={(v) => updateMapping(i, { semantic: v as TimelineStatusSemantic })}>
+            <SelectTrigger className="h-6 w-16 text-[10px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {SEMANTIC_OPTIONS.map((o) => (
+                <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <label className="flex shrink-0 cursor-pointer items-center gap-0.5" title="기준 상태 (타임라인 강조 + 상태 판별 기준)">
+            <input
+              type="radio"
+              name="isDerived"
+              checked={!!m.isDerived}
+              onChange={() => {
+                const wasChecked = !!m.isDerived;
+                onChange(mappings.map((item, idx) => ({
+                  ...item,
+                  isDerived: idx === i && !wasChecked ? true : undefined,
+                })));
+              }}
+              className="h-3 w-3"
+            />
+            <span className="text-[8px] text-muted-foreground">기준</span>
+          </label>
+          <Button variant="ghost" size="sm" onClick={() => removeMapping(i)} className="h-5 w-5 p-0">
+            <Trash2 className="h-3 w-3 text-destructive" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ===== 액션 버튼 에디터 (버튼 중심 구조) =====
+
+function ActionButtonsEditor({
+  cell,
+  allCells,
+  allColumnOptions,
+  availableTableOptions,
+  onUpdate,
+}: {
+  cell: CardCellDefinitionV2;
+  allCells: CardCellDefinitionV2[];
+  allColumnOptions: { value: string; label: string }[];
+  availableTableOptions: { value: string; label: string }[];
+  onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
+}) {
+  const buttons = cell.actionButtons || [];
+
+  const statusOptions = useMemo(() => {
+    const timelineCell = allCells.find(
+      (c) => c.type === "timeline" && c.timelineSource?.statusMappings?.length,
+    );
+    return timelineCell?.timelineSource?.statusMappings?.map((m) => ({
+      value: m.dbValue,
+      label: m.label,
+    })) || [];
+  }, [allCells]);
+
+  const updateButtons = (newBtns: ActionButtonDef[]) => {
+    onUpdate({ actionButtons: newBtns });
+  };
+
+  const addButton = () => {
+    updateButtons([...buttons, {
+      label: "",
+      variant: "default" as ButtonVariant,
+      showCondition: { type: "always" },
+      clickAction: { type: "immediate" },
+    }]);
+  };
+
+  const updateBtn = (idx: number, partial: Partial<ActionButtonDef>) => {
+    updateButtons(buttons.map((b, i) => (i === idx ? { ...b, ...partial } : b)));
+  };
+
+  const removeBtn = (idx: number) => {
+    updateButtons(buttons.filter((_, i) => i !== idx));
+  };
+
+  const updateCondition = (idx: number, partial: Partial<ActionButtonShowCondition>) => {
+    const btn = buttons[idx];
+    updateBtn(idx, { showCondition: { ...(btn.showCondition || { type: "always" }), ...partial } });
+  };
+
+  // 다중 액션 체이닝 지원: clickActions 배열 우선, 없으면 clickAction 단일값 폴백
+  const getActions = (btn: ActionButtonDef): ActionButtonClickAction[] => {
+    if (btn.clickActions && btn.clickActions.length > 0) return btn.clickActions;
+    return [btn.clickAction];
+  };
+
+  const setActions = (bIdx: number, actions: ActionButtonClickAction[]) => {
+    updateBtn(bIdx, { clickActions: actions, clickAction: actions[0] || { type: "immediate" } });
+  };
+
+  const updateAction = (idx: number, aIdx: number, partial: Partial<ActionButtonClickAction>) => {
+    const actions = [...getActions(buttons[idx])];
+    actions[aIdx] = { ...actions[aIdx], ...partial };
+    setActions(idx, actions);
+  };
+
+  const addAction = (bIdx: number) => {
+    const actions = [...getActions(buttons[bIdx]), { type: "immediate" as const }];
+    setActions(bIdx, actions);
+  };
+
+  const removeAction = (bIdx: number, aIdx: number) => {
+    const actions = getActions(buttons[bIdx]).filter((_, i) => i !== aIdx);
+    if (actions.length === 0) actions.push({ type: "immediate" as const });
+    setActions(bIdx, actions);
+  };
+
+  const addActionUpdate = (bIdx: number, aIdx: number) => {
+    const actions = getActions(buttons[bIdx]);
+    const a = actions[aIdx];
+    updateAction(bIdx, aIdx, { updates: [...(a.updates || []), { column: "", value: "", valueType: "static" as const }] });
+  };
+
+  const updateActionUpdate = (bIdx: number, aIdx: number, uIdx: number, partial: Partial<ActionButtonUpdate>) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    updateAction(bIdx, aIdx, { updates: (a.updates || []).map((u, i) => (i === uIdx ? { ...u, ...partial } : u)) });
+  };
+
+  const removeActionUpdate = (bIdx: number, aIdx: number, uIdx: number) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    updateAction(bIdx, aIdx, { updates: (a.updates || []).filter((_, i) => i !== uIdx) });
+  };
+
+  const addSelectModeBtn = (bIdx: number, aIdx: number) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    const smBtns = a.selectModeButtons || [];
+    updateAction(bIdx, aIdx, { selectModeButtons: [...smBtns, { label: "", variant: "outline" as ButtonVariant, clickMode: "cancel-select" as const }] });
+  };
+
+  const updateSelectModeBtn = (bIdx: number, aIdx: number, smIdx: number, partial: Partial<SelectModeButtonConfig>) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    const smBtns = (a.selectModeButtons || []).map((s, i) => (i === smIdx ? { ...s, ...partial } : s));
+    updateAction(bIdx, aIdx, { selectModeButtons: smBtns });
+  };
+
+  const removeSelectModeBtn = (bIdx: number, aIdx: number, smIdx: number) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    updateAction(bIdx, aIdx, { selectModeButtons: (a.selectModeButtons || []).filter((_, i) => i !== smIdx) });
+  };
+
+  const addSmBtnUpdate = (bIdx: number, aIdx: number, smIdx: number) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    const smBtns = [...(a.selectModeButtons || [])];
+    smBtns[smIdx] = { ...smBtns[smIdx], updates: [...(smBtns[smIdx].updates || []), { column: "", value: "", valueType: "static" as const }] };
+    updateAction(bIdx, aIdx, { selectModeButtons: smBtns });
+  };
+
+  const updateSmBtnUpdate = (bIdx: number, aIdx: number, smIdx: number, uIdx: number, partial: Partial<ActionButtonUpdate>) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    const smBtns = [...(a.selectModeButtons || [])];
+    smBtns[smIdx] = { ...smBtns[smIdx], updates: (smBtns[smIdx].updates || []).map((u, i) => (i === uIdx ? { ...u, ...partial } : u)) };
+    updateAction(bIdx, aIdx, { selectModeButtons: smBtns });
+  };
+
+  const removeSmBtnUpdate = (bIdx: number, aIdx: number, smIdx: number, uIdx: number) => {
+    const a = getActions(buttons[bIdx])[aIdx];
+    const smBtns = [...(a.selectModeButtons || [])];
+    smBtns[smIdx] = { ...smBtns[smIdx], updates: (smBtns[smIdx].updates || []).filter((_, i) => i !== uIdx) };
+    updateAction(bIdx, aIdx, { selectModeButtons: smBtns });
+  };
+
+
+  const storageKey = `action-btn-editor-${cell.row}-${cell.col}`;
+
+  const [expandedBtns, setExpandedBtns] = useState<Set<number>>(() => {
+    try {
+      const saved = sessionStorage.getItem(`${storageKey}-btns`);
+      return saved ? new Set(JSON.parse(saved) as number[]) : new Set();
+    } catch { return new Set(); }
+  });
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>(() => {
+    try {
+      const saved = sessionStorage.getItem(`${storageKey}-secs`);
+      return saved ? JSON.parse(saved) : {};
+    } catch { return {}; }
+  });
+
+  useEffect(() => {
+    try { sessionStorage.setItem(`${storageKey}-btns`, JSON.stringify([...expandedBtns])); } catch {}
+  }, [expandedBtns, storageKey]);
+
+  useEffect(() => {
+    try { sessionStorage.setItem(`${storageKey}-secs`, JSON.stringify(expandedSections)); } catch {}
+  }, [expandedSections, storageKey]);
+
+  const toggleBtn = (idx: number) => {
+    setExpandedBtns((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx); else next.add(idx);
+      return next;
+    });
+  };
+
+  const toggleSection = (key: string) => {
+    setExpandedSections((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const isSectionOpen = (key: string) => expandedSections[key] !== false;
+
+  const ACTION_TYPE_LABELS: Record<string, string> = { immediate: "즉시 실행", "select-mode": "선택 후 실행", "modal-open": "모달 열기" };
+
+  const getCondSummary = (btn: ActionButtonDef) => {
+    const c = btn.showCondition;
+    if (!c || c.type === "always") return "항상";
+    if (c.type === "timeline-status") {
+      const opt = statusOptions.find((o) => o.value === c.value);
+      return opt ? opt.label : (c.value || "미설정");
+    }
+    if (c.type === "column-value") return `${c.column || "?"} = ${c.value || "?"}`;
+    return "항상";
+  };
+
+  const addButtonAndExpand = () => {
+    addButton();
+    setExpandedBtns((prev) => new Set([...prev, buttons.length]));
+  };
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <span className="text-[9px] font-medium text-muted-foreground">버튼 규칙</span>
+        <Button variant="ghost" size="sm" onClick={addButtonAndExpand} className="h-5 px-1.5 text-[9px]">
+          <Plus className="mr-0.5 h-3 w-3" />추가
+        </Button>
+      </div>
+
+      {buttons.length === 0 && (
+        <p className="text-[8px] text-muted-foreground">버튼 규칙을 추가하세요. 상태별로 다른 버튼을 설정할 수 있습니다.</p>
+      )}
+
+      {buttons.map((btn, bi) => {
+        const condType = btn.showCondition?.type || "always";
+        const actions = getActions(btn);
+        const isExpanded = expandedBtns.has(bi);
+        const actionSummary = actions.map((a) => ACTION_TYPE_LABELS[a.type] || a.type).join(" -> ");
+
+        return (
+          <div key={bi} className="rounded border">
+            {/* 접기/펼치기 헤더 */}
+            <div
+              className="flex cursor-pointer items-center gap-1 p-1.5 hover:bg-muted/40"
+              onClick={() => toggleBtn(bi)}
+            >
+              {isExpanded
+                ? <ChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
+                : <ChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />}
+              <span className="shrink-0 text-[9px] font-bold text-muted-foreground">#{bi + 1}</span>
+              {isExpanded ? (
+                <>
+                  <Input
+                    value={btn.label}
+                    onChange={(e) => updateBtn(bi, { label: e.target.value })}
+                    onClick={(e) => e.stopPropagation()}
+                    placeholder="라벨"
+                    className="h-6 flex-1 text-[10px]"
+                  />
+                  <Select value={btn.variant || "default"} onValueChange={(v) => updateBtn(bi, { variant: v as ButtonVariant })}>
+                    <SelectTrigger className="h-6 w-16 text-[10px]" onClick={(e) => e.stopPropagation()}><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="default" className="text-[10px]">기본</SelectItem>
+                      <SelectItem value="outline" className="text-[10px]">외곽</SelectItem>
+                      <SelectItem value="destructive" className="text-[10px]">위험</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </>
+              ) : (
+                <span className="flex-1 truncate text-[9px] text-muted-foreground">
+                  {btn.label || "(미입력)"} <span className="text-muted-foreground/60">|</span> {getCondSummary(btn)} <span className="text-muted-foreground/60">|</span> {actionSummary}
+                </span>
+              )}
+              <Button
+                variant="ghost" size="sm"
+                onClick={(e) => { e.stopPropagation(); removeBtn(bi); }}
+                className="h-5 w-5 shrink-0 p-0"
+              >
+                <Trash2 className="h-2.5 w-2.5 text-muted-foreground" />
+              </Button>
+            </div>
+
+            {/* 펼쳐진 상세 */}
+            {isExpanded && (
+              <div className="space-y-0.5 border-t px-2 pb-2">
+                {/* === 조건 섹션 === */}
+                <div
+                  className="flex cursor-pointer items-center gap-1 py-1 hover:bg-muted/30"
+                  onClick={() => toggleSection(`${bi}-cond`)}
+                >
+                  {isSectionOpen(`${bi}-cond`)
+                    ? <ChevronDown className="h-2.5 w-2.5 text-muted-foreground" />
+                    : <ChevronRight className="h-2.5 w-2.5 text-muted-foreground" />}
+                  <span className="text-[8px] font-medium text-muted-foreground">조건</span>
+                  {!isSectionOpen(`${bi}-cond`) && (
+                    <span className="truncate text-[8px] text-muted-foreground/70">{getCondSummary(btn)}</span>
+                  )}
+                </div>
+                {isSectionOpen(`${bi}-cond`) && (
+                  <div className="space-y-1 pl-3">
+                    <div className="flex items-center gap-1">
+                      <span className="w-10 shrink-0 text-[8px] text-muted-foreground">활성화</span>
+                      <Select value={condType} onValueChange={(v) => updateCondition(bi, { type: v as ActionButtonShowCondition["type"] })}>
+                        <SelectTrigger className="h-6 w-[80px] text-[10px]"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="always" className="text-[10px]">항상</SelectItem>
+                          <SelectItem value="timeline-status" className="text-[10px]">타임라인</SelectItem>
+                          <SelectItem value="column-value" className="text-[10px]">카드 컬럼</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {condType === "timeline-status" && (
+                        <Select
+                          value={btn.showCondition?.value || "__none__"}
+                          onValueChange={(v) => updateCondition(bi, { value: v === "__none__" ? "" : v })}
+                        >
+                          <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="상태 선택" /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+                            {statusOptions.map((o) => (
+                              <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label} ({o.value})</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      )}
+                      {condType === "column-value" && (
+                        <>
+                          <Select
+                            value={btn.showCondition?.column || "__none__"}
+                            onValueChange={(v) => updateCondition(bi, { column: v === "__none__" ? "" : v })}
+                          >
+                            <SelectTrigger className="h-6 w-24 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+                              {allColumnOptions.map((o) => (
+                                <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <Input
+                            value={btn.showCondition?.value || ""}
+                            onChange={(e) => updateCondition(bi, { value: e.target.value })}
+                            placeholder="값"
+                            className="h-6 w-20 text-[10px]"
+                          />
+                        </>
+                      )}
+                    </div>
+                    {condType !== "always" && (
+                      <div className="flex items-center gap-1">
+                        <span className="w-10 shrink-0 text-[8px] text-muted-foreground">그 외</span>
+                        <Select
+                          value={btn.showCondition?.unmatchBehavior || "hidden"}
+                          onValueChange={(v) => updateCondition(bi, { unmatchBehavior: v as "hidden" | "disabled" })}
+                        >
+                          <SelectTrigger className="h-6 w-[80px] text-[10px]"><SelectValue /></SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="hidden" className="text-[10px]">숨김</SelectItem>
+                            <SelectItem value="disabled" className="text-[10px]">비활성화</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <span className="text-[8px] text-muted-foreground">
+                          {(btn.showCondition?.unmatchBehavior || "hidden") === "disabled"
+                            ? "보이지만 클릭 불가"
+                            : "버튼 안 보임"}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* === 실행 섹션 (다중 액션) === */}
+                <div
+                  className="flex cursor-pointer items-center gap-1 py-1 hover:bg-muted/30"
+                  onClick={() => toggleSection(`${bi}-action`)}
+                >
+                  {isSectionOpen(`${bi}-action`)
+                    ? <ChevronDown className="h-2.5 w-2.5 text-muted-foreground" />
+                    : <ChevronRight className="h-2.5 w-2.5 text-muted-foreground" />}
+                  <span className="text-[8px] font-medium text-muted-foreground">실행 ({actions.length})</span>
+                  {!isSectionOpen(`${bi}-action`) && (
+                    <span className="truncate text-[8px] text-muted-foreground/70">{actionSummary}</span>
+                  )}
+                </div>
+                {isSectionOpen(`${bi}-action`) && (
+                  <div className="space-y-1.5 pl-1">
+                    {actions.map((action, ai) => {
+                      const aType = action.type;
+                      return (
+                        <div key={ai} className="space-y-1 rounded border bg-muted/20 p-1.5">
+                          <div className="flex items-center gap-1">
+                            <span className="shrink-0 text-[8px] font-bold text-muted-foreground">#{ai + 1}</span>
+                            <Select value={aType} onValueChange={(v) => updateAction(bi, ai, { type: v as ActionButtonClickAction["type"] })}>
+                              <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="immediate" className="text-[10px]">즉시 실행</SelectItem>
+                                <SelectItem value="select-mode" className="text-[10px]">선택 후 실행</SelectItem>
+                                <SelectItem value="modal-open" className="text-[10px]">모달 열기</SelectItem>
+                              </SelectContent>
+                            </Select>
+                            {actions.length > 1 && (
+                              <Button variant="ghost" size="sm" onClick={() => removeAction(bi, ai)} className="h-5 w-5 shrink-0 p-0">
+                                <Trash2 className="h-2.5 w-2.5 text-muted-foreground" />
+                              </Button>
+                            )}
+                          </div>
+
+                          {aType === "immediate" && (
+                            <ImmediateActionEditor
+                              action={action}
+                              allColumnOptions={allColumnOptions}
+                              availableTableOptions={availableTableOptions}
+                              onAddUpdate={() => addActionUpdate(bi, ai)}
+                              onUpdateUpdate={(ui, p) => updateActionUpdate(bi, ai, ui, p)}
+                              onRemoveUpdate={(ui) => removeActionUpdate(bi, ai, ui)}
+                              onUpdateAction={(p) => updateAction(bi, ai, p)}
+                            />
+                          )}
+
+                          {aType === "select-mode" && (
+                            <div className="space-y-1.5">
+                              <div className="flex items-center justify-between">
+                                <span className="text-[8px] font-medium text-muted-foreground">로직 순서</span>
+                                <Button variant="ghost" size="sm" onClick={() => addSelectModeBtn(bi, ai)} className="h-4 px-1 text-[8px]">
+                                  <Plus className="mr-0.5 h-2.5 w-2.5" />추가
+                                </Button>
+                              </div>
+                              {(action.selectModeButtons || []).map((smBtn, si) => (
+                                <div key={si} className="space-y-1 rounded border bg-muted/30 p-1.5">
+                                  <div className="flex items-center gap-1">
+                                    <Input value={smBtn.label} onChange={(e) => updateSelectModeBtn(bi, ai, si, { label: e.target.value })} placeholder="라벨" className="h-6 flex-1 text-[10px]" />
+                                    <Select value={smBtn.variant || "outline"} onValueChange={(v) => updateSelectModeBtn(bi, ai, si, { variant: v as ButtonVariant })}>
+                                      <SelectTrigger className="h-6 w-14 text-[10px]"><SelectValue /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="default" className="text-[10px]">기본</SelectItem>
+                                        <SelectItem value="outline" className="text-[10px]">외곽</SelectItem>
+                                        <SelectItem value="destructive" className="text-[10px]">위험</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                    <Button variant="ghost" size="sm" onClick={() => removeSelectModeBtn(bi, ai, si)} className="h-5 w-5 p-0">
+                                      <Trash2 className="h-2.5 w-2.5 text-muted-foreground" />
+                                    </Button>
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    <span className="w-8 shrink-0 text-[8px] text-muted-foreground">동작</span>
+                                    <Select value={smBtn.clickMode} onValueChange={(v) => updateSelectModeBtn(bi, ai, si, { clickMode: v as SelectModeButtonConfig["clickMode"] })}>
+                                      <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+                                      <SelectContent>
+                                        <SelectItem value="cancel-select" className="text-[10px]">선택 취소</SelectItem>
+                                        <SelectItem value="status-change" className="text-[10px]">상태 변경</SelectItem>
+                                        <SelectItem value="modal-open" className="text-[10px]">모달 열기</SelectItem>
+                                      </SelectContent>
+                                    </Select>
+                                  </div>
+                                  {smBtn.clickMode === "status-change" && (
+                                    <ImmediateActionEditor
+                                      action={{ type: "immediate", targetTable: smBtn.targetTable, updates: smBtn.updates, confirmMessage: smBtn.confirmMessage }}
+                                      allColumnOptions={allColumnOptions}
+                                      availableTableOptions={availableTableOptions}
+                                      onAddUpdate={() => addSmBtnUpdate(bi, ai, si)}
+                                      onUpdateUpdate={(ui, p) => updateSmBtnUpdate(bi, ai, si, ui, p)}
+                                      onRemoveUpdate={(ui) => removeSmBtnUpdate(bi, ai, si, ui)}
+                                      onUpdateAction={(p) => updateSelectModeBtn(bi, ai, si, { targetTable: p.targetTable ?? smBtn.targetTable, confirmMessage: p.confirmMessage ?? smBtn.confirmMessage })}
+                                    />
+                                  )}
+                                  {smBtn.clickMode === "modal-open" && (
+                                    <div className="flex items-center gap-1">
+                                      <span className="w-10 shrink-0 text-[8px] text-muted-foreground">POP 화면</span>
+                                      <Input
+                                        value={smBtn.modalScreenId || ""}
+                                        onChange={(e) => updateSelectModeBtn(bi, ai, si, { modalScreenId: e.target.value })}
+                                        placeholder="화면 ID (예: 4481)"
+                                        className="h-6 flex-1 text-[10px]"
+                                      />
+                                    </div>
+                                  )}
+                                </div>
+                              ))}
+                              {(!action.selectModeButtons || action.selectModeButtons.length === 0) && (
+                                <p className="text-[8px] text-muted-foreground">로직 순서를 추가하세요.</p>
+                              )}
+                            </div>
+                          )}
+
+                          {aType === "modal-open" && (
+                            <div className="flex items-center gap-1">
+                              <span className="w-10 shrink-0 text-[8px] text-muted-foreground">POP 화면</span>
+                              <Input
+                                value={action.modalScreenId || ""}
+                                onChange={(e) => updateAction(bi, ai, { modalScreenId: e.target.value })}
+                                placeholder="화면 ID (예: 4481)"
+                                className="h-6 flex-1 text-[10px]"
+                              />
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                    <Button variant="ghost" size="sm" onClick={() => addAction(bi)} className="h-5 w-full text-[8px]">
+                      <Plus className="mr-0.5 h-2.5 w-2.5" />액션 추가
+                    </Button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const SYSTEM_COLUMNS = new Set([
+  "id", "company_code", "created_date", "updated_date", "writer",
+]);
+
+function ImmediateActionEditor({
+  action,
+  allColumnOptions,
+  availableTableOptions,
+  onAddUpdate,
+  onUpdateUpdate,
+  onRemoveUpdate,
+  onUpdateAction,
+}: {
+  action: ActionButtonClickAction;
+  allColumnOptions: { value: string; label: string }[];
+  availableTableOptions: { value: string; label: string }[];
+  onAddUpdate: () => void;
+  onUpdateUpdate: (uIdx: number, partial: Partial<ActionButtonUpdate>) => void;
+  onRemoveUpdate: (uIdx: number) => void;
+  onUpdateAction: (partial: Partial<ActionButtonClickAction>) => void;
+}) {
+  const isExternalTable = action.targetTable && !availableTableOptions.some((t) => t.value === action.targetTable);
+  const [dbSelectMode, setDbSelectMode] = useState(!!isExternalTable);
+  const [allTables, setAllTables] = useState<TableInfo[]>([]);
+
+  const [tableColumnGroups, setTableColumnGroups] = useState<
+    { table: string; label: string; business: { value: string; label: string }[]; system: { value: string; label: string }[] }[]
+  >([]);
+
+  // 외부 DB 모드 시 전체 테이블 로드
+  useEffect(() => {
+    if (dbSelectMode && allTables.length === 0) {
+      fetchTableList().then(setAllTables).catch(() => setAllTables([]));
+    }
+  }, [dbSelectMode, allTables.length]);
+
+  // 선택된 테이블 컬럼 로드 (카드 소스 + 외부 공통)
+  const effectiveTableOptions = useMemo(() => {
+    if (dbSelectMode && action.targetTable) {
+      const existing = availableTableOptions.find((t) => t.value === action.targetTable);
+      if (!existing) return [...availableTableOptions, { value: action.targetTable, label: `${action.targetTable} (외부)` }];
+    }
+    return availableTableOptions;
+  }, [availableTableOptions, dbSelectMode, action.targetTable]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const loadAll = async () => {
+      const groups: typeof tableColumnGroups = [];
+      for (const t of effectiveTableOptions) {
+        try {
+          const cols = await fetchTableColumns(t.value);
+          const mapped = cols.map((c) => ({ value: c.name, label: c.name }));
+          groups.push({
+            table: t.value,
+            label: t.label,
+            business: mapped.filter((c) => !SYSTEM_COLUMNS.has(c.value)),
+            system: mapped.filter((c) => SYSTEM_COLUMNS.has(c.value)),
+          });
+        } catch {
+          groups.push({ table: t.value, label: t.label, business: [], system: [] });
+        }
+      }
+      if (!cancelled) setTableColumnGroups(groups);
+    };
+    if (effectiveTableOptions.length > 0) loadAll();
+    else setTableColumnGroups([]);
+    return () => { cancelled = true; };
+  }, [effectiveTableOptions]);
+
+  const selectedGroup = tableColumnGroups.find((g) => g.table === action.targetTable);
+  const businessCols = selectedGroup?.business || [];
+  const systemCols = selectedGroup?.system || [];
+  const tableName = action.targetTable?.trim() || "";
+
+  // 메인 테이블 컬럼 (조인키 소스 컬럼 선택 용도)
+  const mainTableGroup = tableColumnGroups.find((g) => availableTableOptions[0]?.value === g.table);
+  const mainCols = mainTableGroup ? [...mainTableGroup.business, ...mainTableGroup.system] : [];
+
+  return (
+    <div className="space-y-1 pl-0.5">
+      {/* 대상 테이블 */}
+      <div className="flex items-center gap-1">
+        <span className="w-14 shrink-0 text-[8px] text-muted-foreground">대상 테이블</span>
+        {!dbSelectMode ? (
+          <Select
+            value={action.targetTable || "__none__"}
+            onValueChange={(v) => {
+              if (v === "__db_select__") {
+                setDbSelectMode(true);
+                onUpdateAction({ targetTable: "" });
+              } else {
+                onUpdateAction({ targetTable: v === "__none__" ? "" : v, joinConfig: undefined });
+              }
+            }}
+          >
+            <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="테이블 선택" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+              {availableTableOptions.map((t) => (
+                <SelectItem key={t.value} value={t.value} className="text-[10px]">{t.label}</SelectItem>
+              ))}
+              <SelectItem value="__db_select__" className="text-[10px] font-medium text-primary">DB에서 직접 선택...</SelectItem>
+            </SelectContent>
+          </Select>
+        ) : (
+          <div className="flex flex-1 items-center gap-1">
+            <DbTableCombobox
+              value={action.targetTable || ""}
+              tables={allTables}
+              onSelect={(v) => onUpdateAction({ targetTable: v })}
+            />
+            <Button
+              variant="ghost" size="sm"
+              onClick={() => { setDbSelectMode(false); onUpdateAction({ targetTable: "", joinConfig: undefined }); }}
+              className="h-5 shrink-0 px-1 text-[8px]"
+            >
+              취소
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* 외부 DB 선택 시 조인키 설정 */}
+      {dbSelectMode && action.targetTable && (
+        <>
+          <div className="flex items-center gap-1">
+            <span className="w-14 shrink-0 text-[8px] text-muted-foreground">기준 컬럼</span>
+            <Select
+              value={action.joinConfig?.sourceColumn || "__none__"}
+              onValueChange={(v) => onUpdateAction({ joinConfig: { ...action.joinConfig || { sourceColumn: "", targetColumn: "" }, sourceColumn: v === "__none__" ? "" : v } })}
+            >
+              <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="메인 테이블 컬럼" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+                {mainCols.map((c) => (
+                  <SelectItem key={c.value} value={c.value} className="text-[10px]">{c.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="w-14 shrink-0 text-[8px] text-muted-foreground">매칭 컬럼</span>
+            <Select
+              value={action.joinConfig?.targetColumn || "__none__"}
+              onValueChange={(v) => onUpdateAction({ joinConfig: { ...action.joinConfig || { sourceColumn: "", targetColumn: "" }, targetColumn: v === "__none__" ? "" : v } })}
+            >
+              <SelectTrigger className="h-6 flex-1 text-[10px]"><SelectValue placeholder="외부 테이블 컬럼" /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+                {[...businessCols, ...systemCols].map((c) => (
+                  <SelectItem key={c.value} value={c.value} className="text-[10px]">{c.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <p className="text-[7px] text-muted-foreground/70 pl-0.5">
+            메인.기준컬럼 = 외부.매칭컬럼 으로 연결하여 업데이트
+          </p>
+        </>
+      )}
+
+      <div className="flex items-center gap-1">
+        <span className="w-14 shrink-0 text-[8px] text-muted-foreground">확인 메시지</span>
+        <Input
+          value={action.confirmMessage || ""}
+          onChange={(e) => onUpdateAction({ confirmMessage: e.target.value })}
+          placeholder="처리하시겠습니까?"
+          className="h-6 flex-1 text-[10px]"
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-[8px] font-medium text-muted-foreground">
+          변경할 컬럼{tableName ? ` (${tableName})` : ""}
+        </span>
+        <Button variant="ghost" size="sm" onClick={onAddUpdate} className="h-4 px-1 text-[8px]">
+          <Plus className="mr-0.5 h-2.5 w-2.5" />추가
+        </Button>
+      </div>
+      {(action.updates || []).map((u, ui) => (
+        <div key={ui} className="flex items-center gap-1">
+          <Select value={u.column || "__none__"} onValueChange={(v) => onUpdateUpdate(ui, { column: v === "__none__" ? "" : v })}>
+            <SelectTrigger className="h-6 w-24 text-[10px]"><SelectValue placeholder="컬럼" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__none__" className="text-[10px]">선택</SelectItem>
+              {businessCols.length > 0 && (
+                <SelectGroup>
+                  <SelectLabel className="text-[8px] text-muted-foreground">{tableName}</SelectLabel>
+                  {businessCols.map((o) => (
+                    <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+                  ))}
+                </SelectGroup>
+              )}
+              {systemCols.length > 0 && (
+                <SelectGroup>
+                  <SelectLabel className="text-[8px] text-muted-foreground">{tableName} - 시스템</SelectLabel>
+                  {systemCols.map((o) => (
+                    <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>
+                  ))}
+                </SelectGroup>
+              )}
+            </SelectContent>
+          </Select>
+          <Select value={u.valueType} onValueChange={(v) => onUpdateUpdate(ui, { valueType: v as ActionButtonUpdate["valueType"] })}>
+            <SelectTrigger className="h-6 w-20 text-[10px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="static" className="text-[10px]">직접입력</SelectItem>
+              <SelectItem value="currentUser" className="text-[10px]">현재 사용자</SelectItem>
+              <SelectItem value="currentTime" className="text-[10px]">현재 시간</SelectItem>
+              <SelectItem value="columnRef" className="text-[10px]">컬럼 참조</SelectItem>
+            </SelectContent>
+          </Select>
+          {(u.valueType === "static" || u.valueType === "columnRef") && (
+            <Input
+              value={u.value || ""}
+              onChange={(e) => onUpdateUpdate(ui, { value: e.target.value })}
+              placeholder={u.valueType === "static" ? "값" : "컬럼명"}
+              className="h-6 flex-1 text-[10px]"
+            />
+          )}
+          <Button variant="ghost" size="sm" onClick={() => onRemoveUpdate(ui)} className="h-5 w-5 shrink-0 p-0">
+            <Trash2 className="h-2.5 w-2.5 text-muted-foreground" />
+          </Button>
+        </div>
+      ))}
+      {(!action.updates || action.updates.length === 0) && (
+        <p className="text-[8px] text-muted-foreground">변경 항목을 추가하면 클릭 시 DB가 변경됩니다.</p>
+      )}
+    </div>
+  );
+}
+
+
+// ===== DB 테이블 검색 Combobox =====
+
+function DbTableCombobox({
+  value,
+  tables,
+  onSelect,
+}: {
+  value: string;
+  tables: TableInfo[];
+  onSelect: (tableName: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filtered = useMemo(() => {
+    if (!search) return tables;
+    const q = search.toLowerCase();
+    return tables.filter(
+      (t) =>
+        t.tableName.toLowerCase().includes(q) ||
+        (t.tableComment || "").toLowerCase().includes(q),
+    );
+  }, [tables, search]);
+
+  const selectedLabel = useMemo(() => {
+    if (!value) return "DB 테이블 검색...";
+    const found = tables.find((t) => t.tableName === value);
+    return found ? `${found.tableName}${found.tableComment ? ` (${found.tableComment})` : ""}` : value;
+  }, [value, tables]);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-6 flex-1 justify-between text-[10px] font-normal"
+        >
+          <span className="truncate">{selectedLabel}</span>
+          <ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="p-0"
+        style={{ width: "var(--radix-popover-trigger-width)", minWidth: 240 }}
+        align="start"
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="테이블명 또는 설명 검색..."
+            className="text-[10px]"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <CommandList className="max-h-[200px]">
+            <CommandEmpty className="py-2 text-center text-[10px] text-muted-foreground">
+              검색 결과가 없습니다.
+            </CommandEmpty>
+            <CommandGroup>
+              {filtered.map((t) => (
+                <CommandItem
+                  key={t.tableName}
+                  value={t.tableName}
+                  onSelect={() => {
+                    onSelect(t.tableName);
+                    setOpen(false);
+                    setSearch("");
+                  }}
+                  className="text-[10px]"
+                >
+                  <Check className={cn("mr-1.5 h-3 w-3", value === t.tableName ? "opacity-100" : "opacity-0")} />
+                  <span className="font-medium">{t.tableName}</span>
+                  {t.tableComment && (
+                    <span className="ml-1 text-muted-foreground">({t.tableComment})</span>
+                  )}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ===== 하단 상태 에디터 =====
+
+function FooterStatusEditor({
+  cell,
+  allColumnOptions,
+  onUpdate,
+}: {
+  cell: CardCellDefinitionV2;
+  allColumnOptions: { value: string; label: string }[];
+  onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
+}) {
+  const footerStatusMap = cell.footerStatusMap || [];
+
+  const addMapping = () => {
+    onUpdate({ footerStatusMap: [...footerStatusMap, { value: "", label: "", color: "#6b7280" }] });
+  };
+
+  const updateMapping = (index: number, partial: Partial<{ value: string; label: string; color: string }>) => {
+    onUpdate({ footerStatusMap: footerStatusMap.map((m, i) => (i === index ? { ...m, ...partial } : m)) });
+  };
+
+  const removeMapping = (index: number) => {
+    onUpdate({ footerStatusMap: footerStatusMap.filter((_, i) => i !== index) });
+  };
+
+  return (
+    <div className="space-y-1">
+      <span className="text-[9px] font-medium text-muted-foreground">하단 상태 설정</span>
+      <div className="flex gap-1">
+        <Input
+          value={cell.footerLabel || ""}
+          onChange={(e) => onUpdate({ footerLabel: e.target.value })}
+          placeholder="라벨 (예: 검사의뢰)"
+          className="h-7 flex-1 text-[10px]"
+        />
+      </div>
+      <div className="flex gap-1">
+        <Select value={cell.footerStatusColumn || "__none__"} onValueChange={(v) => onUpdate({ footerStatusColumn: v === "__none__" ? undefined : v })}>
+          <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="상태 컬럼" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__none__" className="text-[10px]">없음</SelectItem>
+            {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="flex items-center gap-1">
+        <Label className="text-[9px] text-muted-foreground">상단 구분선</Label>
+        <Switch
+          checked={cell.showTopBorder !== false}
+          onCheckedChange={(v) => onUpdate({ showTopBorder: v })}
+        />
+      </div>
+      <div className="flex items-center justify-between">
+        <span className="text-[9px] font-medium text-muted-foreground">상태값-색상 매핑</span>
+        <Button variant="ghost" size="sm" onClick={addMapping} className="h-5 px-1.5 text-[9px]">
+          <Plus className="mr-0.5 h-3 w-3" />추가
+        </Button>
+      </div>
+      {footerStatusMap.map((m, i) => (
+        <div key={i} className="flex items-center gap-1">
+          <Input value={m.value} onChange={(e) => updateMapping(i, { value: e.target.value })} placeholder="값" className="h-6 flex-1 text-[10px]" />
+          <Input value={m.label} onChange={(e) => updateMapping(i, { label: e.target.value })} placeholder="라벨" className="h-6 flex-1 text-[10px]" />
+          <input type="color" value={m.color} onChange={(e) => updateMapping(i, { color: e.target.value })} className="h-6 w-8 cursor-pointer rounded border" />
+          <Button variant="ghost" size="sm" onClick={() => removeMapping(i)} className="h-5 w-5 p-0">
+            <Trash2 className="h-3 w-3 text-destructive" />
+          </Button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ===== 필드 설정 에디터 =====
+
+function FieldConfigEditor({
+  cell,
+  allColumnOptions,
+  onUpdate,
+}: {
+  cell: CardCellDefinitionV2;
+  allColumnOptions: { value: string; label: string }[];
+  onUpdate: (partial: Partial<CardCellDefinitionV2>) => void;
+}) {
+  const valueType = cell.valueType || "column";
+
+  return (
+    <div className="space-y-1">
+      <span className="text-[9px] font-medium text-muted-foreground">필드 설정</span>
+      <div className="flex gap-1">
+        <Select value={valueType} onValueChange={(v) => onUpdate({ valueType: v as "column" | "formula" })}>
+          <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="column" className="text-[10px]">컬럼 값</SelectItem>
+            <SelectItem value="formula" className="text-[10px]">수식</SelectItem>
+          </SelectContent>
+        </Select>
+        <Input value={cell.unit || ""} onChange={(e) => onUpdate({ unit: e.target.value })} placeholder="단위" className="h-7 w-16 text-[10px]" />
+      </div>
+      {valueType === "formula" && (
+        <div className="flex gap-1">
+          <Select value={cell.formulaLeft || ""} onValueChange={(v) => onUpdate({ formulaLeft: v })}>
+            <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="좌항" /></SelectTrigger>
+            <SelectContent>
+              {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+            </SelectContent>
+          </Select>
+          <Select value={cell.formulaOperator || "+"} onValueChange={(v) => onUpdate({ formulaOperator: v as "+" | "-" | "*" | "/" })}>
+            <SelectTrigger className="h-7 w-12 text-[10px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {["+", "-", "*", "/"].map((op) => <SelectItem key={op} value={op} className="text-[10px]">{op}</SelectItem>)}
+            </SelectContent>
+          </Select>
+          <Select value={cell.formulaRightType || "input"} onValueChange={(v) => onUpdate({ formulaRightType: v as "input" | "column" })}>
+            <SelectTrigger className="h-7 w-16 text-[10px]"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="input" className="text-[10px]">입력값</SelectItem>
+              <SelectItem value="column" className="text-[10px]">컬럼</SelectItem>
+            </SelectContent>
+          </Select>
+          {cell.formulaRightType === "column" && (
+            <Select value={cell.formulaRight || ""} onValueChange={(v) => onUpdate({ formulaRight: v })}>
+              <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue placeholder="우항" /></SelectTrigger>
+              <SelectContent>
+                {allColumnOptions.map((o) => <SelectItem key={o.value} value={o.value} className="text-[10px]">{o.label}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ===== 탭 3: 동작 =====
+
+function TabActions({
+  cfg,
+  onUpdate,
+}: {
+  cfg: PopCardListV2Config;
+  onUpdate: (partial: Partial<PopCardListV2Config>) => void;
+}) {
+  const overflow = cfg.overflow || { mode: "loadMore" as const, visibleCount: 6 };
+  const clickAction = cfg.cardClickAction || "none";
+  const modalConfig = cfg.cardClickModalConfig || { screenId: "" };
+
+  return (
+    <div className="space-y-3">
+      {/* 카드 선택 시 */}
+      <div>
+        <Label className="text-xs">카드 선택 시 동작</Label>
+        <div className="mt-1 space-y-1">
+          {(["none", "publish", "navigate", "modal-open"] as V2CardClickAction[]).map((action) => (
+            <label key={action} className="flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted/50">
+              <input
+                type="radio"
+                name="cardClickAction"
+                checked={clickAction === action}
+                onChange={() => onUpdate({ cardClickAction: action })}
+                className="h-3 w-3"
+              />
+              <span className="text-xs">
+                {action === "none" && "없음"}
+                {action === "publish" && "상세 데이터 전달 (다른 컴포넌트 연결)"}
+                {action === "navigate" && "화면 이동"}
+                {action === "modal-open" && "모달 열기"}
+              </span>
+            </label>
+          ))}
+        </div>
+        {clickAction === "modal-open" && (
+          <div className="mt-2 space-y-1.5 rounded border bg-muted/20 p-2">
+            <div className="flex items-center gap-1">
+              <span className="w-16 shrink-0 text-[9px] text-muted-foreground">POP 화면 ID</span>
+              <Input
+                value={modalConfig.screenId || ""}
+                onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, screenId: e.target.value } })}
+                placeholder="화면 ID (예: 4481)"
+                className="h-7 flex-1 text-[10px]"
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="w-16 shrink-0 text-[9px] text-muted-foreground">모달 제목</span>
+              <Input
+                value={modalConfig.modalTitle || ""}
+                onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, modalTitle: e.target.value } })}
+                placeholder="비우면 '상세 작업' 표시"
+                className="h-7 flex-1 text-[10px]"
+              />
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="w-16 shrink-0 text-[9px] text-muted-foreground">조건</span>
+              <Select
+                value={modalConfig.condition?.type || "always"}
+                onValueChange={(v) => {
+                  const cond = v === "always" ? undefined : { type: v as "timeline-status" | "column-value", value: "", column: "" };
+                  onUpdate({ cardClickModalConfig: { ...modalConfig, condition: cond } });
+                }}
+              >
+                <SelectTrigger className="h-7 flex-1 text-[10px]"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="always" className="text-[10px]">항상</SelectItem>
+                  <SelectItem value="timeline-status" className="text-[10px]">타임라인 상태 일치 시</SelectItem>
+                  <SelectItem value="column-value" className="text-[10px]">컬럼 값 일치 시</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            {modalConfig.condition?.type === "timeline-status" && (
+              <div className="flex items-center gap-1">
+                <span className="w-16 shrink-0 text-[9px] text-muted-foreground">상태 값</span>
+                <Input
+                  value={modalConfig.condition?.value || ""}
+                  onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, condition: { ...modalConfig.condition!, value: e.target.value } } })}
+                  placeholder="예: in_progress"
+                  className="h-7 flex-1 text-[10px]"
+                />
+              </div>
+            )}
+            {modalConfig.condition?.type === "column-value" && (
+              <>
+                <div className="flex items-center gap-1">
+                  <span className="w-16 shrink-0 text-[9px] text-muted-foreground">컬럼</span>
+                  <Input
+                    value={modalConfig.condition?.column || ""}
+                    onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, condition: { ...modalConfig.condition!, column: e.target.value } } })}
+                    placeholder="컬럼명"
+                    className="h-7 flex-1 text-[10px]"
+                  />
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="w-16 shrink-0 text-[9px] text-muted-foreground">값</span>
+                  <Input
+                    value={modalConfig.condition?.value || ""}
+                    onChange={(e) => onUpdate({ cardClickModalConfig: { ...modalConfig, condition: { ...modalConfig.condition!, value: e.target.value } } })}
+                    placeholder="값"
+                    className="h-7 flex-1 text-[10px]"
+                  />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 필터 전 비표시 */}
+      <div className="flex items-center justify-between">
+        <Label className="text-xs">필터 전 데이터 숨김</Label>
+        <Switch
+          checked={!!cfg.hideUntilFiltered}
+          onCheckedChange={(checked) => onUpdate({ hideUntilFiltered: checked })}
+        />
+      </div>
+      {cfg.hideUntilFiltered && (
+        <p className="text-[9px] text-muted-foreground -mt-2 pl-1">
+          연결된 컴포넌트에서 필터 값이 전달되기 전까지 데이터를 표시하지 않습니다.
+        </p>
+      )}
+
+      {/* 스크롤 방향 */}
+      <div>
+        <Label className="text-xs">스크롤 방향</Label>
+        <div className="mt-1 flex gap-1">
+          {(["vertical", "horizontal"] as const).map((dir) => (
+            <button
+              key={dir}
+              type="button"
+              onClick={() => onUpdate({ scrollDirection: dir })}
+              className={cn(
+                "flex-1 rounded border py-1 text-xs transition-colors",
+                (cfg.scrollDirection || "vertical") === dir
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-border hover:bg-muted"
+              )}
+            >
+              {dir === "vertical" ? "세로" : "가로"}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 오버플로우 */}
+      <div>
+        <Label className="text-xs">오버플로우</Label>
+        <div className="mt-1 flex gap-1">
+          {(["loadMore", "pagination"] as const).map((mode) => (
+            <button
+              key={mode}
+              type="button"
+              onClick={() => onUpdate({ overflow: { ...overflow, mode } })}
+              className={cn(
+                "flex-1 rounded border py-1 text-xs transition-colors",
+                overflow.mode === mode
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-border hover:bg-muted"
+              )}
+            >
+              {mode === "loadMore" ? "더보기" : "페이지네이션"}
+            </button>
+          ))}
+        </div>
+        <div className="mt-2 space-y-2">
+          <div>
+            <Label className="text-[10px]">기본 표시 수</Label>
+            <Input
+              type="number"
+              min={1}
+              max={50}
+              value={overflow.visibleCount}
+              onChange={(e) => onUpdate({ overflow: { ...overflow, visibleCount: Number(e.target.value) || 6 } })}
+              className="mt-0.5 h-7 text-[10px]"
+            />
+          </div>
+          {overflow.mode === "loadMore" && (
+            <div>
+              <Label className="text-[10px]">더보기 추가 수</Label>
+              <Input
+                type="number"
+                min={1}
+                max={50}
+                value={overflow.loadMoreCount ?? 6}
+                onChange={(e) => onUpdate({ overflow: { ...overflow, loadMoreCount: Number(e.target.value) || 6 } })}
+                className="mt-0.5 h-7 text-[10px]"
+              />
+            </div>
+          )}
+          {overflow.mode === "pagination" && (
+            <div>
+              <Label className="text-[10px]">페이지당 수</Label>
+              <Input
+                type="number"
+                min={1}
+                max={100}
+                value={overflow.pageSize ?? overflow.visibleCount}
+                onChange={(e) => onUpdate({ overflow: { ...overflow, pageSize: Number(e.target.value) || 6 } })}
+                className="mt-0.5 h-7 text-[10px]"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 장바구니 */}
+      <div className="flex items-center justify-between">
+        <Label className="text-xs">장바구니(카트) 사용</Label>
+        <Switch
+          checked={!!cfg.cartAction}
+          onCheckedChange={(checked) => {
+            if (checked) {
+              onUpdate({ cartAction: { saveMode: "cart", label: "담기", cancelLabel: "취소" } });
+            } else {
+              onUpdate({ cartAction: undefined });
+            }
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Preview.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Preview.tsx
new file mode 100644
index 00000000..8ebaf913
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/PopCardListV2Preview.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+/**
+ * pop-card-list-v2 디자인 모드 미리보기
+ *
+ * 디자이너 캔버스에서 표시되는 미리보기.
+ * CSS Grid 기반 셀 배치를 시각적으로 보여준다.
+ */
+
+import React from "react";
+import { LayoutGrid, Package } from "lucide-react";
+import type { PopCardListV2Config } from "../types";
+import { CARD_SCROLL_DIRECTION_LABELS, CARD_SIZE_LABELS } from "../types";
+
+interface PopCardListV2PreviewProps {
+  config?: PopCardListV2Config;
+}
+
+export function PopCardListV2PreviewComponent({ config }: PopCardListV2PreviewProps) {
+  const scrollDirection = config?.scrollDirection || "vertical";
+  const cardSize = config?.cardSize || "medium";
+  const dataSource = config?.dataSource;
+  const cardGrid = config?.cardGrid;
+  const hasTable = !!dataSource?.tableName;
+  const cellCount = cardGrid?.cells?.length || 0;
+
+  return (
+    <div className="flex h-full w-full flex-col bg-muted/30 p-3">
+      <div className="mb-2 flex items-center justify-between">
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <LayoutGrid className="h-4 w-4" />
+          <span className="text-xs font-medium">카드 목록 V2</span>
+        </div>
+        <div className="flex gap-1">
+          <span className="rounded bg-primary/10 px-1.5 py-0.5 text-[9px] text-primary">
+            {CARD_SCROLL_DIRECTION_LABELS[scrollDirection]}
+          </span>
+          <span className="rounded bg-secondary px-1.5 py-0.5 text-[9px] text-secondary-foreground">
+            {CARD_SIZE_LABELS[cardSize]}
+          </span>
+        </div>
+      </div>
+
+      {!hasTable ? (
+        <div className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <Package className="mx-auto mb-2 h-8 w-8 text-muted-foreground/50" />
+            <p className="text-xs text-muted-foreground">데이터 소스를 설정하세요</p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="mb-2 text-center">
+            <span className="rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground">
+              {dataSource!.tableName}
+            </span>
+            <span className="ml-1 text-[10px] text-muted-foreground/60">
+              ({cellCount}셀)
+            </span>
+          </div>
+
+          <div className="flex flex-1 flex-col gap-2">
+            {[0, 1].map((cardIdx) => (
+              <div key={cardIdx} className="rounded-md border bg-card p-2">
+                {cellCount === 0 ? (
+                  <div className="flex h-12 items-center justify-center">
+                    <span className="text-[10px] text-muted-foreground">셀을 추가하세요</span>
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      display: "grid",
+                      gridTemplateColumns: cardGrid!.colWidths?.length
+                        ? cardGrid!.colWidths.map((w) => w || "1fr").join(" ")
+                        : `repeat(${cardGrid!.cols || 1}, 1fr)`,
+                      gridTemplateRows: `repeat(${cardGrid!.rows || 1}, minmax(16px, auto))`,
+                      gap: "2px",
+                    }}
+                  >
+                    {cardGrid!.cells.map((cell) => (
+                      <div
+                        key={cell.id}
+                        className="rounded border border-dashed border-border/50 bg-muted/20 px-1 py-0.5"
+                        style={{
+                          gridColumn: `${cell.col} / span ${cell.colSpan || 1}`,
+                          gridRow: `${cell.row} / span ${cell.rowSpan || 1}`,
+                        }}
+                      >
+                        <span className="text-[8px] text-muted-foreground">
+                          {cell.type}
+                          {cell.columnName ? `: ${cell.columnName}` : ""}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx
new file mode 100644
index 00000000..f1863b13
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/cell-renderers.tsx
@@ -0,0 +1,733 @@
+"use client";
+
+/**
+ * pop-card-list-v2 셀 타입별 렌더러
+ *
+ * 각 셀 타입은 독립 함수로 구현되어 CardV2Grid에서 type별 dispatch로 호출된다.
+ * 기존 pop-card-list의 카드 내부 렌더링과 pop-string-list의 CardModeView 패턴을 결합.
+ */
+
+import React, { useMemo, useState } from "react";
+import {
+  ShoppingCart, X, Package, Truck, Box, Archive, Heart, Star,
+  Loader2, CheckCircle2, CircleDot, Clock,
+  type LucideIcon,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { CardCellDefinitionV2, PackageEntry, TimelineProcessStep, ActionButtonDef } from "../types";
+import { DEFAULT_CARD_IMAGE, VIRTUAL_SUB_STATUS, VIRTUAL_SUB_SEMANTIC } from "../types";
+import type { ButtonVariant } from "../pop-button";
+
+type RowData = Record<string, unknown>;
+
+// ===== 공통 유틸 =====
+
+const LUCIDE_ICON_MAP: Record<string, LucideIcon> = {
+  ShoppingCart, Package, Truck, Box, Archive, Heart, Star,
+};
+
+function DynamicLucideIcon({ name, size = 20 }: { name?: string; size?: number }) {
+  if (!name) return <ShoppingCart size={size} />;
+  const IconComp = LUCIDE_ICON_MAP[name];
+  if (!IconComp) return <ShoppingCart size={size} />;
+  return <IconComp size={size} />;
+}
+
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "-";
+  if (typeof value === "number") return value.toLocaleString();
+  if (typeof value === "boolean") return value ? "예" : "아니오";
+  if (value instanceof Date) return value.toLocaleDateString();
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) {
+      return `${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+    }
+  }
+  return String(value);
+}
+
+const FONT_SIZE_MAP = { xs: "10px", sm: "11px", md: "12px", lg: "14px" } as const;
+const FONT_WEIGHT_MAP = { normal: 400, medium: 500, bold: 700 } as const;
+
+// ===== 셀 렌더러 Props =====
+
+export interface CellRendererProps {
+  cell: CardCellDefinitionV2;
+  row: RowData;
+  inputValue?: number;
+  isCarted?: boolean;
+  isButtonLoading?: boolean;
+  onInputClick?: (e: React.MouseEvent) => void;
+  onCartAdd?: () => void;
+  onCartCancel?: () => void;
+  onButtonClick?: (cell: CardCellDefinitionV2, row: RowData) => void;
+  onActionButtonClick?: (taskPreset: string, row: RowData, buttonConfig?: Record<string, unknown>) => void;
+  onEnterSelectMode?: (whenStatus: string, buttonConfig: Record<string, unknown>) => void;
+  packageEntries?: PackageEntry[];
+  inputUnit?: string;
+}
+
+// ===== 메인 디스패치 =====
+
+export function renderCellV2(props: CellRendererProps): React.ReactNode {
+  switch (props.cell.type) {
+    case "text":
+      return <TextCell {...props} />;
+    case "field":
+      return <FieldCell {...props} />;
+    case "image":
+      return <ImageCell {...props} />;
+    case "badge":
+      return <BadgeCell {...props} />;
+    case "button":
+      return <ButtonCell {...props} />;
+    case "number-input":
+      return <NumberInputCell {...props} />;
+    case "cart-button":
+      return <CartButtonCell {...props} />;
+    case "package-summary":
+      return <PackageSummaryCell {...props} />;
+    case "status-badge":
+      return <StatusBadgeCell {...props} />;
+    case "timeline":
+      return <TimelineCell {...props} />;
+    case "action-buttons":
+      return <ActionButtonsCell {...props} />;
+    case "footer-status":
+      return <FooterStatusCell {...props} />;
+    default:
+      return <span className="text-[10px] text-muted-foreground">알 수 없는 셀 타입</span>;
+  }
+}
+
+// ===== 1. text =====
+
+function TextCell({ cell, row }: CellRendererProps) {
+  const value = cell.columnName ? row[cell.columnName] : "";
+  const fs = FONT_SIZE_MAP[cell.fontSize || "md"];
+  const fw = FONT_WEIGHT_MAP[cell.fontWeight || "normal"];
+
+  return (
+    <span
+      className="truncate"
+      style={{ fontSize: fs, fontWeight: fw, color: cell.textColor || undefined }}
+    >
+      {formatValue(value)}
+    </span>
+  );
+}
+
+// ===== 2. field (라벨+값) =====
+
+function FieldCell({ cell, row, inputValue }: CellRendererProps) {
+  const valueType = cell.valueType || "column";
+  const fs = FONT_SIZE_MAP[cell.fontSize || "md"];
+
+  const displayValue = useMemo(() => {
+    if (valueType !== "formula") {
+      const raw = cell.columnName ? row[cell.columnName] : undefined;
+      const formatted = formatValue(raw);
+      return cell.unit ? `${formatted} ${cell.unit}` : formatted;
+    }
+
+    if (cell.formulaLeft && cell.formulaOperator) {
+      const rightVal =
+        (cell.formulaRightType || "input") === "input"
+          ? (inputValue ?? 0)
+          : Number(row[cell.formulaRight || ""] ?? 0);
+      const leftVal = Number(row[cell.formulaLeft] ?? 0);
+
+      let result: number | null = null;
+      switch (cell.formulaOperator) {
+        case "+": result = leftVal + rightVal; break;
+        case "-": result = leftVal - rightVal; break;
+        case "*": result = leftVal * rightVal; break;
+        case "/": result = rightVal !== 0 ? leftVal / rightVal : null; break;
+      }
+
+      if (result !== null && isFinite(result)) {
+        const formatted = (Math.round(result * 100) / 100).toLocaleString();
+        return cell.unit ? `${formatted} ${cell.unit}` : formatted;
+      }
+      return "-";
+    }
+    return "-";
+  }, [valueType, cell, row, inputValue]);
+
+  const isFormula = valueType === "formula";
+  const isLabelLeft = cell.labelPosition === "left";
+
+  return (
+    <div
+      className={isLabelLeft ? "flex items-baseline gap-1" : "flex flex-col"}
+      style={{ fontSize: fs }}
+    >
+      {cell.label && (
+        <span className="shrink-0 text-[10px] text-muted-foreground">
+          {cell.label}{isLabelLeft ? ":" : ""}
+        </span>
+      )}
+      <span
+        className="truncate font-medium"
+        style={{ color: cell.textColor || (isFormula ? "#ea580c" : undefined) }}
+      >
+        {displayValue}
+      </span>
+    </div>
+  );
+}
+
+// ===== 3. image =====
+
+function ImageCell({ cell, row }: CellRendererProps) {
+  const value = cell.columnName ? row[cell.columnName] : "";
+  const imageUrl = value ? String(value) : (cell.defaultImage || DEFAULT_CARD_IMAGE);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center overflow-hidden rounded-md border bg-muted/30">
+      <img
+        src={imageUrl}
+        alt={cell.label || ""}
+        className="h-full w-full object-contain p-1"
+        onError={(e) => {
+          const target = e.target as HTMLImageElement;
+          if (target.src !== DEFAULT_CARD_IMAGE) target.src = DEFAULT_CARD_IMAGE;
+        }}
+      />
+    </div>
+  );
+}
+
+// ===== 4. badge =====
+
+function BadgeCell({ cell, row }: CellRendererProps) {
+  const value = cell.columnName ? row[cell.columnName] : "";
+  return (
+    <span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-medium text-primary">
+      {formatValue(value)}
+    </span>
+  );
+}
+
+// ===== 5. button =====
+
+function ButtonCell({ cell, row, isButtonLoading, onButtonClick }: CellRendererProps) {
+  return (
+    <Button
+      variant={cell.buttonVariant || "outline"}
+      size="sm"
+      className="h-7 text-[10px]"
+      disabled={isButtonLoading}
+      onClick={(e) => {
+        e.stopPropagation();
+        onButtonClick?.(cell, row);
+      }}
+    >
+      {isButtonLoading ? (
+        <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+      ) : null}
+      {cell.label || formatValue(cell.columnName ? row[cell.columnName] : "")}
+    </Button>
+  );
+}
+
+// ===== 6. number-input =====
+
+function NumberInputCell({ cell, row, inputValue, onInputClick }: CellRendererProps) {
+  const unit = cell.inputUnit || "EA";
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onInputClick?.(e);
+      }}
+      className="w-full rounded-lg border-2 border-input bg-background px-2 py-1.5 text-center hover:border-primary active:bg-muted"
+    >
+      <span className="block text-lg font-bold leading-tight">
+        {(inputValue ?? 0).toLocaleString()}
+      </span>
+      <span className="block text-[12px] text-muted-foreground">{unit}</span>
+    </button>
+  );
+}
+
+// ===== 7. cart-button =====
+
+function CartButtonCell({ cell, row, isCarted, onCartAdd, onCartCancel }: CellRendererProps) {
+  const iconSize = 18;
+  const label = cell.cartLabel || "담기";
+  const cancelLabel = cell.cartCancelLabel || "취소";
+
+  if (isCarted) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); onCartCancel?.(); }}
+        className="flex w-full flex-col items-center justify-center gap-0.5 rounded-xl bg-destructive px-2 py-1.5 text-destructive-foreground transition-colors duration-150 hover:bg-destructive/90 active:bg-destructive/80"
+      >
+        <X size={iconSize} />
+        <span className="text-[10px] font-semibold leading-tight">{cancelLabel}</span>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => { e.stopPropagation(); onCartAdd?.(); }}
+      className="flex w-full flex-col items-center justify-center gap-0.5 rounded-xl bg-linear-to-br from-amber-400 to-orange-500 px-2 py-1.5 text-white transition-colors duration-150 hover:from-amber-500 hover:to-orange-600 active:from-amber-600 active:to-orange-700"
+    >
+      {cell.cartIconType === "emoji" && cell.cartIconValue ? (
+        <span style={{ fontSize: `${iconSize}px` }}>{cell.cartIconValue}</span>
+      ) : (
+        <DynamicLucideIcon name={cell.cartIconValue} size={iconSize} />
+      )}
+      <span className="text-[10px] font-semibold leading-tight">{label}</span>
+    </button>
+  );
+}
+
+// ===== 8. package-summary =====
+
+function PackageSummaryCell({ cell, packageEntries, inputUnit }: CellRendererProps) {
+  if (!packageEntries || packageEntries.length === 0) return null;
+
+  return (
+    <div className="w-full border-t bg-emerald-50">
+      {packageEntries.map((entry, idx) => (
+        <div key={idx} className="flex items-center justify-between px-3 py-1.5">
+          <div className="flex items-center gap-2">
+            <span className="rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-bold text-white">
+              포장완료
+            </span>
+            <Package className="h-4 w-4 text-emerald-600" />
+            <span className="text-xs font-medium text-emerald-700">
+              {entry.packageCount}{entry.unitLabel} x {entry.quantityPerUnit}
+            </span>
+          </div>
+          <span className="text-xs font-bold text-emerald-700">
+            = {entry.totalQuantity.toLocaleString()}{inputUnit || "EA"}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ===== 9. status-badge =====
+
+const STATUS_COLORS: Record<string, { bg: string; text: string }> = {
+  waiting: { bg: "#94a3b820", text: "#64748b" },
+  accepted: { bg: "#3b82f620", text: "#2563eb" },
+  in_progress: { bg: "#f59e0b20", text: "#d97706" },
+  completed: { bg: "#10b98120", text: "#059669" },
+};
+
+function StatusBadgeCell({ cell, row }: CellRendererProps) {
+  const hasSubStatus = row[VIRTUAL_SUB_STATUS] !== undefined;
+  const effectiveValue = hasSubStatus
+    ? row[VIRTUAL_SUB_STATUS]
+    : (cell.statusColumn ? row[cell.statusColumn] : (cell.columnName ? row[cell.columnName] : ""));
+  const strValue = String(effectiveValue || "");
+  const mapped = cell.statusMap?.find((m) => m.value === strValue);
+
+  if (mapped) {
+    return (
+      <span
+        className="inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold"
+        style={{ backgroundColor: `${mapped.color}20`, color: mapped.color }}
+      >
+        {mapped.label}
+      </span>
+    );
+  }
+
+  const defaultColors = STATUS_COLORS[strValue];
+  if (defaultColors) {
+    const labelMap: Record<string, string> = {
+      waiting: "대기", accepted: "접수", in_progress: "진행", completed: "완료",
+    };
+    return (
+      <span
+        className="inline-flex items-center rounded-full px-2.5 py-0.5 text-[10px] font-semibold"
+        style={{ backgroundColor: defaultColors.bg, color: defaultColors.text }}
+      >
+        {labelMap[strValue] || strValue}
+      </span>
+    );
+  }
+
+  return (
+    <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+      {formatValue(effectiveValue)}
+    </span>
+  );
+}
+
+// ===== 10. timeline =====
+
+type TimelineStyle = { chipBg: string; chipText: string; icon: React.ReactNode };
+
+const TIMELINE_SEMANTIC_STYLES: Record<string, TimelineStyle> = {
+  done: { chipBg: "#10b981", chipText: "#ffffff", icon: <CheckCircle2 className="h-2.5 w-2.5" /> },
+  active: { chipBg: "#3b82f6", chipText: "#ffffff", icon: <CircleDot className="h-2.5 w-2.5 animate-pulse" /> },
+  pending: { chipBg: "#e2e8f0", chipText: "#64748b", icon: <Clock className="h-2.5 w-2.5" /> },
+};
+
+// 레거시 status 값 → semantic 매핑 (기존 데이터 호환)
+const LEGACY_STATUS_TO_SEMANTIC: Record<string, string> = {
+  completed: "done", in_progress: "active", accepted: "active", waiting: "pending",
+};
+
+function getTimelineStyle(step: TimelineProcessStep): TimelineStyle {
+  if (step.semantic) return TIMELINE_SEMANTIC_STYLES[step.semantic] || TIMELINE_SEMANTIC_STYLES.pending;
+  const fallback = LEGACY_STATUS_TO_SEMANTIC[step.status];
+  return TIMELINE_SEMANTIC_STYLES[fallback || "pending"];
+}
+
+function TimelineCell({ cell, row }: CellRendererProps) {
+  const processFlow = row.__processFlow__ as TimelineProcessStep[] | undefined;
+
+  if (!processFlow || processFlow.length === 0) {
+    const fallback = cell.processColumn ? row[cell.processColumn] : "";
+    return (
+      <span className="text-[10px] text-muted-foreground">
+        {formatValue(fallback)}
+      </span>
+    );
+  }
+
+  const maxVisible = cell.visibleCount || 5;
+  const currentIdx = processFlow.findIndex((s) => s.isCurrent);
+
+  type DisplayItem =
+    | { kind: "step"; step: TimelineProcessStep }
+    | { kind: "count"; count: number; side: "before" | "after" };
+
+  // 현재 항목 기준으로 앞뒤 배분하여 축약
+  const displayItems = useMemo((): DisplayItem[] => {
+    if (processFlow.length <= maxVisible) {
+      return processFlow.map((s) => ({ kind: "step" as const, step: s }));
+    }
+
+    const effectiveIdx = Math.max(0, currentIdx);
+    const priority = cell.timelinePriority || "before";
+    // 숫자칩 2개를 제외한 나머지를 앞뒤로 배분 (priority에 따라 여분 슬롯 방향 결정)
+    const slotForSteps = maxVisible - 2;
+    const half = Math.floor(slotForSteps / 2);
+    const extra = slotForSteps - half - 1;
+    const beforeSlots = priority === "before" ? Math.max(half, extra) : Math.min(half, extra);
+    const afterSlots = slotForSteps - beforeSlots - 1;
+
+    let startIdx = effectiveIdx - beforeSlots;
+    let endIdx = effectiveIdx + afterSlots;
+
+    // 경계 보정
+    if (startIdx < 0) {
+      endIdx = Math.min(processFlow.length - 1, endIdx + Math.abs(startIdx));
+      startIdx = 0;
+    }
+    if (endIdx >= processFlow.length) {
+      startIdx = Math.max(0, startIdx - (endIdx - processFlow.length + 1));
+      endIdx = processFlow.length - 1;
+    }
+
+    const items: DisplayItem[] = [];
+    const beforeCount = startIdx;
+    const afterCount = processFlow.length - 1 - endIdx;
+
+    if (beforeCount > 0) {
+      items.push({ kind: "count", count: beforeCount, side: "before" });
+    }
+    for (let i = startIdx; i <= endIdx; i++) {
+      items.push({ kind: "step", step: processFlow[i] });
+    }
+    if (afterCount > 0) {
+      items.push({ kind: "count", count: afterCount, side: "after" });
+    }
+
+    return items;
+  }, [processFlow, maxVisible, currentIdx]);
+
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const completedCount = processFlow.filter((s) => (s.semantic || LEGACY_STATUS_TO_SEMANTIC[s.status]) === "done").length;
+  const totalCount = processFlow.length;
+
+  return (
+    <>
+      <div
+        className={cn(
+          "flex w-full items-center gap-0.5 overflow-hidden px-0.5",
+          cell.showDetailModal !== false && "cursor-pointer",
+          cell.align === "center" ? "justify-center" : cell.align === "right" ? "justify-end" : "justify-start",
+        )}
+        onClick={cell.showDetailModal !== false ? (e) => { e.stopPropagation(); setModalOpen(true); } : undefined}
+        title={cell.showDetailModal !== false ? "클릭하여 전체 현황 보기" : undefined}
+      >
+        {displayItems.map((item, idx) => {
+          const isLast = idx === displayItems.length - 1;
+
+          if (item.kind === "count") {
+            return (
+              <React.Fragment key={`cnt-${item.side}`}>
+                <div
+                  className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-muted text-[8px] font-bold text-muted-foreground"
+                  title={item.side === "before" ? `이전 ${item.count}개` : `이후 ${item.count}개`}
+                >
+                  {item.count}
+                </div>
+                {!isLast && <div className="h-px w-1.5 shrink-0 border-t border-dashed border-muted-foreground/40" />}
+              </React.Fragment>
+            );
+          }
+
+          const styles = getTimelineStyle(item.step);
+
+          return (
+            <React.Fragment key={item.step.seqNo}>
+              <div
+                className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5"
+                style={{
+                  backgroundColor: styles.chipBg,
+                  color: styles.chipText,
+                  outline: item.step.isCurrent ? "2px solid #2563eb" : "none",
+                  outlineOffset: "1px",
+                }}
+                title={`${item.step.seqNo}. ${item.step.processName} (${item.step.status})`}
+              >
+                {styles.icon}
+                <span className="max-w-[48px] truncate text-[9px] font-medium leading-tight">
+                  {item.step.processName}
+                </span>
+              </div>
+              {!isLast && <div className="h-px w-1.5 shrink-0 border-t border-dashed border-muted-foreground/40" />}
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle className="text-base sm:text-lg">전체 현황</DialogTitle>
+            <DialogDescription className="text-xs sm:text-sm">
+              총 {totalCount}개 중 {completedCount}개 완료
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-0">
+            {processFlow.map((step, idx) => {
+              const styles = getTimelineStyle(step);
+              const sem = step.semantic || LEGACY_STATUS_TO_SEMANTIC[step.status] || "pending";
+              const statusLabel = sem === "done" ? "완료" : sem === "active" ? "진행" : "대기";
+
+              return (
+                <div key={step.seqNo} className="flex items-center">
+                  {/* 세로 연결선 + 아이콘 */}
+                  <div className="flex w-8 shrink-0 flex-col items-center">
+                    {idx > 0 && <div className="h-3 w-px bg-border" />}
+                    <div
+                      className="flex h-6 w-6 items-center justify-center rounded-full"
+                      style={{ backgroundColor: styles.chipBg, color: styles.chipText }}
+                    >
+                      {styles.icon}
+                    </div>
+                    {idx < processFlow.length - 1 && <div className="h-3 w-px bg-border" />}
+                  </div>
+
+                  {/* 항목 정보 */}
+                  <div className={cn(
+                    "ml-2 flex flex-1 items-center justify-between rounded-md px-3 py-2",
+                    step.isCurrent && "bg-primary/5 ring-1 ring-primary/30",
+                  )}>
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs text-muted-foreground">{step.seqNo}</span>
+                      <span className={cn(
+                        "text-sm",
+                        step.isCurrent ? "font-semibold" : "font-medium",
+                      )}>
+                        {step.processName}
+                      </span>
+                      {step.isCurrent && (
+                        <Star className="h-3 w-3 fill-primary text-primary" />
+                      )}
+                    </div>
+                    <span
+                      className="rounded-full px-2 py-0.5 text-[10px] font-medium"
+                      style={{ backgroundColor: styles.chipBg, color: styles.chipText }}
+                    >
+                      {statusLabel}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* 하단 진행률 바 */}
+          <div className="space-y-1 pt-2">
+            <div className="flex justify-between text-xs text-muted-foreground">
+              <span>진행률</span>
+              <span>{totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0}%</span>
+            </div>
+            <div className="h-2 w-full overflow-hidden rounded-full bg-secondary">
+              <div
+                className="h-full rounded-full bg-primary transition-all duration-300"
+                style={{ width: `${totalCount > 0 ? (completedCount / totalCount) * 100 : 0}%` }}
+              />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+// ===== 11. action-buttons =====
+
+function evaluateShowCondition(btn: ActionButtonDef, row: RowData): "visible" | "disabled" | "hidden" {
+  const cond = btn.showCondition;
+  if (!cond || cond.type === "always") return "visible";
+
+  let matched = false;
+
+  if (cond.type === "timeline-status") {
+    const subStatus = row[VIRTUAL_SUB_STATUS];
+    matched = subStatus !== undefined && String(subStatus) === cond.value;
+  } else if (cond.type === "column-value" && cond.column) {
+    matched = String(row[cond.column] ?? "") === (cond.value ?? "");
+  } else {
+    return "visible";
+  }
+
+  if (matched) return "visible";
+  return cond.unmatchBehavior === "disabled" ? "disabled" : "hidden";
+}
+
+function ActionButtonsCell({ cell, row, onActionButtonClick, onEnterSelectMode }: CellRendererProps) {
+  const processFlow = row.__processFlow__ as { isCurrent: boolean; processId?: string | number }[] | undefined;
+  const currentProcess = processFlow?.find((s) => s.isCurrent);
+  const currentProcessId = currentProcess?.processId;
+
+  if (cell.actionButtons && cell.actionButtons.length > 0) {
+    const evaluated = cell.actionButtons.map((btn) => ({
+      btn,
+      state: evaluateShowCondition(btn, row),
+    }));
+
+    const activeBtn = evaluated.find((e) => e.state === "visible");
+    const disabledBtn = activeBtn ? null : evaluated.find((e) => e.state === "disabled");
+    const pick = activeBtn || disabledBtn;
+    if (!pick) return null;
+
+    const { btn, state } = pick;
+
+    return (
+      <div className="flex items-center gap-1">
+        <Button
+          variant={btn.variant || "outline"}
+          size="sm"
+          disabled={state === "disabled"}
+          className="h-7 text-[10px]"
+          onClick={(e) => {
+            e.stopPropagation();
+            const actions = (btn.clickActions && btn.clickActions.length > 0) ? btn.clickActions : [btn.clickAction];
+            const firstAction = actions[0];
+
+            const config: Record<string, unknown> = {
+              ...firstAction,
+              __allActions: actions,
+              selectModeConfig: firstAction.selectModeButtons
+                ? { filterStatus: btn.showCondition?.value || "", buttons: firstAction.selectModeButtons }
+                : undefined,
+            };
+            if (currentProcessId !== undefined) config.__processId = currentProcessId;
+
+            if (firstAction.type === "select-mode" && onEnterSelectMode) {
+              onEnterSelectMode(btn.showCondition?.value || "", config);
+              return;
+            }
+
+            onActionButtonClick?.(btn.label, row, config);
+          }}
+        >
+          {btn.label}
+        </Button>
+      </div>
+    );
+  }
+
+  // 기존 구조 (actionRules) 폴백
+  const hasSubStatus = row[VIRTUAL_SUB_STATUS] !== undefined;
+  const statusValue = hasSubStatus
+    ? String(row[VIRTUAL_SUB_STATUS] || "")
+    : (cell.statusColumn ? String(row[cell.statusColumn] || "") : (cell.columnName ? String(row[cell.columnName] || "") : ""));
+  const rules = cell.actionRules || [];
+  const matchedRule = rules.find((r) => r.whenStatus === statusValue);
+  if (!matchedRule) return null;
+
+  return (
+    <div className="flex items-center gap-1">
+      {matchedRule.buttons.map((btn, idx) => (
+        <Button
+          key={idx}
+          variant={btn.variant || "outline"}
+          size="sm"
+          className="h-7 text-[10px]"
+          onClick={(e) => {
+            e.stopPropagation();
+            const config = { ...(btn as Record<string, unknown>) };
+            if (currentProcessId !== undefined) config.__processId = currentProcessId;
+            if (btn.clickMode === "select-mode" && onEnterSelectMode) {
+              onEnterSelectMode(matchedRule.whenStatus, config);
+              return;
+            }
+            onActionButtonClick?.(btn.taskPreset, row, config);
+          }}
+        >
+          {btn.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+// ===== 12. footer-status =====
+
+function FooterStatusCell({ cell, row }: CellRendererProps) {
+  const value = cell.footerStatusColumn ? row[cell.footerStatusColumn] : "";
+  const strValue = String(value || "");
+  const mapped = cell.footerStatusMap?.find((m) => m.value === strValue);
+
+  if (!strValue && !cell.footerLabel) return null;
+
+  return (
+    <div
+      className="flex w-full items-center justify-between px-2 py-1"
+      style={{ borderTop: cell.showTopBorder !== false ? "1px solid hsl(var(--border))" : "none" }}
+    >
+      {cell.footerLabel && (
+        <span className="text-[10px] text-muted-foreground">{cell.footerLabel}</span>
+      )}
+      {mapped ? (
+        <span
+          className="inline-flex items-center rounded-full px-2 py-0.5 text-[9px] font-semibold"
+          style={{ backgroundColor: `${mapped.color}20`, color: mapped.color }}
+        >
+          {mapped.label}
+        </span>
+      ) : strValue ? (
+        <span className="text-[10px] font-medium text-muted-foreground">
+          {strValue}
+        </span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/index.tsx b/frontend/lib/registry/pop-components/pop-card-list-v2/index.tsx
new file mode 100644
index 00000000..138ab941
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/index.tsx
@@ -0,0 +1,61 @@
+"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"],
+});
diff --git a/frontend/lib/registry/pop-components/pop-card-list-v2/migrate.ts b/frontend/lib/registry/pop-components/pop-card-list-v2/migrate.ts
new file mode 100644
index 00000000..e4bfed8f
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-card-list-v2/migrate.ts
@@ -0,0 +1,163 @@
+/**
+ * pop-card-list v1 -> v2 마이그레이션 함수
+ *
+ * 기존 PopCardListConfig의 고정 레이아웃(헤더/이미지/필드/입력/담기/포장)을
+ * CardGridConfigV2 셀 배열로 변환하여 PopCardListV2Config를 생성한다.
+ */
+
+import type {
+  PopCardListConfig,
+  PopCardListV2Config,
+  CardCellDefinitionV2,
+} from "../types";
+
+export function migrateCardListConfig(old: PopCardListConfig): PopCardListV2Config {
+  const cells: CardCellDefinitionV2[] = [];
+  let nextRow = 1;
+
+  // 1. 헤더 행 (코드 + 제목)
+  if (old.cardTemplate?.header?.codeField || old.cardTemplate?.header?.titleField) {
+    if (old.cardTemplate.header.codeField) {
+      cells.push({
+        id: "h-code",
+        row: nextRow,
+        col: 1,
+        rowSpan: 1,
+        colSpan: 1,
+        type: "text",
+        columnName: old.cardTemplate.header.codeField,
+        fontSize: "sm",
+        textColor: "hsl(var(--muted-foreground))",
+      });
+    }
+    if (old.cardTemplate.header.titleField) {
+      cells.push({
+        id: "h-title",
+        row: nextRow,
+        col: 2,
+        rowSpan: 1,
+        colSpan: old.cardTemplate.header.codeField ? 2 : 3,
+        type: "text",
+        columnName: old.cardTemplate.header.titleField,
+        fontSize: "md",
+        fontWeight: "bold",
+      });
+    }
+    nextRow++;
+  }
+
+  // 2. 이미지 (왼쪽, 본문 높이만큼 rowSpan)
+  const bodyFieldCount = old.cardTemplate?.body?.fields?.length || 0;
+  const bodyRowSpan = Math.max(1, bodyFieldCount);
+
+  if (old.cardTemplate?.image?.enabled) {
+    cells.push({
+      id: "img",
+      row: nextRow,
+      col: 1,
+      rowSpan: bodyRowSpan,
+      colSpan: 1,
+      type: "image",
+      columnName: old.cardTemplate.image.imageColumn || "",
+      defaultImage: old.cardTemplate.image.defaultImage,
+    });
+  }
+
+  // 3. 본문 필드들 (이미지 오른쪽)
+  const fieldStartCol = old.cardTemplate?.image?.enabled ? 2 : 1;
+  const fieldColSpan = old.cardTemplate?.image?.enabled ? 2 : 3;
+  const hasRightActions = !!(old.inputField?.enabled || old.cartAction);
+
+  (old.cardTemplate?.body?.fields || []).forEach((field, i) => {
+    cells.push({
+      id: `f-${i}`,
+      row: nextRow + i,
+      col: fieldStartCol,
+      rowSpan: 1,
+      colSpan: hasRightActions ? fieldColSpan - 1 : fieldColSpan,
+      type: "field",
+      columnName: field.columnName,
+      label: field.label,
+      valueType: field.valueType,
+      formulaLeft: field.formulaLeft,
+      formulaOperator: field.formulaOperator as CardCellDefinitionV2["formulaOperator"],
+      formulaRight: field.formulaRight,
+      formulaRightType: field.formulaRightType as CardCellDefinitionV2["formulaRightType"],
+      unit: field.unit,
+      textColor: field.textColor,
+    });
+  });
+
+  // 4. 수량 입력 + 담기 버튼 (오른쪽 열)
+  const rightCol = 3;
+  if (old.inputField?.enabled) {
+    cells.push({
+      id: "input",
+      row: nextRow,
+      col: rightCol,
+      rowSpan: Math.ceil(bodyRowSpan / 2),
+      colSpan: 1,
+      type: "number-input",
+      inputUnit: old.inputField.unit,
+      limitColumn: old.inputField.limitColumn || old.inputField.maxColumn,
+    });
+  }
+  if (old.cartAction) {
+    cells.push({
+      id: "cart",
+      row: nextRow + Math.ceil(bodyRowSpan / 2),
+      col: rightCol,
+      rowSpan: Math.floor(bodyRowSpan / 2) || 1,
+      colSpan: 1,
+      type: "cart-button",
+      cartLabel: old.cartAction.label,
+      cartCancelLabel: old.cartAction.cancelLabel,
+      cartIconType: old.cartAction.iconType,
+      cartIconValue: old.cartAction.iconValue,
+    });
+  }
+
+  // 5. 포장 요약 (마지막 행, full-width)
+  if (old.packageConfig?.enabled) {
+    const summaryRow = nextRow + bodyRowSpan;
+    cells.push({
+      id: "pkg",
+      row: summaryRow,
+      col: 1,
+      rowSpan: 1,
+      colSpan: 3,
+      type: "package-summary",
+    });
+  }
+
+  // 그리드 크기 계산
+  const maxRow = cells.length > 0 ? Math.max(...cells.map((c) => c.row + c.rowSpan - 1)) : 1;
+  const maxCol = 3;
+
+  return {
+    dataSource: old.dataSource,
+    cardGrid: {
+      rows: maxRow,
+      cols: maxCol,
+      colWidths: old.cardTemplate?.image?.enabled
+        ? ["1fr", "2fr", "1fr"]
+        : ["1fr", "2fr", "1fr"],
+      gap: 2,
+      showCellBorder: false,
+      cells,
+    },
+    scrollDirection: old.scrollDirection,
+    cardSize: old.cardSize,
+    gridColumns: old.gridColumns,
+    gridRows: old.gridRows,
+    cardGap: 8,
+    overflow: { mode: "loadMore", visibleCount: 6, loadMoreCount: 6 },
+    cardClickAction: "none",
+    responsiveDisplay: old.responsiveDisplay,
+    inputField: old.inputField,
+    packageConfig: old.packageConfig,
+    cartAction: old.cartAction,
+    cartListMode: old.cartListMode,
+    saveMapping: old.saveMapping,
+  };
+}
diff --git a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
index 4b7c182c..60260693 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/PopCardListComponent.tsx
@@ -256,6 +256,12 @@ export function PopCardListComponent({
     return unsub;
   }, [componentId, subscribe]);
 
+  // 전체 rows 발행 (status-chip 등 연결된 컴포넌트에서 건수 집계용)
+  useEffect(() => {
+    if (!componentId || loading) return;
+    publish(`__comp_output__${componentId}__all_rows`, rows);
+  }, [componentId, rows, loading, publish]);
+
   // cart를 ref로 유지: 이벤트 콜백에서 항상 최신 참조를 사용
   const cartRef = useRef(cart);
   cartRef.current = cart;
diff --git a/frontend/lib/registry/pop-components/pop-card-list/PopCardListConfig.tsx b/frontend/lib/registry/pop-components/pop-card-list/PopCardListConfig.tsx
index 6383974b..1c351cf2 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/PopCardListConfig.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/PopCardListConfig.tsx
@@ -2039,16 +2039,29 @@ function FilterSettingsSection({
           {filters.map((filter, index) => (
             <div
               key={index}
-              className="flex items-center gap-1 rounded-md border bg-card p-1.5"
+              className="space-y-1.5 rounded-md border bg-card p-2"
             >
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] font-medium text-muted-foreground">
+                  조건 {index + 1}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-destructive"
+                  onClick={() => deleteFilter(index)}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
               <Select
                 value={filter.column || ""}
                 onValueChange={(val) =>
                   updateFilter(index, { ...filter, column: val })
                 }
               >
-                <SelectTrigger className="h-7 text-xs flex-1">
-                  <SelectValue placeholder="컬럼" />
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="컬럼 선택" />
                 </SelectTrigger>
                 <SelectContent>
                   {columns.map((col) => (
@@ -2058,45 +2071,36 @@ function FilterSettingsSection({
                   ))}
                 </SelectContent>
               </Select>
-
-              <Select
-                value={filter.operator}
-                onValueChange={(val) =>
-                  updateFilter(index, {
-                    ...filter,
-                    operator: val as FilterOperator,
-                  })
-                }
-              >
-                <SelectTrigger className="h-7 w-16 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {operators.map((op) => (
-                    <SelectItem key={op.value} value={op.value}>
-                      {op.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-
-              <Input
-                value={filter.value}
-                onChange={(e) =>
-                  updateFilter(index, { ...filter, value: e.target.value })
-                }
-                placeholder="값"
-                className="h-7 flex-1 text-xs"
-              />
-
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 shrink-0 text-destructive"
-                onClick={() => deleteFilter(index)}
-              >
-                <Trash2 className="h-3 w-3" />
-              </Button>
+              <div className="flex items-center gap-2">
+                <Select
+                  value={filter.operator}
+                  onValueChange={(val) =>
+                    updateFilter(index, {
+                      ...filter,
+                      operator: val as FilterOperator,
+                    })
+                  }
+                >
+                  <SelectTrigger className="h-8 w-20 shrink-0 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {operators.map((op) => (
+                      <SelectItem key={op.value} value={op.value}>
+                        {op.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Input
+                  value={filter.value}
+                  onChange={(e) =>
+                    updateFilter(index, { ...filter, value: e.target.value })
+                  }
+                  placeholder="값 입력"
+                  className="h-8 flex-1 text-xs"
+                />
+              </div>
             </div>
           ))}
         </div>
@@ -2663,46 +2667,51 @@ function FilterCriteriaSection({
       ) : (
         <div className="space-y-2">
           {filters.map((filter, index) => (
-            <div key={index} className="flex items-center gap-1 rounded-md border bg-card p-1.5">
-              <div className="flex-1">
-                <GroupedColumnSelect
-                  columnGroups={columnGroups}
-                  value={filter.column || undefined}
-                  onValueChange={(val) => updateFilter(index, { ...filter, column: val || "" })}
-                  placeholder="컬럼 선택"
+            <div key={index} className="space-y-1.5 rounded-md border bg-card p-2">
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] font-medium text-muted-foreground">
+                  조건 {index + 1}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6 text-destructive"
+                  onClick={() => deleteFilter(index)}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </Button>
+              </div>
+              <GroupedColumnSelect
+                columnGroups={columnGroups}
+                value={filter.column || undefined}
+                onValueChange={(val) => updateFilter(index, { ...filter, column: val || "" })}
+                placeholder="컬럼 선택"
+              />
+              <div className="flex items-center gap-2">
+                <Select
+                  value={filter.operator}
+                  onValueChange={(val) =>
+                    updateFilter(index, { ...filter, operator: val as FilterOperator })
+                  }
+                >
+                  <SelectTrigger className="h-8 w-20 shrink-0 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {FILTER_OPERATORS.map((op) => (
+                      <SelectItem key={op.value} value={op.value}>
+                        {op.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Input
+                  value={filter.value}
+                  onChange={(e) => updateFilter(index, { ...filter, value: e.target.value })}
+                  placeholder="값 입력"
+                  className="h-8 flex-1 text-xs"
                 />
               </div>
-              <Select
-                value={filter.operator}
-                onValueChange={(val) =>
-                  updateFilter(index, { ...filter, operator: val as FilterOperator })
-                }
-              >
-                <SelectTrigger className="h-7 w-16 text-xs">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {FILTER_OPERATORS.map((op) => (
-                    <SelectItem key={op.value} value={op.value}>
-                      {op.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Input
-                value={filter.value}
-                onChange={(e) => updateFilter(index, { ...filter, value: e.target.value })}
-                placeholder="값"
-                className="h-7 flex-1 text-xs"
-              />
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7 shrink-0 text-destructive"
-                onClick={() => deleteFilter(index)}
-              >
-                <Trash2 className="h-3 w-3" />
-              </Button>
             </div>
           ))}
         </div>
diff --git a/frontend/lib/registry/pop-components/pop-card-list/index.tsx b/frontend/lib/registry/pop-components/pop-card-list/index.tsx
index b9b769af..fe6a43df 100644
--- a/frontend/lib/registry/pop-components/pop-card-list/index.tsx
+++ b/frontend/lib/registry/pop-components/pop-card-list/index.tsx
@@ -61,6 +61,7 @@ PopComponentRegistry.registerComponent({
   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: "장바구니 모드에서 체크박스로 선택된 항목 배열" },
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/utils/dataFetcher.ts b/frontend/lib/registry/pop-components/pop-dashboard/utils/dataFetcher.ts
index 0f6adda6..b05846ef 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/utils/dataFetcher.ts
+++ b/frontend/lib/registry/pop-components/pop-dashboard/utils/dataFetcher.ts
@@ -34,6 +34,7 @@ export interface ColumnInfo {
   type: string;
   udtName: string;
   isPrimaryKey?: boolean;
+  comment?: string;
 }
 
 // ===== SQL 값 이스케이프 =====
@@ -330,6 +331,7 @@ export async function fetchTableColumns(
           type: col.dataType || col.data_type || col.type || "unknown",
           udtName: col.dbType || col.udt_name || col.udtName || "unknown",
           isPrimaryKey: col.isPrimaryKey === true || col.isPrimaryKey === "true" || col.is_primary_key === true || col.is_primary_key === "true",
+          comment: col.columnComment || col.description || "",
         }));
       }
     }
diff --git a/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx b/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx
index dace22f6..0438df90 100644
--- a/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-field/PopFieldComponent.tsx
@@ -203,6 +203,32 @@ export function PopFieldComponent({
     return unsub;
   }, [componentId, subscribe, cfg.readSource, fetchReadSourceData]);
 
+  useEffect(() => {
+    const unsub = subscribe("scan_auto_fill", (payload: unknown) => {
+      const data = payload as Record<string, unknown> | null;
+      if (!data || typeof data !== "object") return;
+
+      const fieldNames = new Set<string>();
+      for (const section of cfg.sections) {
+        for (const f of section.fields ?? []) {
+          if (f.fieldName) fieldNames.add(f.fieldName);
+        }
+      }
+
+      const matched: Record<string, unknown> = {};
+      for (const [key, value] of Object.entries(data)) {
+        if (fieldNames.has(key)) {
+          matched[key] = value;
+        }
+      }
+
+      if (Object.keys(matched).length > 0) {
+        setAllValues((prev) => ({ ...prev, ...matched }));
+      }
+    });
+    return unsub;
+  }, [subscribe, cfg.sections]);
+
   // 데이터 수집 요청 수신: 버튼에서 collect_data 요청 → allValues + saveConfig 응답
   useEffect(() => {
     if (!componentId) return;
@@ -220,7 +246,7 @@ export function PopFieldComponent({
             ? {
                 targetTable: cfg.saveConfig.tableName,
                 columnMapping: Object.fromEntries(
-                  (cfg.saveConfig.fieldMappings || []).map((m) => [m.fieldId, m.targetColumn])
+                  (cfg.saveConfig.fieldMappings || []).map((m) => [fieldIdToName[m.fieldId] || m.fieldId, m.targetColumn])
                 ),
                 autoGenMappings: (cfg.saveConfig.autoGenMappings || [])
                   .filter((m) => m.numberingRuleId)
@@ -228,6 +254,7 @@ export function PopFieldComponent({
                     numberingRuleId: m.numberingRuleId!,
                     targetColumn: m.targetColumn,
                     showResultModal: m.showResultModal,
+                    shareAcrossItems: m.shareAcrossItems ?? false,
                   })),
                 hiddenMappings: (cfg.saveConfig.hiddenMappings || [])
                   .filter((m) => m.targetColumn)
@@ -247,7 +274,7 @@ export function PopFieldComponent({
       }
     );
     return unsub;
-  }, [componentId, subscribe, publish, allValues, cfg.saveConfig]);
+  }, [componentId, subscribe, publish, allValues, cfg.saveConfig, fieldIdToName]);
 
   // 필드 값 변경 핸들러
   const handleFieldChange = useCallback(
diff --git a/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx b/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
index 3b51667f..8e0f8ad1 100644
--- a/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
+++ b/frontend/lib/registry/pop-components/pop-field/PopFieldConfig.tsx
@@ -398,8 +398,19 @@ function SaveTabContent({
       syncAndUpdateSaveMappings((prev) =>
         prev.map((m) => (m.fieldId === fieldId ? { ...m, ...partial } : m))
       );
+
+      if (partial.targetColumn !== undefined) {
+        const newFieldName = partial.targetColumn || "";
+        const sections = cfg.sections.map((s) => ({
+          ...s,
+          fields: (s.fields ?? []).map((f) =>
+            f.id === fieldId ? { ...f, fieldName: newFieldName } : f
+          ),
+        }));
+        onUpdateConfig({ sections });
+      }
     },
-    [syncAndUpdateSaveMappings]
+    [syncAndUpdateSaveMappings, cfg, onUpdateConfig]
   );
 
   // --- 숨은 필드 매핑 로직 ---
@@ -1337,7 +1348,19 @@ function SaveTabContent({
                       />
                       <Label className="text-[10px]">결과 모달</Label>
                     </div>
+                    <div className="flex items-center gap-1.5">
+                      <Switch
+                        checked={m.shareAcrossItems ?? false}
+                        onCheckedChange={(v) => updateAutoGenMapping(m.id, { shareAcrossItems: v })}
+                      />
+                      <Label className="text-[10px]">일괄 채번</Label>
+                    </div>
                   </div>
+                  {m.shareAcrossItems && (
+                    <p className="text-[9px] text-muted-foreground">
+                      저장되는 모든 행에 동일한 번호를 부여합니다
+                    </p>
+                  )}
                 </div>
               );
             })}
@@ -1414,7 +1437,7 @@ function SectionEditor({
     const newField: PopFieldItem = {
       id: fieldId,
       inputType: "text",
-      fieldName: fieldId,
+      fieldName: "",
       labelText: "",
       readOnly: false,
     };
diff --git a/frontend/lib/registry/pop-components/pop-field/types.ts b/frontend/lib/registry/pop-components/pop-field/types.ts
index 7118d0a6..f0813e6c 100644
--- a/frontend/lib/registry/pop-components/pop-field/types.ts
+++ b/frontend/lib/registry/pop-components/pop-field/types.ts
@@ -153,6 +153,7 @@ export interface PopFieldAutoGenMapping {
   numberingRuleId?: string;
   showInForm: boolean;
   showResultModal: boolean;
+  shareAcrossItems?: boolean;
 }
 
 export interface PopFieldSaveConfig {
diff --git a/frontend/lib/registry/pop-components/pop-profile.tsx b/frontend/lib/registry/pop-components/pop-profile.tsx
new file mode 100644
index 00000000..49aaa10c
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-profile.tsx
@@ -0,0 +1,336 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Monitor, LayoutGrid, LogOut, UserCircle } from "lucide-react";
+import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";
+import { useAuth } from "@/hooks/useAuth";
+
+// ========================================
+// 타입 정의
+// ========================================
+
+type AvatarSize = "sm" | "md" | "lg";
+
+export interface PopProfileConfig {
+  avatarSize?: AvatarSize;
+  showDashboardLink?: boolean;
+  showPcMode?: boolean;
+  showLogout?: boolean;
+}
+
+const DEFAULT_CONFIG: PopProfileConfig = {
+  avatarSize: "md",
+  showDashboardLink: true,
+  showPcMode: true,
+  showLogout: true,
+};
+
+const AVATAR_SIZE_MAP: Record<AvatarSize, { container: string; text: string; px: number }> = {
+  sm: { container: "h-8 w-8", text: "text-sm", px: 32 },
+  md: { container: "h-10 w-10", text: "text-base", px: 40 },
+  lg: { container: "h-12 w-12", text: "text-lg", px: 48 },
+};
+
+const AVATAR_SIZE_LABELS: Record<AvatarSize, string> = {
+  sm: "작은 (32px)",
+  md: "보통 (40px)",
+  lg: "큰 (48px)",
+};
+
+// ========================================
+// 뷰어 컴포넌트
+// ========================================
+
+interface PopProfileComponentProps {
+  config?: PopProfileConfig;
+  componentId?: string;
+  screenId?: string;
+}
+
+function PopProfileComponent({ config: rawConfig }: PopProfileComponentProps) {
+  const router = useRouter();
+  const { user, isLoggedIn, logout } = useAuth();
+  const [open, setOpen] = useState(false);
+
+  const config = useMemo(() => ({
+    ...DEFAULT_CONFIG,
+    ...rawConfig,
+  }), [rawConfig]);
+
+  const sizeInfo = AVATAR_SIZE_MAP[config.avatarSize || "md"];
+  const initial = user?.userName?.substring(0, 1)?.toUpperCase() || "?";
+
+  const handlePcMode = () => {
+    setOpen(false);
+    router.push("/");
+  };
+
+  const handleDashboard = () => {
+    setOpen(false);
+    router.push("/pop");
+  };
+
+  const handleLogout = async () => {
+    setOpen(false);
+    await logout();
+  };
+
+  const handleLogin = () => {
+    setOpen(false);
+    router.push("/login");
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            className={cn(
+              "flex items-center justify-center rounded-full",
+              "bg-primary text-primary-foreground font-bold",
+              "border-2 border-primary/20 cursor-pointer",
+              "transition-all duration-150",
+              "hover:scale-105 hover:border-primary/40",
+              "active:scale-95",
+              sizeInfo.container,
+              sizeInfo.text,
+            )}
+            style={{ minWidth: sizeInfo.px, minHeight: sizeInfo.px }}
+          >
+            {user?.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+              <img
+                src={user.photo}
+                alt={user.userName || "User"}
+                className="h-full w-full rounded-full object-cover"
+              />
+            ) : (
+              initial
+            )}
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-60 p-0"
+          align="end"
+          sideOffset={8}
+        >
+          {isLoggedIn && user ? (
+            <>
+              {/* 사용자 정보 */}
+              <div className="flex items-center gap-3 border-b p-4">
+                <div className={cn(
+                  "flex shrink-0 items-center justify-center rounded-full",
+                  "bg-primary text-primary-foreground font-bold",
+                  "h-10 w-10 text-base",
+                )}>
+                  {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+                    <img
+                      src={user.photo}
+                      alt={user.userName || "User"}
+                      className="h-full w-full rounded-full object-cover"
+                    />
+                  ) : (
+                    initial
+                  )}
+                </div>
+                <div className="flex min-w-0 flex-col gap-0.5">
+                  <span className="truncate text-sm font-semibold">
+                    {user.userName || "사용자"} ({user.userId || ""})
+                  </span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user.deptName || "부서 정보 없음"}
+                  </span>
+                </div>
+              </div>
+
+              {/* 메뉴 항목 */}
+              <div className="p-1.5">
+                {config.showDashboardLink && (
+                  <button
+                    onClick={handleDashboard}
+                    className="flex w-full items-center gap-3 rounded-md px-3 py-3 text-sm transition-colors hover:bg-accent"
+                    style={{ minHeight: 48 }}
+                  >
+                    <LayoutGrid className="h-4 w-4 text-muted-foreground" />
+                    POP 대시보드
+                  </button>
+                )}
+                {config.showPcMode && (
+                  <button
+                    onClick={handlePcMode}
+                    className="flex w-full items-center gap-3 rounded-md px-3 py-3 text-sm transition-colors hover:bg-accent"
+                    style={{ minHeight: 48 }}
+                  >
+                    <Monitor className="h-4 w-4 text-muted-foreground" />
+                    PC 모드
+                  </button>
+                )}
+                {config.showLogout && (
+                  <>
+                    <div className="mx-2 my-1 border-t" />
+                    <button
+                      onClick={handleLogout}
+                      className="flex w-full items-center gap-3 rounded-md px-3 py-3 text-sm text-destructive transition-colors hover:bg-destructive/10"
+                      style={{ minHeight: 48 }}
+                    >
+                      <LogOut className="h-4 w-4" />
+                      로그아웃
+                    </button>
+                  </>
+                )}
+              </div>
+            </>
+          ) : (
+            <div className="p-4">
+              <p className="mb-3 text-center text-sm text-muted-foreground">
+                로그인이 필요합니다
+              </p>
+              <button
+                onClick={handleLogin}
+                className="flex w-full items-center justify-center gap-2 rounded-md bg-primary px-3 py-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+                style={{ minHeight: 48 }}
+              >
+                로그인
+              </button>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+// ========================================
+// 설정 패널
+// ========================================
+
+interface PopProfileConfigPanelProps {
+  config: PopProfileConfig;
+  onUpdate: (config: PopProfileConfig) => void;
+}
+
+function PopProfileConfigPanel({ config: rawConfig, onUpdate }: PopProfileConfigPanelProps) {
+  const config = useMemo(() => ({
+    ...DEFAULT_CONFIG,
+    ...rawConfig,
+  }), [rawConfig]);
+
+  const updateConfig = (partial: Partial<PopProfileConfig>) => {
+    onUpdate({ ...config, ...partial });
+  };
+
+  return (
+    <div className="space-y-4 p-3">
+      {/* 아바타 크기 */}
+      <div className="space-y-1.5">
+        <Label className="text-xs sm:text-sm">아바타 크기</Label>
+        <Select
+          value={config.avatarSize || "md"}
+          onValueChange={(v) => updateConfig({ avatarSize: v as AvatarSize })}
+        >
+          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {(Object.entries(AVATAR_SIZE_LABELS) as [AvatarSize, string][]).map(([key, label]) => (
+              <SelectItem key={key} value={key} className="text-xs sm:text-sm">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 메뉴 항목 토글 */}
+      <div className="space-y-3">
+        <Label className="text-xs sm:text-sm">메뉴 항목</Label>
+
+        <div className="flex items-center justify-between">
+          <Label className="text-xs text-muted-foreground">POP 대시보드 이동</Label>
+          <Switch
+            checked={config.showDashboardLink ?? true}
+            onCheckedChange={(v) => updateConfig({ showDashboardLink: v })}
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label className="text-xs text-muted-foreground">PC 모드 전환</Label>
+          <Switch
+            checked={config.showPcMode ?? true}
+            onCheckedChange={(v) => updateConfig({ showPcMode: v })}
+          />
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label className="text-xs text-muted-foreground">로그아웃</Label>
+          <Switch
+            checked={config.showLogout ?? true}
+            onCheckedChange={(v) => updateConfig({ showLogout: v })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 디자이너 미리보기
+// ========================================
+
+function PopProfilePreview({ config }: { config?: PopProfileConfig }) {
+  const size = AVATAR_SIZE_MAP[config?.avatarSize || "md"];
+  return (
+    <div className="flex h-full w-full items-center justify-center gap-2">
+      <div className={cn(
+        "flex items-center justify-center rounded-full",
+        "bg-primary/20 text-primary",
+        size.container, size.text,
+      )}>
+        <UserCircle className="h-5 w-5" />
+      </div>
+      <span className="text-xs text-muted-foreground">프로필</span>
+    </div>
+  );
+}
+
+// ========================================
+// 레지스트리 등록
+// ========================================
+
+PopComponentRegistry.registerComponent({
+  id: "pop-profile",
+  name: "프로필",
+  description: "사용자 프로필 / PC 전환 / 로그아웃",
+  category: "action",
+  icon: "UserCircle",
+  component: PopProfileComponent,
+  configPanel: PopProfileConfigPanel,
+  preview: PopProfilePreview,
+  defaultProps: {
+    avatarSize: "md",
+    showDashboardLink: true,
+    showPcMode: true,
+    showLogout: true,
+  },
+  connectionMeta: {
+    sendable: [],
+    receivable: [],
+  },
+  touchOptimized: true,
+  supportedDevices: ["mobile", "tablet"],
+});
diff --git a/frontend/lib/registry/pop-components/pop-scanner.tsx b/frontend/lib/registry/pop-components/pop-scanner.tsx
new file mode 100644
index 00000000..e2230170
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-scanner.tsx
@@ -0,0 +1,694 @@
+"use client";
+
+import React, { useState, useCallback, useMemo, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { ScanLine } from "lucide-react";
+import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";
+import { usePopEvent } from "@/hooks/pop/usePopEvent";
+import { BarcodeScanModal } from "@/components/common/BarcodeScanModal";
+import type {
+  PopDataConnection,
+  PopComponentDefinitionV5,
+} from "@/components/pop/designer/types/pop-layout";
+
+// ========================================
+// 타입 정의
+// ========================================
+
+export interface ScanFieldMapping {
+  sourceKey: string;
+  outputIndex: number;
+  label: string;
+  targetComponentId: string;
+  targetFieldName: string;
+  enabled: boolean;
+}
+
+export interface PopScannerConfig {
+  barcodeFormat: "all" | "1d" | "2d";
+  autoSubmit: boolean;
+  showLastScan: boolean;
+  buttonLabel: string;
+  buttonVariant: "default" | "outline" | "secondary";
+  parseMode: "none" | "auto" | "json";
+  fieldMappings: ScanFieldMapping[];
+}
+
+// 연결된 컴포넌트의 필드 정보
+interface ConnectedFieldInfo {
+  componentId: string;
+  componentName: string;
+  componentType: string;
+  fieldName: string;
+  fieldLabel: string;
+}
+
+const DEFAULT_SCANNER_CONFIG: PopScannerConfig = {
+  barcodeFormat: "all",
+  autoSubmit: true,
+  showLastScan: false,
+  buttonLabel: "스캔",
+  buttonVariant: "default",
+  parseMode: "none",
+  fieldMappings: [],
+};
+
+// ========================================
+// 파싱 유틸리티
+// ========================================
+
+function tryParseJson(raw: string): Record<string, string> | null {
+  try {
+    const parsed = JSON.parse(raw);
+    if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+      const result: Record<string, string> = {};
+      for (const [k, v] of Object.entries(parsed)) {
+        result[k] = String(v);
+      }
+      return result;
+    }
+  } catch {
+    // JSON이 아닌 경우
+  }
+  return null;
+}
+
+function parseScanResult(
+  raw: string,
+  mode: PopScannerConfig["parseMode"]
+): Record<string, string> | null {
+  if (mode === "none") return null;
+  return tryParseJson(raw);
+}
+
+// ========================================
+// 연결된 컴포넌트 필드 추출
+// ========================================
+
+function getConnectedFields(
+  componentId?: string,
+  connections?: PopDataConnection[],
+  allComponents?: PopComponentDefinitionV5[],
+): ConnectedFieldInfo[] {
+  if (!componentId || !connections || !allComponents) return [];
+
+  const targetIds = connections
+    .filter((c) => c.sourceComponent === componentId)
+    .map((c) => c.targetComponent);
+
+  const uniqueTargetIds = [...new Set(targetIds)];
+  const fields: ConnectedFieldInfo[] = [];
+
+  for (const tid of uniqueTargetIds) {
+    const comp = allComponents.find((c) => c.id === tid);
+    if (!comp?.config) continue;
+    const compCfg = comp.config as Record<string, unknown>;
+    const compType = comp.type || "";
+    const compName = (comp as Record<string, unknown>).label as string || comp.type || tid;
+
+    // pop-search: filterColumns (복수) 또는 modalConfig.valueField 또는 fieldName (단일)
+    const filterCols = compCfg.filterColumns as string[] | undefined;
+    const modalCfg = compCfg.modalConfig as { valueField?: string; displayField?: string } | undefined;
+
+    if (Array.isArray(filterCols) && filterCols.length > 0) {
+      for (const col of filterCols) {
+        fields.push({
+          componentId: tid,
+          componentName: compName,
+          componentType: compType,
+          fieldName: col,
+          fieldLabel: col,
+        });
+      }
+    } else if (modalCfg?.valueField) {
+      fields.push({
+        componentId: tid,
+        componentName: compName,
+        componentType: compType,
+        fieldName: modalCfg.valueField,
+        fieldLabel: (compCfg.placeholder as string) || modalCfg.valueField,
+      });
+    } else if (compCfg.fieldName && typeof compCfg.fieldName === "string") {
+      fields.push({
+        componentId: tid,
+        componentName: compName,
+        componentType: compType,
+        fieldName: compCfg.fieldName,
+        fieldLabel: (compCfg.placeholder as string) || compCfg.fieldName as string,
+      });
+    }
+
+    // pop-field: sections 내 fields
+    const sections = compCfg.sections as Array<{
+      fields?: Array<{ id: string; fieldName?: string; labelText?: string }>;
+    }> | undefined;
+    if (Array.isArray(sections)) {
+      for (const section of sections) {
+        for (const f of section.fields ?? []) {
+          if (f.fieldName) {
+            fields.push({
+              componentId: tid,
+              componentName: compName,
+              componentType: compType,
+              fieldName: f.fieldName,
+              fieldLabel: f.labelText || f.fieldName,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  return fields;
+}
+
+// ========================================
+// 메인 컴포넌트
+// ========================================
+
+interface PopScannerComponentProps {
+  config?: PopScannerConfig;
+  label?: string;
+  isDesignMode?: boolean;
+  screenId?: string;
+  componentId?: string;
+}
+
+function PopScannerComponent({
+  config,
+  isDesignMode,
+  screenId,
+  componentId,
+}: PopScannerComponentProps) {
+  const cfg = { ...DEFAULT_SCANNER_CONFIG, ...(config || {}) };
+  const { publish } = usePopEvent(screenId || "");
+  const [lastScan, setLastScan] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handleScanSuccess = useCallback(
+    (barcode: string) => {
+      setLastScan(barcode);
+      setModalOpen(false);
+
+      if (!componentId) return;
+
+      if (cfg.parseMode === "none") {
+        publish(`__comp_output__${componentId}__scan_value`, barcode);
+        return;
+      }
+
+      const parsed = parseScanResult(barcode, cfg.parseMode);
+
+      if (!parsed) {
+        publish(`__comp_output__${componentId}__scan_value`, barcode);
+        return;
+      }
+
+      if (cfg.parseMode === "auto") {
+        publish("scan_auto_fill", parsed);
+        publish(`__comp_output__${componentId}__scan_value`, barcode);
+        return;
+      }
+
+      if (cfg.fieldMappings.length === 0) {
+        publish(`__comp_output__${componentId}__scan_value`, barcode);
+        return;
+      }
+
+      for (const mapping of cfg.fieldMappings) {
+        if (!mapping.enabled) continue;
+        const value = parsed[mapping.sourceKey];
+        if (value === undefined) continue;
+
+        publish(
+          `__comp_output__${componentId}__scan_field_${mapping.outputIndex}`,
+          value
+        );
+
+        if (mapping.targetComponentId && mapping.targetFieldName) {
+          publish(
+            `__comp_input__${mapping.targetComponentId}__set_value`,
+            { fieldName: mapping.targetFieldName, value }
+          );
+        }
+      }
+    },
+    [componentId, publish, cfg.parseMode, cfg.fieldMappings],
+  );
+
+  const handleClick = useCallback(() => {
+    if (isDesignMode) return;
+    setModalOpen(true);
+  }, [isDesignMode]);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Button
+        variant={cfg.buttonVariant}
+        size="icon"
+        onClick={handleClick}
+        className="h-full w-full rounded-md transition-transform active:scale-95"
+      >
+        <ScanLine className="h-7! w-7!" />
+        <span className="sr-only">{cfg.buttonLabel}</span>
+      </Button>
+
+      {cfg.showLastScan && lastScan && (
+        <div className="absolute inset-x-0 bottom-0 truncate bg-background/80 px-1 text-center text-[8px] text-muted-foreground backdrop-blur-sm">
+          {lastScan}
+        </div>
+      )}
+
+      {!isDesignMode && (
+        <BarcodeScanModal
+          open={modalOpen}
+          onOpenChange={setModalOpen}
+          barcodeFormat={cfg.barcodeFormat}
+          autoSubmit={cfg.autoSubmit}
+          onScanSuccess={handleScanSuccess}
+        />
+      )}
+    </div>
+  );
+}
+
+// ========================================
+// 설정 패널
+// ========================================
+
+const FORMAT_LABELS: Record<string, string> = {
+  all: "모든 형식",
+  "1d": "1D 바코드",
+  "2d": "2D 바코드 (QR)",
+};
+
+const VARIANT_LABELS: Record<string, string> = {
+  default: "기본 (Primary)",
+  outline: "외곽선 (Outline)",
+  secondary: "보조 (Secondary)",
+};
+
+const PARSE_MODE_LABELS: Record<string, string> = {
+  none: "없음 (단일 값)",
+  auto: "자동 (검색 필드명과 매칭)",
+  json: "JSON (수동 매핑)",
+};
+
+interface PopScannerConfigPanelProps {
+  config: PopScannerConfig;
+  onUpdate: (config: PopScannerConfig) => void;
+  allComponents?: PopComponentDefinitionV5[];
+  connections?: PopDataConnection[];
+  componentId?: string;
+}
+
+function PopScannerConfigPanel({
+  config,
+  onUpdate,
+  allComponents,
+  connections,
+  componentId,
+}: PopScannerConfigPanelProps) {
+  const cfg = { ...DEFAULT_SCANNER_CONFIG, ...config };
+
+  const update = (partial: Partial<PopScannerConfig>) => {
+    onUpdate({ ...cfg, ...partial });
+  };
+
+  const connectedFields = useMemo(
+    () => getConnectedFields(componentId, connections, allComponents),
+    [componentId, connections, allComponents],
+  );
+
+  const buildMappingsFromFields = useCallback(
+    (fields: ConnectedFieldInfo[], existing: ScanFieldMapping[]): ScanFieldMapping[] => {
+      return fields.map((f, i) => {
+        const prev = existing.find(
+          (m) => m.targetComponentId === f.componentId && m.targetFieldName === f.fieldName
+        );
+        return {
+          sourceKey: prev?.sourceKey ?? f.fieldName,
+          outputIndex: i,
+          label: f.fieldLabel,
+          targetComponentId: f.componentId,
+          targetFieldName: f.fieldName,
+          enabled: prev?.enabled ?? true,
+        };
+      });
+    },
+    [],
+  );
+
+  const toggleMapping = (fieldName: string, componentId: string) => {
+    const updated = cfg.fieldMappings.map((m) =>
+      m.targetFieldName === fieldName && m.targetComponentId === componentId
+        ? { ...m, enabled: !m.enabled }
+        : m
+    );
+    update({ fieldMappings: updated });
+  };
+
+  const updateMappingSourceKey = (fieldName: string, componentId: string, sourceKey: string) => {
+    const updated = cfg.fieldMappings.map((m) =>
+      m.targetFieldName === fieldName && m.targetComponentId === componentId
+        ? { ...m, sourceKey }
+        : m
+    );
+    update({ fieldMappings: updated });
+  };
+
+  useEffect(() => {
+    if (cfg.parseMode !== "json" || connectedFields.length === 0) return;
+    const synced = buildMappingsFromFields(connectedFields, cfg.fieldMappings);
+    const isSame =
+      synced.length === cfg.fieldMappings.length &&
+      synced.every(
+        (s, i) =>
+          s.targetComponentId === cfg.fieldMappings[i]?.targetComponentId &&
+          s.targetFieldName === cfg.fieldMappings[i]?.targetFieldName,
+      );
+    if (!isSame) {
+      onUpdate({ ...cfg, fieldMappings: synced });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectedFields, cfg.parseMode]);
+
+  return (
+    <div className="space-y-4 pr-1 pb-16">
+      <div className="space-y-1.5">
+        <Label className="text-xs">바코드 형식</Label>
+        <Select
+          value={cfg.barcodeFormat}
+          onValueChange={(v) => update({ barcodeFormat: v as PopScannerConfig["barcodeFormat"] })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(FORMAT_LABELS).map(([key, label]) => (
+              <SelectItem key={key} value={key} className="text-xs">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-[10px] text-muted-foreground">인식할 바코드 종류를 선택합니다</p>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label className="text-xs">버튼 라벨</Label>
+        <Input
+          value={cfg.buttonLabel}
+          onChange={(e) => update({ buttonLabel: e.target.value })}
+          placeholder="스캔"
+          className="h-8 text-xs"
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label className="text-xs">버튼 스타일</Label>
+        <Select
+          value={cfg.buttonVariant}
+          onValueChange={(v) => update({ buttonVariant: v as PopScannerConfig["buttonVariant"] })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(VARIANT_LABELS).map(([key, label]) => (
+              <SelectItem key={key} value={key} className="text-xs">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div>
+          <Label className="text-xs">인식 후 자동 확인</Label>
+          <p className="text-[10px] text-muted-foreground">
+            {cfg.autoSubmit
+              ? "바코드 인식 즉시 값 전달 (확인 버튼 생략)"
+              : "인식 후 확인 버튼을 눌러야 값 전달"}
+          </p>
+        </div>
+        <Switch
+          checked={cfg.autoSubmit}
+          onCheckedChange={(v) => update({ autoSubmit: v })}
+        />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div>
+          <Label className="text-xs">마지막 스캔값 표시</Label>
+          <p className="text-[10px] text-muted-foreground">버튼 아래에 마지막 스캔값 표시</p>
+        </div>
+        <Switch
+          checked={cfg.showLastScan}
+          onCheckedChange={(v) => update({ showLastScan: v })}
+        />
+      </div>
+
+      {/* 파싱 설정 섹션 */}
+      <div className="border-t pt-4">
+        <Label className="text-xs font-semibold">스캔 데이터 파싱</Label>
+        <p className="mb-3 text-[10px] text-muted-foreground">
+          바코드/QR에 여러 정보가 담긴 경우, 파싱하여 각각 다른 컴포넌트에 전달
+        </p>
+
+        <div className="space-y-1.5">
+          <Label className="text-xs">파싱 모드</Label>
+          <Select
+            value={cfg.parseMode}
+            onValueChange={(v) => {
+              const mode = v as PopScannerConfig["parseMode"];
+              update({
+                parseMode: mode,
+                fieldMappings: mode === "none" ? [] : cfg.fieldMappings,
+              });
+            }}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(PARSE_MODE_LABELS).map(([key, label]) => (
+                <SelectItem key={key} value={key} className="text-xs">
+                  {label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {cfg.parseMode === "auto" && (
+          <div className="mt-3 rounded-md bg-muted/50 p-3">
+            <p className="text-[10px] font-medium">자동 매칭 방식</p>
+            <p className="mt-1 text-[10px] text-muted-foreground">
+              QR/바코드의 JSON 키가 연결된 컴포넌트의 필드명과 같으면 자동 입력됩니다.
+            </p>
+            {connectedFields.length > 0 && (
+              <div className="mt-2 space-y-1">
+                <p className="text-[10px] font-medium">연결된 필드 목록:</p>
+                {connectedFields.map((f, i) => (
+                  <div key={i} className="flex items-center gap-1 text-[10px] text-muted-foreground">
+                    <span className="font-mono text-primary">{f.fieldName}</span>
+                    <span>- {f.fieldLabel}</span>
+                    <span className="text-muted-foreground/50">({f.componentName})</span>
+                  </div>
+                ))}
+                <p className="mt-1 text-[10px] text-muted-foreground">
+                  QR에 위 필드명이 JSON 키로 포함되면 자동 매칭됩니다.
+                </p>
+              </div>
+            )}
+            {connectedFields.length === 0 && (
+              <p className="mt-2 text-[10px] text-muted-foreground">
+                연결 탭에서 스캐너와 다른 컴포넌트를 먼저 연결하세요.
+                연결 없이도 같은 화면의 모든 컴포넌트에 전역으로 전달됩니다.
+              </p>
+            )}
+          </div>
+        )}
+
+        {cfg.parseMode === "json" && (
+          <div className="mt-3 space-y-3">
+            <p className="text-[10px] text-muted-foreground">
+              연결된 컴포넌트의 필드를 선택하고, 매핑할 JSON 키를 지정합니다.
+              필드명과 같은 JSON 키가 있으면 자동 매칭됩니다.
+            </p>
+
+            {connectedFields.length === 0 ? (
+              <div className="rounded-md bg-muted/50 p-3">
+                <p className="text-[10px] text-muted-foreground">
+                  연결 탭에서 스캐너와 다른 컴포넌트를 먼저 연결해주세요.
+                  연결된 컴포넌트의 필드 목록이 여기에 표시됩니다.
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                <Label className="text-xs font-semibold">필드 매핑</Label>
+                <div className="space-y-1.5">
+                  {cfg.fieldMappings.map((mapping) => (
+                    <div
+                      key={`${mapping.targetComponentId}_${mapping.targetFieldName}`}
+                      className="flex items-start gap-2 rounded-md border p-2"
+                    >
+                      <Checkbox
+                        id={`map_${mapping.targetComponentId}_${mapping.targetFieldName}`}
+                        checked={mapping.enabled}
+                        onCheckedChange={() =>
+                          toggleMapping(mapping.targetFieldName, mapping.targetComponentId)
+                        }
+                        className="mt-0.5"
+                      />
+                      <div className="flex-1 space-y-1">
+                        <label
+                          htmlFor={`map_${mapping.targetComponentId}_${mapping.targetFieldName}`}
+                          className="flex cursor-pointer items-center gap-1 text-[11px]"
+                        >
+                          <span className="font-mono text-primary">
+                            {mapping.targetFieldName}
+                          </span>
+                          <span className="text-muted-foreground">
+                            ({mapping.label})
+                          </span>
+                        </label>
+                        {mapping.enabled && (
+                          <div className="flex items-center gap-1">
+                            <span className="shrink-0 text-[10px] text-muted-foreground">
+                              JSON 키:
+                            </span>
+                            <Input
+                              value={mapping.sourceKey}
+                              onChange={(e) =>
+                                updateMappingSourceKey(
+                                  mapping.targetFieldName,
+                                  mapping.targetComponentId,
+                                  e.target.value,
+                                )
+                              }
+                              placeholder={mapping.targetFieldName}
+                              className="h-6 text-[10px]"
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {cfg.fieldMappings.some((m) => m.enabled) && (
+                  <div className="rounded-md bg-muted/50 p-2">
+                    <p className="text-[10px] font-medium text-muted-foreground">활성 매핑:</p>
+                    <ul className="mt-1 space-y-0.5">
+                      {cfg.fieldMappings
+                        .filter((m) => m.enabled)
+                        .map((m, i) => (
+                          <li key={i} className="text-[10px] text-muted-foreground">
+                            <span className="font-mono">{m.sourceKey || "?"}</span>
+                            {" -> "}
+                            <span className="font-mono text-primary">{m.targetFieldName}</span>
+                            {m.label && <span className="ml-1">({m.label})</span>}
+                          </li>
+                        ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ========================================
+// 미리보기
+// ========================================
+
+function PopScannerPreview({ config }: { config?: PopScannerConfig }) {
+  const cfg = config || DEFAULT_SCANNER_CONFIG;
+
+  return (
+    <div className="flex h-full w-full items-center justify-center overflow-hidden">
+      <Button
+        variant={cfg.buttonVariant}
+        size="icon"
+        className="pointer-events-none h-full w-full rounded-md"
+        tabIndex={-1}
+      >
+        <ScanLine className="h-7! w-7!" />
+      </Button>
+    </div>
+  );
+}
+
+// ========================================
+// 동적 sendable 생성
+// ========================================
+
+function buildSendableMeta(config?: PopScannerConfig) {
+  const base = [
+    {
+      key: "scan_value",
+      label: "스캔 값 (원본)",
+      type: "filter_value" as const,
+      category: "filter" as const,
+      description: "파싱 전 원본 스캔 결과 (단일 값 모드이거나 파싱 실패 시)",
+    },
+  ];
+
+  if (config?.fieldMappings && config.fieldMappings.length > 0) {
+    for (const mapping of config.fieldMappings) {
+      base.push({
+        key: `scan_field_${mapping.outputIndex}`,
+        label: mapping.label || `스캔 필드 ${mapping.outputIndex}`,
+        type: "filter_value" as const,
+        category: "filter" as const,
+        description: `파싱된 필드: JSON 키 "${mapping.sourceKey}"`,
+      });
+    }
+  }
+
+  return base;
+}
+
+// ========================================
+// 레지스트리 등록
+// ========================================
+
+PopComponentRegistry.registerComponent({
+  id: "pop-scanner",
+  name: "스캐너",
+  description: "바코드/QR 카메라 스캔",
+  category: "input",
+  icon: "ScanLine",
+  component: PopScannerComponent,
+  configPanel: PopScannerConfigPanel,
+  preview: PopScannerPreview,
+  defaultProps: DEFAULT_SCANNER_CONFIG,
+  connectionMeta: {
+    sendable: buildSendableMeta(),
+    receivable: [],
+  },
+  getDynamicConnectionMeta: (config: Record<string, unknown>) => ({
+    sendable: buildSendableMeta(config as unknown as PopScannerConfig),
+    receivable: [],
+  }),
+  touchOptimized: true,
+  supportedDevices: ["mobile", "tablet"],
+});
diff --git a/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx b/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
index 6813e373..01ecc173 100644
--- a/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-search/PopSearchComponent.tsx
@@ -18,12 +18,21 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Switch } from "@/components/ui/switch";
-import { Search, ChevronRight, Loader2, X } from "lucide-react";
+import { Search, ChevronRight, Loader2, X, CalendarDays } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { format, startOfWeek, endOfWeek, startOfMonth, endOfMonth } from "date-fns";
+import { ko } from "date-fns/locale";
 import { usePopEvent } from "@/hooks/pop";
 import { dataApi } from "@/lib/api/data";
 import type {
   PopSearchConfig,
   DatePresetOption,
+  DateSelectionMode,
   ModalSelectConfig,
   ModalSearchMode,
   ModalFilterTab,
@@ -62,9 +71,21 @@ export function PopSearchComponent({
   const [modalDisplayText, setModalDisplayText] = useState("");
   const [simpleModalOpen, setSimpleModalOpen] = useState(false);
 
-  const fieldKey = config.fieldName || componentId || "search";
   const normalizedType = normalizeInputType(config.inputType as string);
   const isModalType = normalizedType === "modal";
+  const fieldKey = isModalType
+    ? (config.modalConfig?.valueField || config.fieldName || componentId || "search")
+    : (config.fieldName || componentId || "search");
+
+  const resolveFilterMode = useCallback(() => {
+    if (config.filterMode) return config.filterMode;
+    if (normalizedType === "date") {
+      const mode: DateSelectionMode = config.dateSelectionMode || "single";
+      return mode === "range" ? "range" : "equals";
+    }
+    return "contains";
+  }, [config.filterMode, config.dateSelectionMode, normalizedType]);
+
 
   const emitFilterChanged = useCallback(
     (newValue: unknown) => {
@@ -72,15 +93,18 @@ export function PopSearchComponent({
       setSharedData(`search_${fieldKey}`, newValue);
 
       if (componentId) {
+        const filterColumns = config.filterColumns?.length ? config.filterColumns : [fieldKey];
         publish(`__comp_output__${componentId}__filter_value`, {
           fieldName: fieldKey,
+          filterColumns,
           value: newValue,
+          filterMode: resolveFilterMode(),
         });
       }
 
       publish("filter_changed", { [fieldKey]: newValue });
     },
-    [fieldKey, publish, setSharedData, componentId]
+    [fieldKey, publish, setSharedData, componentId, resolveFilterMode, config.filterColumns]
   );
 
   useEffect(() => {
@@ -88,15 +112,40 @@ export function PopSearchComponent({
     const unsub = subscribe(
       `__comp_input__${componentId}__set_value`,
       (payload: unknown) => {
-        const data = payload as { value?: unknown } | unknown;
+        const data = payload as { value?: unknown; displayText?: string } | unknown;
         const incoming = typeof data === "object" && data && "value" in data
           ? (data as { value: unknown }).value
           : data;
+        if (isModalType && incoming != null) {
+          setModalDisplayText(String(incoming));
+        }
         emitFilterChanged(incoming);
       }
     );
     return unsub;
-  }, [componentId, subscribe, emitFilterChanged]);
+  }, [componentId, subscribe, emitFilterChanged, isModalType]);
+
+  useEffect(() => {
+    const unsub = subscribe("scan_auto_fill", (payload: unknown) => {
+      const data = payload as Record<string, unknown> | null;
+      if (!data || typeof data !== "object") return;
+      const myKey = config.fieldName;
+      if (!myKey) return;
+      const targetKeys = config.filterColumns?.length ? config.filterColumns : [myKey];
+      for (const key of targetKeys) {
+        if (key in data) {
+          if (isModalType) setModalDisplayText(String(data[key]));
+          emitFilterChanged(data[key]);
+          return;
+        }
+      }
+      if (myKey in data) {
+        if (isModalType) setModalDisplayText(String(data[myKey]));
+        emitFilterChanged(data[myKey]);
+      }
+    });
+    return unsub;
+  }, [subscribe, emitFilterChanged, config.fieldName, config.filterColumns, isModalType]);
 
   const handleModalOpen = useCallback(() => {
     if (!config.modalConfig) return;
@@ -116,29 +165,30 @@ export function PopSearchComponent({
     [config.modalConfig, emitFilterChanged]
   );
 
+  const handleModalClear = useCallback(() => {
+    setModalDisplayText("");
+    emitFilterChanged("");
+  }, [emitFilterChanged]);
+
   const showLabel = config.labelVisible !== false && !!config.labelText;
 
   return (
     <div
-      className={cn(
-        "flex h-full w-full overflow-hidden",
-        showLabel && config.labelPosition === "left"
-          ? "flex-row items-center gap-2 p-1.5"
-          : "flex-col justify-center gap-0.5 p-1.5"
-      )}
+      className="flex h-full w-full flex-col items-center justify-center gap-0.5 overflow-hidden p-1.5"
     >
       {showLabel && (
-        <span className="shrink-0 truncate text-[10px] font-medium text-muted-foreground">
+        <span className="w-full shrink-0 truncate text-[10px] font-medium text-muted-foreground">
           {config.labelText}
         </span>
       )}
-      <div className="min-w-0">
+      <div className="min-w-0 w-full flex-1 flex flex-col justify-center">
         <SearchInputRenderer
           config={config}
           value={value}
           onChange={emitFilterChanged}
           modalDisplayText={modalDisplayText}
           onModalOpen={handleModalOpen}
+          onModalClear={handleModalClear}
         />
       </div>
 
@@ -165,9 +215,10 @@ interface InputRendererProps {
   onChange: (v: unknown) => void;
   modalDisplayText?: string;
   onModalOpen?: () => void;
+  onModalClear?: () => void;
 }
 
-function SearchInputRenderer({ config, value, onChange, modalDisplayText, onModalOpen }: InputRendererProps) {
+function SearchInputRenderer({ config, value, onChange, modalDisplayText, onModalOpen, onModalClear }: InputRendererProps) {
   const normalized = normalizeInputType(config.inputType as string);
   switch (normalized) {
     case "text":
@@ -175,12 +226,24 @@ function SearchInputRenderer({ config, value, onChange, modalDisplayText, onModa
       return <TextSearchInput config={config} value={String(value ?? "")} onChange={onChange} />;
     case "select":
       return <SelectSearchInput config={config} value={String(value ?? "")} onChange={onChange} />;
+    case "date": {
+      const dateMode: DateSelectionMode = config.dateSelectionMode || "single";
+      return dateMode === "range"
+        ? <DateRangeInput config={config} value={value} onChange={onChange} />
+        : <DateSingleInput config={config} value={String(value ?? "")} onChange={onChange} />;
+    }
     case "date-preset":
       return <DatePresetSearchInput config={config} value={value} onChange={onChange} />;
     case "toggle":
       return <ToggleSearchInput value={Boolean(value)} onChange={onChange} />;
     case "modal":
-      return <ModalSearchInput config={config} displayText={modalDisplayText || ""} onClick={onModalOpen} />;
+      return <ModalSearchInput config={config} displayText={modalDisplayText || ""} onClick={onModalOpen} onClear={onModalClear} />;
+    case "status-chip":
+      return (
+        <div className="flex h-full items-center px-2 text-[10px] text-muted-foreground">
+          pop-status-bar 컴포넌트를 사용하세요
+        </div>
+      );
     default:
       return <PlaceholderInput inputType={config.inputType} />;
   }
@@ -215,7 +278,7 @@ function TextSearchInput({ config, value, onChange }: { config: PopSearchConfig;
   const isNumber = config.inputType === "number";
 
   return (
-    <div className="relative">
+    <div className="relative h-full">
       <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
       <Input
         type={isNumber ? "number" : "text"}
@@ -224,12 +287,283 @@ function TextSearchInput({ config, value, onChange }: { config: PopSearchConfig;
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={config.placeholder || (isNumber ? "숫자 입력" : "검색어 입력")}
-        className="h-8 pl-7 text-xs"
+        className="h-full min-h-8 pl-7 text-xs"
       />
     </div>
   );
 }
 
+// ========================================
+// date 서브타입 - 단일 날짜
+// ========================================
+
+function DateSingleInput({ config, value, onChange }: { config: PopSearchConfig; value: string; onChange: (v: unknown) => void }) {
+  const [open, setOpen] = useState(false);
+  const useModal = config.calendarDisplay === "modal";
+  const selected = value ? new Date(value + "T00:00:00") : undefined;
+
+  const handleSelect = useCallback(
+    (day: Date | undefined) => {
+      if (!day) return;
+      onChange(format(day, "yyyy-MM-dd"));
+      setOpen(false);
+    },
+    [onChange]
+  );
+
+  const handleClear = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange("");
+    },
+    [onChange]
+  );
+
+  const triggerButton = (
+    <Button
+      variant="outline"
+      className={cn(
+        "h-full min-h-8 w-full justify-start gap-1.5 px-2 text-xs font-normal",
+        !value && "text-muted-foreground"
+      )}
+      onClick={useModal ? () => setOpen(true) : undefined}
+    >
+      <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+      <span className="flex-1 truncate text-left">
+        {value ? format(new Date(value + "T00:00:00"), "yyyy.MM.dd (EEE)", { locale: ko }) : (config.placeholder || "날짜 선택")}
+      </span>
+      {value && (
+        <span
+          role="button"
+          tabIndex={-1}
+          onClick={handleClear}
+          onKeyDown={(e) => { if (e.key === "Enter") handleClear(e as unknown as React.MouseEvent); }}
+          className="shrink-0 text-muted-foreground hover:text-foreground"
+        >
+          <X className="h-3 w-3" />
+        </span>
+      )}
+    </Button>
+  );
+
+  if (useModal) {
+    return (
+      <>
+        {triggerButton}
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[360px] p-0">
+            <DialogHeader className="px-4 pt-4 pb-0">
+              <DialogTitle className="text-sm">날짜 선택</DialogTitle>
+            </DialogHeader>
+            <div className="flex justify-center pb-4">
+              <Calendar
+                mode="single"
+                selected={selected}
+                onSelect={handleSelect}
+                locale={ko}
+                defaultMonth={selected || new Date()}
+                className="touch-date-calendar"
+              />
+            </div>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {triggerButton}
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="single"
+          selected={selected}
+          onSelect={handleSelect}
+          locale={ko}
+          defaultMonth={selected || new Date()}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ========================================
+// date 서브타입 - 기간 선택 (프리셋 + Calendar Range)
+// ========================================
+
+interface DateRangeValue { from?: string; to?: string }
+
+const RANGE_PRESETS = [
+  { key: "today", label: "오늘" },
+  { key: "this-week", label: "이번주" },
+  { key: "this-month", label: "이번달" },
+] as const;
+
+function computeRangePreset(key: string): DateRangeValue {
+  const now = new Date();
+  const fmt = (d: Date) => format(d, "yyyy-MM-dd");
+  switch (key) {
+    case "today":
+      return { from: fmt(now), to: fmt(now) };
+    case "this-week":
+      return { from: fmt(startOfWeek(now, { weekStartsOn: 1 })), to: fmt(endOfWeek(now, { weekStartsOn: 1 })) };
+    case "this-month":
+      return { from: fmt(startOfMonth(now)), to: fmt(endOfMonth(now)) };
+    default:
+      return {};
+  }
+}
+
+function DateRangeInput({ config, value, onChange }: { config: PopSearchConfig; value: unknown; onChange: (v: unknown) => void }) {
+  const [open, setOpen] = useState(false);
+  const useModal = config.calendarDisplay === "modal";
+
+  const rangeVal: DateRangeValue = (typeof value === "object" && value !== null)
+    ? value as DateRangeValue
+    : (typeof value === "string" && value ? { from: value, to: value } : {});
+
+  const calendarRange = useMemo(() => {
+    if (!rangeVal.from) return undefined;
+    return {
+      from: new Date(rangeVal.from + "T00:00:00"),
+      to: rangeVal.to ? new Date(rangeVal.to + "T00:00:00") : undefined,
+    };
+  }, [rangeVal.from, rangeVal.to]);
+
+  const activePreset = RANGE_PRESETS.find((p) => {
+    const preset = computeRangePreset(p.key);
+    return preset.from === rangeVal.from && preset.to === rangeVal.to;
+  })?.key ?? null;
+
+  const handlePreset = useCallback(
+    (key: string) => {
+      const preset = computeRangePreset(key);
+      onChange(preset);
+    },
+    [onChange]
+  );
+
+  const handleRangeSelect = useCallback(
+    (range: { from?: Date; to?: Date } | undefined) => {
+      if (!range?.from) return;
+      const from = format(range.from, "yyyy-MM-dd");
+      const to = range.to ? format(range.to, "yyyy-MM-dd") : from;
+      onChange({ from, to });
+      if (range.to) setOpen(false);
+    },
+    [onChange]
+  );
+
+  const handleClear = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange({});
+    },
+    [onChange]
+  );
+
+  const displayText = rangeVal.from
+    ? rangeVal.from === rangeVal.to
+      ? format(new Date(rangeVal.from + "T00:00:00"), "MM/dd (EEE)", { locale: ko })
+      : `${format(new Date(rangeVal.from + "T00:00:00"), "MM/dd", { locale: ko })} ~ ${rangeVal.to ? format(new Date(rangeVal.to + "T00:00:00"), "MM/dd", { locale: ko }) : ""}`
+    : "";
+
+  const presetBar = (
+    <div className="flex gap-1 px-3">
+      {RANGE_PRESETS.map((p) => (
+        <Button
+          key={p.key}
+          variant={activePreset === p.key ? "default" : "outline"}
+          size="sm"
+          className="h-7 flex-1 px-1 text-[10px]"
+          onClick={() => {
+            handlePreset(p.key);
+            setOpen(false);
+          }}
+        >
+          {p.label}
+        </Button>
+      ))}
+    </div>
+  );
+
+  const calendarEl = (
+    <Calendar
+      mode="range"
+      selected={calendarRange}
+      onSelect={handleRangeSelect}
+      locale={ko}
+      defaultMonth={calendarRange?.from || new Date()}
+      numberOfMonths={1}
+      className={useModal ? "touch-date-calendar" : undefined}
+    />
+  );
+
+  const triggerButton = (
+    <Button
+      variant="outline"
+      className={cn(
+        "h-full min-h-8 w-full justify-start gap-1.5 px-2 text-xs font-normal",
+        !rangeVal.from && "text-muted-foreground"
+      )}
+      onClick={useModal ? () => setOpen(true) : undefined}
+    >
+      <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+      <span className="flex-1 truncate text-left">
+        {displayText || (config.placeholder || "기간 선택")}
+      </span>
+      {rangeVal.from && (
+        <span
+          role="button"
+          tabIndex={-1}
+          onClick={handleClear}
+          onKeyDown={(e) => { if (e.key === "Enter") handleClear(e as unknown as React.MouseEvent); }}
+          className="shrink-0 text-muted-foreground hover:text-foreground"
+        >
+          <X className="h-3 w-3" />
+        </span>
+      )}
+    </Button>
+  );
+
+  if (useModal) {
+    return (
+      <>
+        {triggerButton}
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent className="max-w-[95vw] sm:max-w-[360px] p-0">
+            <DialogHeader className="px-4 pt-4 pb-0">
+              <DialogTitle className="text-sm">기간 선택</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-2 pb-4">
+              {presetBar}
+              <div className="flex justify-center">
+                {calendarEl}
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {triggerButton}
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="space-y-2 pt-2 pb-1">
+          {presetBar}
+          {calendarEl}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // ========================================
 // select 서브타입
 // ========================================
@@ -237,7 +571,7 @@ function TextSearchInput({ config, value, onChange }: { config: PopSearchConfig;
 function SelectSearchInput({ config, value, onChange }: { config: PopSearchConfig; value: string; onChange: (v: unknown) => void }) {
   return (
     <Select value={value || undefined} onValueChange={(v) => onChange(v)}>
-      <SelectTrigger className="h-8 text-xs">
+      <SelectTrigger className="h-full min-h-8 text-xs">
         <SelectValue placeholder={config.placeholder || "선택"} />
       </SelectTrigger>
       <SelectContent>
@@ -266,7 +600,7 @@ function DatePresetSearchInput({ config, value, onChange }: { config: PopSearchC
   };
 
   return (
-    <div className="flex flex-wrap gap-1">
+    <div className="flex h-full flex-wrap items-center gap-1">
       {presets.map((preset) => (
         <Button key={preset} variant={currentPreset === preset ? "default" : "outline"} size="sm" className="h-7 px-2 text-[10px]" onClick={() => handleSelect(preset)}>
           {DATE_PRESET_LABELS[preset]}
@@ -282,7 +616,7 @@ function DatePresetSearchInput({ config, value, onChange }: { config: PopSearchC
 
 function ToggleSearchInput({ value, onChange }: { value: boolean; onChange: (v: unknown) => void }) {
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex h-full items-center gap-2">
       <Switch checked={value} onCheckedChange={(checked) => onChange(checked)} />
       <span className="text-xs text-muted-foreground">{value ? "ON" : "OFF"}</span>
     </div>
@@ -293,17 +627,32 @@ function ToggleSearchInput({ value, onChange }: { value: boolean; onChange: (v:
 // modal 서브타입: 읽기 전용 표시 + 클릭으로 모달 열기
 // ========================================
 
-function ModalSearchInput({ config, displayText, onClick }: { config: PopSearchConfig; displayText: string; onClick?: () => void }) {
+function ModalSearchInput({ config, displayText, onClick, onClear }: { config: PopSearchConfig; displayText: string; onClick?: () => void; onClear?: () => void }) {
+  const hasValue = !!displayText;
+
   return (
     <div
-      className="flex h-8 cursor-pointer items-center rounded-md border border-input bg-background px-3 transition-colors hover:bg-accent"
+      className="flex h-full min-h-8 cursor-pointer items-center rounded-md border border-input bg-background px-3 transition-colors hover:bg-accent"
       role="button"
       tabIndex={0}
       onClick={onClick}
       onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onClick?.(); }}
     >
-      <span className="flex-1 truncate text-xs">{displayText || config.placeholder || "선택..."}</span>
-      <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      <span className={`flex-1 truncate text-xs ${hasValue ? "" : "text-muted-foreground"}`}>
+        {displayText || config.placeholder || "선택..."}
+      </span>
+      {hasValue && onClear ? (
+        <button
+          type="button"
+          className="ml-1 shrink-0 rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          onClick={(e) => { e.stopPropagation(); onClear(); }}
+          aria-label="선택 해제"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      ) : (
+        <ChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+      )}
     </div>
   );
 }
@@ -314,7 +663,7 @@ function ModalSearchInput({ config, displayText, onClick }: { config: PopSearchC
 
 function PlaceholderInput({ inputType }: { inputType: string }) {
   return (
-    <div className="flex h-8 items-center rounded-md border border-dashed border-muted-foreground/30 px-3">
+    <div className="flex h-full min-h-8 items-center rounded-md border border-dashed border-muted-foreground/30 px-3">
       <span className="text-[10px] text-muted-foreground">{inputType} (후속 구현 예정)</span>
     </div>
   );
@@ -382,6 +731,7 @@ function ModalDialog({ open, onOpenChange, modalConfig, title, onSelect }: Modal
     columnLabels,
     displayStyle = "table",
     displayField,
+    distinct,
   } = modalConfig;
 
   const colsToShow = displayColumns && displayColumns.length > 0 ? displayColumns : [];
@@ -393,13 +743,25 @@ function ModalDialog({ open, onOpenChange, modalConfig, title, onSelect }: Modal
     setLoading(true);
     try {
       const result = await dataApi.getTableData(tableName, { page: 1, size: 200 });
-      setAllRows(result.data || []);
+      let rows = result.data || [];
+
+      if (distinct && displayField) {
+        const seen = new Set<string>();
+        rows = rows.filter((row) => {
+          const val = String(row[displayField] ?? "");
+          if (seen.has(val)) return false;
+          seen.add(val);
+          return true;
+        });
+      }
+
+      setAllRows(rows);
     } catch {
       setAllRows([]);
     } finally {
       setLoading(false);
     }
-  }, [tableName]);
+  }, [tableName, distinct, displayField]);
 
   useEffect(() => {
     if (open) {
diff --git a/frontend/lib/registry/pop-components/pop-search/PopSearchConfig.tsx b/frontend/lib/registry/pop-components/pop-search/PopSearchConfig.tsx
index 96507984..8c619429 100644
--- a/frontend/lib/registry/pop-components/pop-search/PopSearchConfig.tsx
+++ b/frontend/lib/registry/pop-components/pop-search/PopSearchConfig.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -13,7 +13,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { ChevronLeft, ChevronRight, Plus, Trash2, Loader2, Check, ChevronsUpDown } from "lucide-react";
+import { ChevronLeft, ChevronRight, Plus, Trash2, Loader2, Check, ChevronsUpDown, AlertTriangle } from "lucide-react";
 import {
   Popover,
   PopoverContent,
@@ -30,6 +30,9 @@ import {
 import type {
   PopSearchConfig,
   SearchInputType,
+  SearchFilterMode,
+  DateSelectionMode,
+  CalendarDisplayMode,
   DatePresetOption,
   ModalSelectConfig,
   ModalDisplayStyle,
@@ -38,6 +41,7 @@ import type {
 } from "./types";
 import {
   SEARCH_INPUT_TYPE_LABELS,
+  SEARCH_FILTER_MODE_LABELS,
   DATE_PRESET_LABELS,
   MODAL_DISPLAY_STYLE_LABELS,
   MODAL_SEARCH_MODE_LABELS,
@@ -57,7 +61,6 @@ const DEFAULT_CONFIG: PopSearchConfig = {
   placeholder: "검색어 입력",
   debounceMs: 500,
   triggerOnEnter: true,
-  labelPosition: "top",
   labelText: "",
   labelVisible: true,
 };
@@ -69,9 +72,12 @@ const DEFAULT_CONFIG: PopSearchConfig = {
 interface ConfigPanelProps {
   config: PopSearchConfig | undefined;
   onUpdate: (config: PopSearchConfig) => void;
+  allComponents?: import("@/components/pop/designer/types/pop-layout").PopComponentDefinitionV5[];
+  connections?: import("@/components/pop/designer/types/pop-layout").PopDataConnection[];
+  componentId?: string;
 }
 
-export function PopSearchConfigPanel({ config, onUpdate }: ConfigPanelProps) {
+export function PopSearchConfigPanel({ config, onUpdate, allComponents, connections, componentId }: ConfigPanelProps) {
   const [step, setStep] = useState(0);
   const rawCfg = { ...DEFAULT_CONFIG, ...(config || {}) };
   const cfg: PopSearchConfig = {
@@ -110,7 +116,7 @@ export function PopSearchConfigPanel({ config, onUpdate }: ConfigPanelProps) {
       </div>
 
       {step === 0 && <StepBasicSettings cfg={cfg} update={update} />}
-      {step === 1 && <StepDetailSettings cfg={cfg} update={update} />}
+      {step === 1 && <StepDetailSettings cfg={cfg} update={update} allComponents={allComponents} connections={connections} componentId={componentId} />}
 
       <div className="flex justify-between pt-2">
         <Button
@@ -145,6 +151,9 @@ export function PopSearchConfigPanel({ config, onUpdate }: ConfigPanelProps) {
 interface StepProps {
   cfg: PopSearchConfig;
   update: (partial: Partial<PopSearchConfig>) => void;
+  allComponents?: import("@/components/pop/designer/types/pop-layout").PopComponentDefinitionV5[];
+  connections?: import("@/components/pop/designer/types/pop-layout").PopDataConnection[];
+  componentId?: string;
 }
 
 function StepBasicSettings({ cfg, update }: StepProps) {
@@ -189,33 +198,17 @@ function StepBasicSettings({ cfg, update }: StepProps) {
       </div>
 
       {cfg.labelVisible !== false && (
-        <>
-          <div className="space-y-1">
-            <Label className="text-[10px]">라벨 텍스트</Label>
-            <Input
-              value={cfg.labelText || ""}
-              onChange={(e) => update({ labelText: e.target.value })}
-              placeholder="예: 거래처명"
-              className="h-8 text-xs"
-            />
-          </div>
-          <div className="space-y-1">
-            <Label className="text-[10px]">라벨 위치</Label>
-            <Select
-              value={cfg.labelPosition || "top"}
-              onValueChange={(v) => update({ labelPosition: v as "top" | "left" })}
-            >
-              <SelectTrigger className="h-8 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="top" className="text-xs">위 (기본)</SelectItem>
-                <SelectItem value="left" className="text-xs">왼쪽</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </>
+        <div className="space-y-1">
+          <Label className="text-[10px]">라벨 텍스트</Label>
+          <Input
+            value={cfg.labelText || ""}
+            onChange={(e) => update({ labelText: e.target.value })}
+            placeholder="예: 거래처명"
+            className="h-8 text-xs"
+          />
+        </div>
       )}
+
     </div>
   );
 }
@@ -224,18 +217,29 @@ function StepBasicSettings({ cfg, update }: StepProps) {
 // STEP 2: 타입별 상세 설정
 // ========================================
 
-function StepDetailSettings({ cfg, update }: StepProps) {
+function StepDetailSettings({ cfg, update, allComponents, connections, componentId }: StepProps) {
   const normalized = normalizeInputType(cfg.inputType as string);
   switch (normalized) {
     case "text":
     case "number":
-      return <TextDetailSettings cfg={cfg} update={update} />;
+      return <TextDetailSettings cfg={cfg} update={update} allComponents={allComponents} connections={connections} componentId={componentId} />;
     case "select":
-      return <SelectDetailSettings cfg={cfg} update={update} />;
+      return <SelectDetailSettings cfg={cfg} update={update} allComponents={allComponents} connections={connections} componentId={componentId} />;
+    case "date":
+      return <DateDetailSettings cfg={cfg} update={update} allComponents={allComponents} connections={connections} componentId={componentId} />;
     case "date-preset":
-      return <DatePresetDetailSettings cfg={cfg} update={update} />;
+      return <DatePresetDetailSettings cfg={cfg} update={update} allComponents={allComponents} connections={connections} componentId={componentId} />;
     case "modal":
       return <ModalDetailSettings cfg={cfg} update={update} />;
+    case "status-chip":
+      return (
+        <div className="rounded-lg bg-muted/50 p-3">
+          <p className="text-[10px] text-muted-foreground">
+            상태 칩은 pop-status-bar 컴포넌트로 분리되었습니다.
+            새로운 &quot;상태 바&quot; 컴포넌트를 사용해주세요.
+          </p>
+        </div>
+      );
     case "toggle":
       return (
         <div className="rounded-lg bg-muted/50 p-3">
@@ -255,11 +259,278 @@ function StepDetailSettings({ cfg, update }: StepProps) {
   }
 }
 
+// ========================================
+// 공통: 필터 연결 설정 섹션
+// ========================================
+
+interface FilterConnectionSectionProps {
+  cfg: PopSearchConfig;
+  update: (partial: Partial<PopSearchConfig>) => void;
+  showFieldName: boolean;
+  fixedFilterMode?: SearchFilterMode;
+  allComponents?: import("@/components/pop/designer/types/pop-layout").PopComponentDefinitionV5[];
+  connections?: import("@/components/pop/designer/types/pop-layout").PopDataConnection[];
+  componentId?: string;
+}
+
+interface ConnectedComponentInfo {
+  tableNames: string[];
+  displayedColumns: Set<string>;
+}
+
+/**
+ * 연결된 대상 컴포넌트의 tableName과 카드에서 표시 중인 컬럼을 추출한다.
+ */
+function getConnectedComponentInfo(
+  componentId?: string,
+  connections?: import("@/components/pop/designer/types/pop-layout").PopDataConnection[],
+  allComponents?: import("@/components/pop/designer/types/pop-layout").PopComponentDefinitionV5[],
+): ConnectedComponentInfo {
+  const empty: ConnectedComponentInfo = { tableNames: [], displayedColumns: new Set() };
+  if (!componentId || !connections || !allComponents) return empty;
+
+  const targetIds = connections
+    .filter((c) => c.sourceComponent === componentId)
+    .map((c) => c.targetComponent);
+
+  const tableNames = new Set<string>();
+  const displayedColumns = new Set<string>();
+
+  for (const tid of targetIds) {
+    const comp = allComponents.find((c) => c.id === tid);
+    if (!comp?.config) continue;
+    const compCfg = comp.config as Record<string, any>;
+
+    const tn = compCfg.dataSource?.tableName;
+    if (tn) tableNames.add(tn);
+
+    // pop-card-list: cardTemplate에서 사용 중인 컬럼 수집
+    const tpl = compCfg.cardTemplate;
+    if (tpl) {
+      if (tpl.header?.codeField) displayedColumns.add(tpl.header.codeField);
+      if (tpl.header?.titleField) displayedColumns.add(tpl.header.titleField);
+      if (tpl.image?.imageColumn) displayedColumns.add(tpl.image.imageColumn);
+      if (Array.isArray(tpl.body?.fields)) {
+        for (const f of tpl.body.fields) {
+          if (f.columnName) displayedColumns.add(f.columnName);
+        }
+      }
+    }
+
+    // pop-string-list: selectedColumns / listColumns
+    if (Array.isArray(compCfg.selectedColumns)) {
+      for (const col of compCfg.selectedColumns) displayedColumns.add(col);
+    }
+    if (Array.isArray(compCfg.listColumns)) {
+      for (const lc of compCfg.listColumns) {
+        if (lc.columnName) displayedColumns.add(lc.columnName);
+      }
+    }
+  }
+
+  return { tableNames: Array.from(tableNames), displayedColumns };
+}
+
+function FilterConnectionSection({ cfg, update, showFieldName, fixedFilterMode, allComponents, connections, componentId }: FilterConnectionSectionProps) {
+  const connInfo = useMemo(
+    () => getConnectedComponentInfo(componentId, connections, allComponents),
+    [componentId, connections, allComponents],
+  );
+
+  const [targetColumns, setTargetColumns] = useState<ColumnTypeInfo[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  const connectedTablesKey = connInfo.tableNames.join(",");
+  useEffect(() => {
+    if (connInfo.tableNames.length === 0) {
+      setTargetColumns([]);
+      return;
+    }
+    let cancelled = false;
+    setColumnsLoading(true);
+
+    Promise.all(connInfo.tableNames.map((t) => getTableColumns(t)))
+      .then((results) => {
+        if (cancelled) return;
+        const allCols: ColumnTypeInfo[] = [];
+        const seen = new Set<string>();
+        for (const res of results) {
+          if (res.success && res.data?.columns) {
+            for (const col of res.data.columns) {
+              if (!seen.has(col.columnName)) {
+                seen.add(col.columnName);
+                allCols.push(col);
+              }
+            }
+          }
+        }
+        setTargetColumns(allCols);
+      })
+      .finally(() => { if (!cancelled) setColumnsLoading(false); });
+
+    return () => { cancelled = true; };
+  }, [connectedTablesKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const hasConnection = connInfo.tableNames.length > 0;
+
+  const { displayedCols, otherCols } = useMemo(() => {
+    if (connInfo.displayedColumns.size === 0) {
+      return { displayedCols: [] as ColumnTypeInfo[], otherCols: targetColumns };
+    }
+    const displayed: ColumnTypeInfo[] = [];
+    const others: ColumnTypeInfo[] = [];
+    for (const col of targetColumns) {
+      if (connInfo.displayedColumns.has(col.columnName)) {
+        displayed.push(col);
+      } else {
+        others.push(col);
+      }
+    }
+    return { displayedCols: displayed, otherCols: others };
+  }, [targetColumns, connInfo.displayedColumns]);
+
+  const selectedFilterCols = cfg.filterColumns || (cfg.fieldName ? [cfg.fieldName] : []);
+
+  const toggleFilterColumn = (colName: string) => {
+    const current = new Set(selectedFilterCols);
+    if (current.has(colName)) {
+      current.delete(colName);
+    } else {
+      current.add(colName);
+    }
+    const next = Array.from(current);
+    update({
+      filterColumns: next,
+      fieldName: next[0] || "",
+    });
+  };
+
+  const renderColumnCheckbox = (col: ColumnTypeInfo) => (
+    <div key={col.columnName} className="flex items-center gap-2">
+      <Checkbox
+        id={`filter_col_${col.columnName}`}
+        checked={selectedFilterCols.includes(col.columnName)}
+        onCheckedChange={() => toggleFilterColumn(col.columnName)}
+      />
+      <Label htmlFor={`filter_col_${col.columnName}`} className="text-[10px]">
+        {col.displayName || col.columnName}
+        <span className="ml-1 text-muted-foreground">({col.columnName})</span>
+      </Label>
+    </div>
+  );
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 border-t pt-3">
+        <span className="text-[10px] font-medium text-muted-foreground">필터 연결 설정</span>
+      </div>
+
+      {!hasConnection && (
+        <div className="flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 p-2">
+          <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-amber-500" />
+          <p className="text-[9px] text-amber-700">
+            연결 탭에서 대상 컴포넌트를 먼저 연결해주세요.
+            연결된 리스트의 컬럼 목록이 여기에 표시됩니다.
+          </p>
+        </div>
+      )}
+
+      {hasConnection && showFieldName && (
+        <div className="space-y-1">
+          <Label className="text-[10px]">
+            필터 대상 컬럼 <span className="text-destructive">*</span>
+          </Label>
+          {columnsLoading ? (
+            <div className="flex h-8 items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              컬럼 로딩...
+            </div>
+          ) : targetColumns.length > 0 ? (
+            <div className="max-h-48 space-y-2 overflow-y-auto rounded border p-2">
+              {displayedCols.length > 0 && (
+                <div className="space-y-1">
+                  <p className="text-[9px] font-medium text-primary">카드에서 표시 중</p>
+                  {displayedCols.map(renderColumnCheckbox)}
+                </div>
+              )}
+              {displayedCols.length > 0 && otherCols.length > 0 && (
+                <div className="border-t" />
+              )}
+              {otherCols.length > 0 && (
+                <div className="space-y-1">
+                  <p className="text-[9px] font-medium text-muted-foreground">기타 컬럼</p>
+                  {otherCols.map(renderColumnCheckbox)}
+                </div>
+              )}
+            </div>
+          ) : (
+            <p className="text-[9px] text-muted-foreground">
+              연결된 테이블에서 컬럼을 찾을 수 없습니다
+            </p>
+          )}
+          {selectedFilterCols.length === 0 && hasConnection && !columnsLoading && targetColumns.length > 0 && (
+            <div className="flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 p-2">
+              <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-amber-500" />
+              <p className="text-[9px] text-amber-700">
+                필터 대상 컬럼을 선택해야 연결된 리스트에서 검색이 작동합니다
+              </p>
+            </div>
+          )}
+          {selectedFilterCols.length > 0 && (
+            <p className="text-[9px] text-muted-foreground">
+              {selectedFilterCols.length}개 컬럼 선택됨 - 검색어가 선택된 모든 컬럼에서 매칭됩니다
+            </p>
+          )}
+          {selectedFilterCols.length === 0 && (
+            <p className="text-[9px] text-muted-foreground">
+              연결된 리스트에서 이 검색값과 매칭할 컬럼 (복수 선택 가능)
+            </p>
+          )}
+        </div>
+      )}
+
+      {fixedFilterMode ? (
+        <div className="space-y-1">
+          <Label className="text-[10px]">필터 방식</Label>
+          <div className="flex h-8 items-center rounded-md border bg-muted px-3 text-xs text-muted-foreground">
+            {SEARCH_FILTER_MODE_LABELS[fixedFilterMode]}
+          </div>
+          <p className="text-[9px] text-muted-foreground">
+            이 입력 타입은 {SEARCH_FILTER_MODE_LABELS[fixedFilterMode]} 방식이 자동 적용됩니다
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-1">
+          <Label className="text-[10px]">필터 방식</Label>
+          <Select
+            value={cfg.filterMode || "contains"}
+            onValueChange={(v) => update({ filterMode: v as SearchFilterMode })}
+          >
+            <SelectTrigger className="h-8 text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(SEARCH_FILTER_MODE_LABELS).map(([key, label]) => (
+                <SelectItem key={key} value={key} className="text-xs">
+                  {label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <p className="text-[9px] text-muted-foreground">
+            연결된 리스트에 값을 보낼 때 적용되는 매칭 방식
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ========================================
 // text/number 상세 설정
 // ========================================
 
-function TextDetailSettings({ cfg, update }: StepProps) {
+function TextDetailSettings({ cfg, update, allComponents, connections, componentId }: StepProps) {
   return (
     <div className="space-y-3">
       <div className="space-y-1">
@@ -285,6 +556,8 @@ function TextDetailSettings({ cfg, update }: StepProps) {
         />
         <Label htmlFor="triggerOnEnter" className="text-[10px]">Enter 키로 즉시 발행</Label>
       </div>
+
+      <FilterConnectionSection cfg={cfg} update={update} showFieldName allComponents={allComponents} connections={connections} componentId={componentId} />
     </div>
   );
 }
@@ -293,7 +566,7 @@ function TextDetailSettings({ cfg, update }: StepProps) {
 // select 상세 설정
 // ========================================
 
-function SelectDetailSettings({ cfg, update }: StepProps) {
+function SelectDetailSettings({ cfg, update, allComponents, connections, componentId }: StepProps) {
   const options = cfg.options || [];
 
   const addOption = () => {
@@ -329,6 +602,90 @@ function SelectDetailSettings({ cfg, update }: StepProps) {
         <Plus className="mr-1 h-3 w-3" />
         옵션 추가
       </Button>
+
+      <FilterConnectionSection cfg={cfg} update={update} showFieldName allComponents={allComponents} connections={connections} componentId={componentId} />
+    </div>
+  );
+}
+
+// ========================================
+// date 상세 설정
+// ========================================
+
+const DATE_SELECTION_MODE_LABELS: Record<DateSelectionMode, string> = {
+  single: "단일 날짜",
+  range: "기간 선택",
+};
+
+const CALENDAR_DISPLAY_LABELS: Record<CalendarDisplayMode, string> = {
+  popover: "팝오버 (PC용)",
+  modal: "모달 (터치/POP용)",
+};
+
+function DateDetailSettings({ cfg, update, allComponents, connections, componentId }: StepProps) {
+  const mode: DateSelectionMode = cfg.dateSelectionMode || "single";
+  const calDisplay: CalendarDisplayMode = cfg.calendarDisplay || "modal";
+  const autoFilterMode = mode === "range" ? "range" : "equals";
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-1">
+        <Label className="text-[10px]">날짜 선택 모드</Label>
+        <Select
+          value={mode}
+          onValueChange={(v) => update({ dateSelectionMode: v as DateSelectionMode })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(DATE_SELECTION_MODE_LABELS).map(([key, label]) => (
+              <SelectItem key={key} value={key} className="text-xs">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-[9px] text-muted-foreground">
+          {mode === "single"
+            ? "캘린더에서 날짜 하나를 선택합니다"
+            : "프리셋(오늘/이번주/이번달) + 캘린더 기간 선택"}
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <Label className="text-[10px]">캘린더 표시 방식</Label>
+        <Select
+          value={calDisplay}
+          onValueChange={(v) => update({ calendarDisplay: v as CalendarDisplayMode })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(CALENDAR_DISPLAY_LABELS).map(([key, label]) => (
+              <SelectItem key={key} value={key} className="text-xs">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-[9px] text-muted-foreground">
+          {calDisplay === "modal"
+            ? "터치 친화적인 큰 모달로 캘린더가 열립니다"
+            : "입력란 아래에 작은 팝오버로 열립니다"}
+        </p>
+      </div>
+
+      <FilterConnectionSection
+        cfg={cfg}
+        update={update}
+        showFieldName
+        fixedFilterMode={autoFilterMode}
+        allComponents={allComponents}
+        connections={connections}
+        componentId={componentId}
+      />
     </div>
   );
 }
@@ -337,7 +694,7 @@ function SelectDetailSettings({ cfg, update }: StepProps) {
 // date-preset 상세 설정
 // ========================================
 
-function DatePresetDetailSettings({ cfg, update }: StepProps) {
+function DatePresetDetailSettings({ cfg, update, allComponents, connections, componentId }: StepProps) {
   const ALL_PRESETS: DatePresetOption[] = ["today", "this-week", "this-month", "custom"];
   const activePresets = cfg.datePresets || ["today", "this-week", "this-month"];
 
@@ -366,6 +723,8 @@ function DatePresetDetailSettings({ cfg, update }: StepProps) {
           &quot;직접&quot; 선택 시 날짜 입력 UI가 표시됩니다 (후속 구현)
         </p>
       )}
+
+      <FilterConnectionSection cfg={cfg} update={update} showFieldName fixedFilterMode="range" allComponents={allComponents} connections={connections} componentId={componentId} />
     </div>
   );
 }
@@ -647,6 +1006,21 @@ function ModalDetailSettings({ cfg, update }: StepProps) {
             </p>
           </div>
 
+          {/* 중복 제거 (Distinct) */}
+          <div className="space-y-1">
+            <div className="flex items-center gap-1.5">
+              <Checkbox
+                id="modal_distinct"
+                checked={mc.distinct ?? false}
+                onCheckedChange={(checked) => updateModal({ distinct: !!checked })}
+              />
+              <Label htmlFor="modal_distinct" className="text-[10px]">중복 제거 (Distinct)</Label>
+            </div>
+            <p className="text-[9px] text-muted-foreground">
+              표시 필드 기준으로 동일한 값이 여러 건이면 하나만 표시
+            </p>
+          </div>
+
           {/* 검색창에 보일 값 */}
           <div className="space-y-1">
             <Label className="text-[10px]">검색창에 보일 값</Label>
@@ -694,8 +1068,11 @@ function ModalDetailSettings({ cfg, update }: StepProps) {
               연결된 리스트를 필터할 때 사용할 값 (예: 회사코드)
             </p>
           </div>
+
+          <FilterConnectionSection cfg={cfg} update={update} showFieldName={false} />
         </>
       )}
     </div>
   );
 }
+
diff --git a/frontend/lib/registry/pop-components/pop-search/types.ts b/frontend/lib/registry/pop-components/pop-search/types.ts
index 6c49b1c5..6b284b60 100644
--- a/frontend/lib/registry/pop-components/pop-search/types.ts
+++ b/frontend/lib/registry/pop-components/pop-search/types.ts
@@ -1,7 +1,7 @@
 // ===== pop-search 전용 타입 =====
 // 단일 필드 검색 컴포넌트. 그리드 한 칸 = 검색 필드 하나.
 
-/** 검색 필드 입력 타입 (9종) */
+/** 검색 필드 입력 타입 (10종) */
 export type SearchInputType =
   | "text"
   | "number"
@@ -11,7 +11,8 @@ export type SearchInputType =
   | "multi-select"
   | "combo"
   | "modal"
-  | "toggle";
+  | "toggle"
+  | "status-chip";
 
 /** 레거시 입력 타입 (DB에 저장된 기존 값 호환용) */
 export type LegacySearchInputType = "modal-table" | "modal-card" | "modal-icon-grid";
@@ -22,6 +23,12 @@ export function normalizeInputType(t: string): SearchInputType {
   return t as SearchInputType;
 }
 
+/** 날짜 선택 모드 */
+export type DateSelectionMode = "single" | "range";
+
+/** 캘린더 표시 방식 (POP 터치 환경에서는 modal 권장) */
+export type CalendarDisplayMode = "popover" | "modal";
+
 /** 날짜 프리셋 옵션 */
 export type DatePresetOption = "today" | "this-week" | "this-month" | "custom";
 
@@ -46,6 +53,9 @@ export type ModalDisplayStyle = "table" | "icon";
 /** 모달 검색 방식 */
 export type ModalSearchMode = "contains" | "starts-with" | "equals";
 
+/** 검색 값을 대상 리스트에 전달할 때의 필터링 방식 */
+export type SearchFilterMode = "contains" | "equals" | "starts_with" | "range";
+
 /** 모달 필터 탭 (가나다 초성 / ABC 알파벳) */
 export type ModalFilterTab = "korean" | "alphabet";
 
@@ -64,6 +74,22 @@ export interface ModalSelectConfig {
 
   displayField: string;
   valueField: string;
+
+  /** displayField 기준 중복 제거 */
+  distinct?: boolean;
+}
+
+/** @deprecated status-chip은 pop-status-bar로 분리됨. 레거시 호환용. */
+export type StatusChipStyle = "tab" | "pill";
+
+/** @deprecated status-chip은 pop-status-bar로 분리됨. 레거시 호환용. */
+export interface StatusChipConfig {
+  showCount?: boolean;
+  countColumn?: string;
+  allowAll?: boolean;
+  allLabel?: string;
+  chipStyle?: StatusChipStyle;
+  useSubCount?: boolean;
 }
 
 /** pop-search 전체 설정 */
@@ -81,18 +107,28 @@ export interface PopSearchConfig {
   options?: SelectOption[];
   optionsDataSource?: SelectDataSource;
 
+  // date 전용
+  dateSelectionMode?: DateSelectionMode;
+  calendarDisplay?: CalendarDisplayMode;
+
   // date-preset 전용
   datePresets?: DatePresetOption[];
 
   // modal 전용
   modalConfig?: ModalSelectConfig;
 
+  // status-chip 전용
+  statusChipConfig?: StatusChipConfig;
+
   // 라벨
   labelText?: string;
   labelVisible?: boolean;
 
-  // 스타일
-  labelPosition?: "top" | "left";
+  // 연결된 리스트에 필터를 보낼 때의 매칭 방식
+  filterMode?: SearchFilterMode;
+
+  // 필터 대상 컬럼 복수 선택 (fieldName은 대표 컬럼, filterColumns는 전체 대상)
+  filterColumns?: string[];
 }
 
 /** 기본 설정값 (레지스트리 + 컴포넌트 공유) */
@@ -102,7 +138,6 @@ export const DEFAULT_SEARCH_CONFIG: PopSearchConfig = {
   placeholder: "검색어 입력",
   debounceMs: 500,
   triggerOnEnter: true,
-  labelPosition: "top",
   labelText: "",
   labelVisible: true,
 };
@@ -126,6 +161,13 @@ export const SEARCH_INPUT_TYPE_LABELS: Record<SearchInputType, string> = {
   combo: "자동완성",
   modal: "모달",
   toggle: "토글",
+  "status-chip": "상태 칩 (대시보드)",
+};
+
+/** 상태 칩 스타일 라벨 (설정 패널용) */
+export const STATUS_CHIP_STYLE_LABELS: Record<StatusChipStyle, string> = {
+  tab: "탭 (큰 숫자)",
+  pill: "알약 (작은 뱃지)",
 };
 
 /** 모달 보여주기 방식 라벨 */
@@ -147,6 +189,14 @@ export const MODAL_FILTER_TAB_LABELS: Record<ModalFilterTab, string> = {
   alphabet: "ABC",
 };
 
+/** 검색 필터 방식 라벨 (설정 패널용) */
+export const SEARCH_FILTER_MODE_LABELS: Record<SearchFilterMode, string> = {
+  contains: "포함",
+  equals: "일치",
+  starts_with: "시작",
+  range: "범위",
+};
+
 /** 한글 초성 추출 */
 const KOREAN_CONSONANTS = [
   "ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ",
diff --git a/frontend/lib/registry/pop-components/pop-shared/ColumnCombobox.tsx b/frontend/lib/registry/pop-components/pop-shared/ColumnCombobox.tsx
index 62d63f02..99444d95 100644
--- a/frontend/lib/registry/pop-components/pop-shared/ColumnCombobox.tsx
+++ b/frontend/lib/registry/pop-components/pop-shared/ColumnCombobox.tsx
@@ -38,9 +38,23 @@ export function ColumnCombobox({
   const filtered = useMemo(() => {
     if (!search) return columns;
     const q = search.toLowerCase();
-    return columns.filter((c) => c.name.toLowerCase().includes(q));
+    return columns.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        (c.comment && c.comment.toLowerCase().includes(q))
+    );
   }, [columns, search]);
 
+  const selectedCol = useMemo(
+    () => columns.find((c) => c.name === value),
+    [columns, value],
+  );
+  const displayValue = selectedCol
+    ? selectedCol.comment
+      ? `${selectedCol.name} (${selectedCol.comment})`
+      : selectedCol.name
+    : "";
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -50,7 +64,7 @@ export function ColumnCombobox({
           aria-expanded={open}
           className="mt-1 h-8 w-full justify-between text-xs"
         >
-          {value || placeholder}
+          <span className="truncate">{displayValue || placeholder}</span>
           <ChevronsUpDown className="ml-2 h-3.5 w-3.5 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
@@ -61,7 +75,7 @@ export function ColumnCombobox({
       >
         <Command shouldFilter={false}>
           <CommandInput
-            placeholder="컬럼명 검색..."
+            placeholder="컬럼명 또는 한글명 검색..."
             className="text-xs"
             value={search}
             onValueChange={setSearch}
@@ -88,8 +102,15 @@ export function ColumnCombobox({
                       value === col.name ? "opacity-100" : "opacity-0"
                     )}
                   />
-                  <div className="flex items-center gap-2">
-                    <span>{col.name}</span>
+                  <div className="flex flex-col">
+                    <div className="flex items-center gap-2">
+                      <span>{col.name}</span>
+                      {col.comment && (
+                        <span className="text-[11px] text-muted-foreground">
+                          ({col.comment})
+                        </span>
+                      )}
+                    </div>
                     <span className="text-[10px] text-muted-foreground">
                       {col.type}
                     </span>
diff --git a/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarComponent.tsx b/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarComponent.tsx
new file mode 100644
index 00000000..805fadcd
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarComponent.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { cn } from "@/lib/utils";
+import { usePopEvent } from "@/hooks/pop";
+import type { StatusBarConfig, StatusChipOption } from "./types";
+import { DEFAULT_STATUS_BAR_CONFIG } from "./types";
+
+interface PopStatusBarComponentProps {
+  config: StatusBarConfig;
+  label?: string;
+  screenId?: string;
+  componentId?: string;
+}
+
+export function PopStatusBarComponent({
+  config: rawConfig,
+  label,
+  screenId,
+  componentId,
+}: PopStatusBarComponentProps) {
+  const config = { ...DEFAULT_STATUS_BAR_CONFIG, ...(rawConfig || {}) };
+  const { publish, subscribe } = usePopEvent(screenId || "");
+
+  const [selectedValue, setSelectedValue] = useState<string>("");
+  const [allRows, setAllRows] = useState<Record<string, unknown>[]>([]);
+  const [autoSubStatusColumn, setAutoSubStatusColumn] = useState<string | null>(null);
+
+  // all_rows 이벤트 구독
+  useEffect(() => {
+    if (!componentId) return;
+    const unsub = subscribe(
+      `__comp_input__${componentId}__all_rows`,
+      (payload: unknown) => {
+        const data = payload as { value?: unknown } | unknown;
+        const inner =
+          typeof data === "object" && data && "value" in data
+            ? (data as { value: unknown }).value
+            : data;
+
+        if (
+          typeof inner === "object" &&
+          inner &&
+          !Array.isArray(inner) &&
+          "rows" in inner
+        ) {
+          const envelope = inner as {
+            rows?: unknown;
+            subStatusColumn?: string | null;
+          };
+          if (Array.isArray(envelope.rows))
+            setAllRows(envelope.rows as Record<string, unknown>[]);
+          setAutoSubStatusColumn(envelope.subStatusColumn ?? null);
+        } else if (Array.isArray(inner)) {
+          setAllRows(inner as Record<string, unknown>[]);
+          setAutoSubStatusColumn(null);
+        }
+      }
+    );
+    return unsub;
+  }, [componentId, subscribe]);
+
+  // 외부에서 값 설정 이벤트 구독
+  useEffect(() => {
+    if (!componentId) return;
+    const unsub = subscribe(
+      `__comp_input__${componentId}__set_value`,
+      (payload: unknown) => {
+        const data = payload as { value?: unknown } | unknown;
+        const incoming =
+          typeof data === "object" && data && "value" in data
+            ? (data as { value: unknown }).value
+            : data;
+        setSelectedValue(String(incoming ?? ""));
+      }
+    );
+    return unsub;
+  }, [componentId, subscribe]);
+
+  const emitFilter = useCallback(
+    (newValue: string) => {
+      setSelectedValue(newValue);
+      if (!componentId) return;
+
+      const baseColumn = config.filterColumn || config.countColumn || "";
+      const subActive = config.useSubCount && !!autoSubStatusColumn;
+      const filterColumns = subActive
+        ? [...new Set([baseColumn, autoSubStatusColumn!].filter(Boolean))]
+        : [baseColumn].filter(Boolean);
+
+      publish(`__comp_output__${componentId}__filter_value`, {
+        fieldName: baseColumn,
+        filterColumns,
+        value: newValue,
+        filterMode: "equals",
+        _source: "status-bar",
+      });
+    },
+    [componentId, publish, config.filterColumn, config.countColumn, config.useSubCount, autoSubStatusColumn]
+  );
+
+  const chipCfg = config;
+  const showCount = chipCfg.showCount !== false;
+  const baseCountColumn = chipCfg.countColumn || "";
+  const useSubCount = chipCfg.useSubCount || false;
+  const hideUntilSubFilter = chipCfg.hideUntilSubFilter || false;
+  const allowAll = chipCfg.allowAll !== false;
+  const allLabel = chipCfg.allLabel || "전체";
+  const chipStyle = chipCfg.chipStyle || "tab";
+  const options: StatusChipOption[] = chipCfg.options || [];
+
+  // 하위 필터(공정) 활성 여부
+  const subFilterActive = useSubCount && !!autoSubStatusColumn;
+
+  // hideUntilSubFilter가 켜져있으면서 아직 공정 선택이 안 된 경우 숨김
+  const shouldHide = hideUntilSubFilter && !subFilterActive;
+
+  const effectiveCountColumn =
+    subFilterActive ? autoSubStatusColumn : baseCountColumn;
+
+  const counts = useMemo(() => {
+    if (!showCount || !effectiveCountColumn || allRows.length === 0)
+      return new Map<string, number>();
+    const map = new Map<string, number>();
+    for (const row of allRows) {
+      if (row == null || typeof row !== "object") continue;
+      const v = String(row[effectiveCountColumn] ?? "");
+      map.set(v, (map.get(v) || 0) + 1);
+    }
+    return map;
+  }, [allRows, effectiveCountColumn, showCount]);
+
+  const totalCount = allRows.length;
+
+  const chipItems = useMemo(() => {
+    const items: { value: string; label: string; count: number }[] = [];
+    if (allowAll) {
+      items.push({ value: "", label: allLabel, count: totalCount });
+    }
+    for (const opt of options) {
+      items.push({
+        value: opt.value,
+        label: opt.label,
+        count: counts.get(opt.value) || 0,
+      });
+    }
+    return items;
+  }, [options, counts, totalCount, allowAll, allLabel]);
+
+  const showLabel = !!label;
+
+  if (shouldHide) {
+    return (
+      <div className="flex h-full w-full items-center justify-center p-1.5">
+        <span className="text-[10px] text-muted-foreground/50">
+          {chipCfg.hiddenMessage || "조건을 선택하면 상태별 현황이 표시됩니다"}
+        </span>
+      </div>
+    );
+  }
+
+  if (chipStyle === "pill") {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center gap-0.5 overflow-hidden p-1.5">
+        {showLabel && (
+          <span className="w-full shrink-0 truncate text-[10px] font-medium text-muted-foreground">
+            {label}
+          </span>
+        )}
+        <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+          {chipItems.map((item) => {
+            const isActive = selectedValue === item.value;
+            return (
+              <button
+                key={item.value}
+                type="button"
+                onClick={() => emitFilter(item.value)}
+                className={cn(
+                  "flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-colors",
+                  isActive
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
+                )}
+              >
+                {item.label}
+                {showCount && (
+                  <span
+                    className={cn(
+                      "ml-0.5 min-w-[18px] rounded-full px-1 py-0.5 text-center text-[10px] font-bold leading-none",
+                      isActive
+                        ? "bg-primary-foreground/20 text-primary-foreground"
+                        : "bg-background text-foreground"
+                    )}
+                  >
+                    {item.count}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // tab 스타일 (기본)
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-0.5 overflow-hidden p-1.5">
+      {showLabel && (
+        <span className="w-full shrink-0 truncate text-[10px] font-medium text-muted-foreground">
+          {label}
+        </span>
+      )}
+      <div className="flex min-w-0 flex-1 items-center justify-center gap-2">
+        {chipItems.map((item) => {
+          const isActive = selectedValue === item.value;
+          return (
+            <button
+              key={item.value}
+              type="button"
+              onClick={() => emitFilter(item.value)}
+              className={cn(
+                "flex min-w-[60px] flex-col items-center justify-center rounded-lg px-3 py-1.5 transition-colors",
+                isActive
+                  ? "bg-primary text-primary-foreground shadow-sm"
+                  : "bg-muted/60 text-muted-foreground hover:bg-accent"
+              )}
+            >
+              {showCount && (
+                <span className="text-lg font-bold leading-tight">
+                  {item.count}
+                </span>
+              )}
+              <span className="text-[10px] font-medium leading-tight">
+                {item.label}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarConfig.tsx b/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarConfig.tsx
new file mode 100644
index 00000000..3b0ce864
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarConfig.tsx
@@ -0,0 +1,489 @@
+"use client";
+
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus, Trash2, Loader2, AlertTriangle, RefreshCw } from "lucide-react";
+import { getTableColumns } from "@/lib/api/tableManagement";
+import { dataApi } from "@/lib/api/data";
+import type { ColumnTypeInfo } from "@/lib/api/tableManagement";
+import type { StatusBarConfig, StatusChipStyle, StatusChipOption } from "./types";
+import { DEFAULT_STATUS_BAR_CONFIG, STATUS_CHIP_STYLE_LABELS } from "./types";
+
+interface ConfigPanelProps {
+  config: StatusBarConfig | undefined;
+  onUpdate: (config: StatusBarConfig) => void;
+  allComponents?: import("@/components/pop/designer/types/pop-layout").PopComponentDefinitionV5[];
+  connections?: import("@/components/pop/designer/types/pop-layout").PopDataConnection[];
+  componentId?: string;
+}
+
+export function PopStatusBarConfigPanel({
+  config: rawConfig,
+  onUpdate,
+  allComponents,
+  connections,
+  componentId,
+}: ConfigPanelProps) {
+  const cfg = { ...DEFAULT_STATUS_BAR_CONFIG, ...(rawConfig || {}) };
+
+  const update = (partial: Partial<StatusBarConfig>) => {
+    onUpdate({ ...cfg, ...partial });
+  };
+
+  const options = cfg.options || [];
+
+  const removeOption = (index: number) => {
+    update({ options: options.filter((_, i) => i !== index) });
+  };
+
+  const updateOption = (
+    index: number,
+    field: keyof StatusChipOption,
+    val: string
+  ) => {
+    update({
+      options: options.map((opt, i) =>
+        i === index ? { ...opt, [field]: val } : opt
+      ),
+    });
+  };
+
+  // 연결된 카드 컴포넌트의 테이블 컬럼 가져오기
+  const connectedTableName = useMemo(() => {
+    if (!componentId || !connections || !allComponents) return null;
+    const targetIds = connections
+      .filter((c) => c.sourceComponent === componentId)
+      .map((c) => c.targetComponent);
+    const sourceIds = connections
+      .filter((c) => c.targetComponent === componentId)
+      .map((c) => c.sourceComponent);
+    const peerIds = [...new Set([...targetIds, ...sourceIds])];
+
+    for (const pid of peerIds) {
+      const comp = allComponents.find((c) => c.id === pid);
+      if (!comp?.config) continue;
+      const compCfg = comp.config as Record<string, unknown>;
+      const ds = compCfg.dataSource as { tableName?: string } | undefined;
+      if (ds?.tableName) return ds.tableName;
+    }
+    return null;
+  }, [componentId, connections, allComponents]);
+
+  const [targetColumns, setTargetColumns] = useState<ColumnTypeInfo[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  // 집계 컬럼의 고유값 (옵션 선택용)
+  const [distinctValues, setDistinctValues] = useState<string[]>([]);
+  const [distinctLoading, setDistinctLoading] = useState(false);
+
+  useEffect(() => {
+    if (!connectedTableName) {
+      setTargetColumns([]);
+      return;
+    }
+    let cancelled = false;
+    setColumnsLoading(true);
+    getTableColumns(connectedTableName)
+      .then((res) => {
+        if (cancelled) return;
+        if (res.success && res.data?.columns) {
+          setTargetColumns(res.data.columns);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setColumnsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [connectedTableName]);
+
+  const fetchDistinctValues = useCallback(async (tableName: string, column: string) => {
+    setDistinctLoading(true);
+    try {
+      const res = await dataApi.getTableData(tableName, { page: 1, size: 9999 });
+      const vals = new Set<string>();
+      for (const row of res.data) {
+        const v = row[column];
+        if (v != null && String(v).trim() !== "") {
+          vals.add(String(v));
+        }
+      }
+      const sorted = [...vals].sort();
+      setDistinctValues(sorted);
+      return sorted;
+    } catch {
+      setDistinctValues([]);
+      return [];
+    } finally {
+      setDistinctLoading(false);
+    }
+  }, []);
+
+  // 집계 컬럼 변경 시 고유값 새로 가져오기
+  useEffect(() => {
+    const col = cfg.countColumn;
+    if (!connectedTableName || !col) {
+      setDistinctValues([]);
+      return;
+    }
+    fetchDistinctValues(connectedTableName, col);
+  }, [connectedTableName, cfg.countColumn, fetchDistinctValues]);
+
+  const handleAutoFill = useCallback(async () => {
+    if (!connectedTableName || !cfg.countColumn) return;
+    const vals = await fetchDistinctValues(connectedTableName, cfg.countColumn);
+    if (vals.length === 0) return;
+    const newOptions: StatusChipOption[] = vals.map((v) => {
+      const existing = options.find((o) => o.value === v);
+      return { value: v, label: existing?.label || v };
+    });
+    update({ options: newOptions });
+  }, [connectedTableName, cfg.countColumn, options, fetchDistinctValues]);
+
+  const addOptionFromValue = (value: string) => {
+    if (options.some((o) => o.value === value)) return;
+    update({
+      options: [...options, { value, label: value }],
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* --- 칩 옵션 목록 --- */}
+      <div className="space-y-1">
+        <div className="flex items-center justify-between">
+          <Label className="text-[10px]">상태 칩 옵션 목록</Label>
+          {connectedTableName && cfg.countColumn && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-6 px-2 text-[9px]"
+              onClick={handleAutoFill}
+              disabled={distinctLoading}
+            >
+              {distinctLoading ? (
+                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
+              ) : (
+                <RefreshCw className="mr-1 h-3 w-3" />
+              )}
+              DB에서 자동 채우기
+            </Button>
+          )}
+        </div>
+        {cfg.useSubCount && (
+          <div className="flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 p-2">
+            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-amber-500" />
+            <p className="text-[9px] text-amber-700">
+              하위 필터 자동 전환이 켜져 있으면 런타임에 가상 컬럼으로
+              집계됩니다. DB 값과 다를 수 있으니 직접 입력을 권장합니다.
+            </p>
+          </div>
+        )}
+        {options.length === 0 && (
+          <p className="text-[9px] text-muted-foreground">
+            {connectedTableName && cfg.countColumn
+              ? "\"DB에서 자동 채우기\"를 클릭하거나 아래에서 추가하세요."
+              : "옵션이 없습니다. 먼저 집계 컬럼을 선택한 후 추가하세요."}
+          </p>
+        )}
+        {options.map((opt, i) => (
+          <div key={i} className="flex items-center gap-1">
+            <Input
+              value={opt.value}
+              onChange={(e) => updateOption(i, "value", e.target.value)}
+              placeholder="DB 값"
+              className="h-7 flex-1 text-[10px]"
+            />
+            <Input
+              value={opt.label}
+              onChange={(e) => updateOption(i, "label", e.target.value)}
+              placeholder="표시 라벨"
+              className="h-7 flex-1 text-[10px]"
+            />
+            <button
+              type="button"
+              onClick={() => removeOption(i)}
+              className="flex h-7 w-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+            >
+              <Trash2 className="h-3 w-3" />
+            </button>
+          </div>
+        ))}
+
+        {/* 고유값에서 추가 */}
+        {distinctValues.length > 0 && (
+          <div className="space-y-1">
+            <Label className="text-[9px] text-muted-foreground">
+              값 추가 (DB에서 가져온 고유값)
+            </Label>
+            <div className="flex flex-wrap gap-1">
+              {distinctValues
+                .filter((dv) => !options.some((o) => o.value === dv))
+                .map((dv) => (
+                  <button
+                    key={dv}
+                    type="button"
+                    onClick={() => addOptionFromValue(dv)}
+                    className="flex h-6 items-center gap-1 rounded-full border border-dashed px-2 text-[9px] text-muted-foreground transition-colors hover:border-primary hover:text-primary"
+                  >
+                    <Plus className="h-2.5 w-2.5" />
+                    {dv}
+                  </button>
+                ))}
+              {distinctValues.every((dv) => options.some((o) => o.value === dv)) && (
+                <p className="text-[9px] text-muted-foreground">모든 값이 추가되었습니다</p>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 수동 추가 */}
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-7 w-full text-[10px]"
+          onClick={() => {
+            update({
+              options: [
+                ...options,
+                { value: "", label: "" },
+              ],
+            });
+          }}
+        >
+          <Plus className="mr-1 h-3 w-3" />
+          옵션 추가
+        </Button>
+      </div>
+
+      {/* --- 전체 보기 칩 --- */}
+      <div className="space-y-1">
+        <div className="flex items-center gap-2">
+          <Checkbox
+            id="allowAll"
+            checked={cfg.allowAll !== false}
+            onCheckedChange={(checked) => update({ allowAll: Boolean(checked) })}
+          />
+          <Label htmlFor="allowAll" className="text-[10px]">
+            &quot;전체&quot; 보기 칩 표시
+          </Label>
+        </div>
+        <p className="pl-5 text-[9px] text-muted-foreground">
+          필터 해제용 칩을 옵션 목록 맨 앞에 자동 추가합니다
+        </p>
+
+        {cfg.allowAll !== false && (
+          <div className="space-y-1 pl-5">
+            <Label className="text-[9px] text-muted-foreground">
+              표시 라벨
+            </Label>
+            <Input
+              value={cfg.allLabel || ""}
+              onChange={(e) => update({ allLabel: e.target.value })}
+              placeholder="전체"
+              className="h-7 text-[10px]"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* --- 건수 표시 --- */}
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="showCount"
+          checked={cfg.showCount !== false}
+          onCheckedChange={(checked) => update({ showCount: Boolean(checked) })}
+        />
+        <Label htmlFor="showCount" className="text-[10px]">
+          건수 표시
+        </Label>
+      </div>
+
+      {cfg.showCount !== false && (
+        <div className="space-y-1">
+          <Label className="text-[10px]">집계 컬럼</Label>
+          {columnsLoading ? (
+            <div className="flex h-8 items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              컬럼 로딩...
+            </div>
+          ) : targetColumns.length > 0 ? (
+            <Select
+              value={cfg.countColumn || ""}
+              onValueChange={(v) => update({ countColumn: v })}
+            >
+              <SelectTrigger className="h-8 text-xs">
+                <SelectValue placeholder="집계 컬럼 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {targetColumns.map((col) => (
+                  <SelectItem
+                    key={col.columnName}
+                    value={col.columnName}
+                    className="text-xs"
+                  >
+                    {col.displayName || col.columnName}
+                    <span className="ml-1 text-muted-foreground">
+                      ({col.columnName})
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          ) : (
+            <Input
+              value={cfg.countColumn || ""}
+              onChange={(e) => update({ countColumn: e.target.value })}
+              placeholder="예: status"
+              className="h-8 text-xs"
+            />
+          )}
+          <p className="text-[9px] text-muted-foreground">
+            연결된 카드의 이 컬럼 값으로 상태별 건수를 집계합니다
+          </p>
+        </div>
+      )}
+
+      {cfg.showCount !== false && (
+        <div className="space-y-2 rounded bg-muted/30 p-2">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="useSubCount"
+              checked={cfg.useSubCount || false}
+              onCheckedChange={(checked) =>
+                update({ useSubCount: Boolean(checked) })
+              }
+            />
+            <Label htmlFor="useSubCount" className="text-[10px]">
+              하위 필터 적용 시 집계 컬럼 자동 전환
+            </Label>
+          </div>
+          {cfg.useSubCount && (
+            <>
+              <p className="pl-5 text-[9px] text-muted-foreground">
+                연결된 카드의 하위 테이블 필터가 적용되면 집계 컬럼이 자동
+                전환됩니다
+              </p>
+              <div className="mt-1 flex items-center gap-2 pl-5">
+                <Checkbox
+                  id="hideUntilSubFilter"
+                  checked={cfg.hideUntilSubFilter || false}
+                  onCheckedChange={(checked) =>
+                    update({ hideUntilSubFilter: Boolean(checked) })
+                  }
+                />
+                <Label htmlFor="hideUntilSubFilter" className="text-[10px]">
+                  하위 필터 선택 전까지 칩 숨김
+                </Label>
+              </div>
+              {cfg.hideUntilSubFilter && (
+                <div className="space-y-1 pl-5">
+                  <Label className="text-[9px] text-muted-foreground">
+                    숨김 상태 안내 문구
+                  </Label>
+                  <Input
+                    value={cfg.hiddenMessage || ""}
+                    onChange={(e) => update({ hiddenMessage: e.target.value })}
+                    placeholder="조건을 선택하면 상태별 현황이 표시됩니다"
+                    className="h-7 text-[10px]"
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* --- 칩 스타일 --- */}
+      <div className="space-y-1">
+        <Label className="text-[10px]">칩 스타일</Label>
+        <Select
+          value={cfg.chipStyle || "tab"}
+          onValueChange={(v) => update({ chipStyle: v as StatusChipStyle })}
+        >
+          <SelectTrigger className="h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(STATUS_CHIP_STYLE_LABELS).map(([key, label]) => (
+              <SelectItem key={key} value={key} className="text-xs">
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <p className="text-[9px] text-muted-foreground">
+          탭: 큰 숫자 + 라벨 / 알약: 작은 뱃지 형태
+        </p>
+      </div>
+
+      {/* --- 필터 컬럼 --- */}
+      <div className="space-y-1 border-t pt-3">
+        <Label className="text-[10px]">필터 대상 컬럼</Label>
+        {!connectedTableName && (
+          <div className="flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 p-2">
+            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-amber-500" />
+            <p className="text-[9px] text-amber-700">
+              연결 탭에서 대상 카드 컴포넌트를 먼저 연결해주세요.
+            </p>
+          </div>
+        )}
+        {connectedTableName && (
+          <>
+            {columnsLoading ? (
+              <div className="flex h-8 items-center gap-2 text-xs text-muted-foreground">
+                <Loader2 className="h-3 w-3 animate-spin" />
+                컬럼 로딩...
+              </div>
+            ) : targetColumns.length > 0 ? (
+              <Select
+                value={cfg.filterColumn || cfg.countColumn || ""}
+                onValueChange={(v) => update({ filterColumn: v })}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="필터 컬럼 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {targetColumns.map((col) => (
+                    <SelectItem
+                      key={col.columnName}
+                      value={col.columnName}
+                      className="text-xs"
+                    >
+                      {col.displayName || col.columnName}
+                      <span className="ml-1 text-muted-foreground">
+                        ({col.columnName})
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <Input
+                value={cfg.filterColumn || ""}
+                onChange={(e) => update({ filterColumn: e.target.value })}
+                placeholder="예: status"
+                className="h-8 text-xs"
+              />
+            )}
+            <p className="text-[9px] text-muted-foreground">
+              선택한 상태 칩 값으로 카드를 필터링할 컬럼 (비어있으면 집계
+              컬럼과 동일)
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/pop-components/pop-status-bar/index.tsx b/frontend/lib/registry/pop-components/pop-status-bar/index.tsx
new file mode 100644
index 00000000..e94f321a
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-status-bar/index.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { PopComponentRegistry } from "../../PopComponentRegistry";
+import { PopStatusBarComponent } from "./PopStatusBarComponent";
+import { PopStatusBarConfigPanel } from "./PopStatusBarConfig";
+import type { StatusBarConfig } from "./types";
+import { DEFAULT_STATUS_BAR_CONFIG } from "./types";
+
+function PopStatusBarPreviewComponent({
+  config,
+  label,
+}: {
+  config?: StatusBarConfig;
+  label?: string;
+}) {
+  const cfg = config || DEFAULT_STATUS_BAR_CONFIG;
+  const options = cfg.options || [];
+  const displayLabel = label || "상태 바";
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
+      <span className="text-[10px] font-medium text-muted-foreground">
+        {displayLabel}
+      </span>
+      <div className="flex items-center gap-1">
+        {options.length === 0 ? (
+          <span className="text-[9px] text-muted-foreground">
+            옵션 없음
+          </span>
+        ) : (
+          options.slice(0, 4).map((opt) => (
+            <div
+              key={opt.value}
+              className="flex flex-col items-center rounded bg-muted/60 px-2 py-0.5"
+            >
+              <span className="text-[10px] font-bold leading-tight">0</span>
+              <span className="text-[8px] leading-tight text-muted-foreground">
+                {opt.label}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+PopComponentRegistry.registerComponent({
+  id: "pop-status-bar",
+  name: "상태 바",
+  description: "상태별 건수 대시보드 + 필터",
+  category: "display",
+  icon: "BarChart3",
+  component: PopStatusBarComponent,
+  configPanel: PopStatusBarConfigPanel,
+  preview: PopStatusBarPreviewComponent,
+  defaultProps: DEFAULT_STATUS_BAR_CONFIG,
+  connectionMeta: {
+    sendable: [
+      {
+        key: "filter_value",
+        label: "필터 값",
+        type: "filter_value",
+        category: "filter",
+        description: "선택한 상태 칩 값을 카드에 필터로 전달",
+      },
+    ],
+    receivable: [
+      {
+        key: "all_rows",
+        label: "전체 데이터",
+        type: "all_rows",
+        category: "data",
+        description: "연결된 카드의 전체 데이터를 받아 상태별 건수 집계",
+      },
+      {
+        key: "set_value",
+        label: "값 설정",
+        type: "filter_value",
+        category: "filter",
+        description: "외부에서 선택 값 설정",
+      },
+    ],
+  },
+  touchOptimized: true,
+  supportedDevices: ["mobile", "tablet"],
+});
diff --git a/frontend/lib/registry/pop-components/pop-status-bar/types.ts b/frontend/lib/registry/pop-components/pop-status-bar/types.ts
new file mode 100644
index 00000000..91a37c40
--- /dev/null
+++ b/frontend/lib/registry/pop-components/pop-status-bar/types.ts
@@ -0,0 +1,48 @@
+// ===== pop-status-bar 전용 타입 =====
+// 상태 칩 대시보드 컴포넌트. 카드 데이터를 집계하여 상태별 건수 표시 + 필터 발행.
+
+/** 상태 칩 표시 스타일 */
+export type StatusChipStyle = "tab" | "pill";
+
+/** 개별 옵션 */
+export interface StatusChipOption {
+  value: string;
+  label: string;
+}
+
+/** status-bar 전용 설정 */
+export interface StatusBarConfig {
+  showCount?: boolean;
+  countColumn?: string;
+  allowAll?: boolean;
+  allLabel?: string;
+  chipStyle?: StatusChipStyle;
+  /** 하위 필터 적용 시 집계 컬럼 자동 전환 (카드가 전달하는 가상 컬럼 사용) */
+  useSubCount?: boolean;
+  /** 하위 필터(공정 선택 등)가 활성화되기 전까지 칩을 숨김 */
+  hideUntilSubFilter?: boolean;
+  /** 칩 숨김 상태일 때 표시할 안내 문구 */
+  hiddenMessage?: string;
+
+  options?: StatusChipOption[];
+
+  /** 필터 대상 컬럼명 (기본: countColumn) */
+  filterColumn?: string;
+  /** 추가 필터 대상 컬럼 (하위 테이블 등) */
+  filterColumns?: string[];
+}
+
+/** 기본 설정값 */
+export const DEFAULT_STATUS_BAR_CONFIG: StatusBarConfig = {
+  showCount: true,
+  allowAll: true,
+  allLabel: "전체",
+  chipStyle: "tab",
+  options: [],
+};
+
+/** 칩 스타일 라벨 (설정 패널용) */
+export const STATUS_CHIP_STYLE_LABELS: Record<StatusChipStyle, string> = {
+  tab: "탭 (큰 숫자)",
+  pill: "알약 (작은 뱃지)",
+};
diff --git a/frontend/lib/registry/pop-components/pop-string-list/PopStringListComponent.tsx b/frontend/lib/registry/pop-components/pop-string-list/PopStringListComponent.tsx
index ea7f5d58..d6595f36 100644
--- a/frontend/lib/registry/pop-components/pop-string-list/PopStringListComponent.tsx
+++ b/frontend/lib/registry/pop-components/pop-string-list/PopStringListComponent.tsx
@@ -193,10 +193,9 @@ export function PopStringListComponent({
       row: RowData,
       filter: { fieldName: string; value: unknown; filterConfig?: { targetColumn: string; targetColumns?: string[]; filterMode: string } }
     ): boolean => {
-      const searchValue = String(filter.value).toLowerCase();
-      if (!searchValue) return true;
-
       const fc = filter.filterConfig;
+      const mode = fc?.filterMode || "contains";
+
       const columns: string[] =
         fc?.targetColumns?.length
           ? fc.targetColumns
@@ -208,17 +207,46 @@ export function PopStringListComponent({
 
       if (columns.length === 0) return true;
 
-      const mode = fc?.filterMode || "contains";
+      // range 모드: { from, to } 객체 또는 단일 날짜 문자열 지원
+      if (mode === "range") {
+        const val = filter.value as { from?: string; to?: string } | string;
+        let from = "";
+        let to = "";
+        if (typeof val === "object" && val !== null) {
+          from = val.from || "";
+          to = val.to || "";
+        } else {
+          from = String(val || "");
+          to = from;
+        }
+        if (!from && !to) return true;
+
+        return columns.some((col) => {
+          const cellDate = String(row[col] ?? "").slice(0, 10);
+          if (!cellDate) return false;
+          if (from && cellDate < from) return false;
+          if (to && cellDate > to) return false;
+          return true;
+        });
+      }
+
+      // 문자열 기반 필터 (contains, equals, starts_with)
+      const searchValue = String(filter.value ?? "").toLowerCase();
+      if (!searchValue) return true;
+
+      // 날짜 패턴 감지 (YYYY-MM-DD): equals 비교 시 ISO 타임스탬프에서 날짜만 추출
+      const isDateValue = /^\d{4}-\d{2}-\d{2}$/.test(searchValue);
 
       const matchCell = (cellValue: string) => {
+        const target = isDateValue && mode === "equals" ? cellValue.slice(0, 10) : cellValue;
         switch (mode) {
           case "equals":
-            return cellValue === searchValue;
+            return target === searchValue;
           case "starts_with":
-            return cellValue.startsWith(searchValue);
+            return target.startsWith(searchValue);
           case "contains":
           default:
-            return cellValue.includes(searchValue);
+            return target.includes(searchValue);
         }
       };
 
diff --git a/frontend/lib/registry/pop-components/types.ts b/frontend/lib/registry/pop-components/types.ts
index 16340c5d..3b7ff73e 100644
--- a/frontend/lib/registry/pop-components/types.ts
+++ b/frontend/lib/registry/pop-components/types.ts
@@ -722,3 +722,264 @@ export interface PopCardListConfig {
   cartListMode?: CartListModeConfig;
   saveMapping?: CardListSaveMapping;
 }
+
+// =============================================
+// pop-card-list-v2 전용 타입 (슬롯 기반 카드)
+// =============================================
+
+import type { ButtonMainAction, ButtonVariant, ConfirmConfig } from "./pop-button";
+
+export type CardCellType =
+  | "text"
+  | "field"
+  | "image"
+  | "badge"
+  | "button"
+  | "number-input"
+  | "cart-button"
+  | "package-summary"
+  | "status-badge"
+  | "timeline"
+  | "action-buttons"
+  | "footer-status";
+
+// timeline 셀에서 사용하는 하위 단계 데이터
+export interface TimelineProcessStep {
+  seqNo: number;
+  processName: string;
+  status: string;                              // DB 원본 값 (또는 derivedFrom에 의해 변환된 값)
+  semantic?: "pending" | "active" | "done";    // 시각적 의미 (렌더러 색상 결정)
+  isCurrent: boolean;
+  processId?: string | number;                 // 공정 테이블 레코드 PK (접수 등 UPDATE 대상 특정용)
+  rawData?: Record<string, unknown>;           // 하위 테이블 원본 행 (하위 필터 매칭용)
+}
+
+// timeline/status-badge/action-buttons가 참조하는 하위 테이블 설정
+export interface TimelineDataSource {
+  processTable: string;       // 하위 데이터 테이블명 (예: work_order_process)
+  foreignKey: string;         // 메인 테이블 id와 매칭되는 FK 컬럼 (예: wo_id)
+  seqColumn: string;          // 순서 컬럼 (예: seq_no)
+  nameColumn: string;         // 표시명 컬럼 (예: process_name)
+  statusColumn: string;       // 상태 컬럼 (예: status)
+  // 상태 값 매핑: DB값 → 시맨틱 (동적 배열, 순서대로 표시)
+  // 레거시 호환: 기존 { waiting, accepted, inProgress, completed } 객체도 런타임에서 자동 변환
+  statusMappings?: StatusValueMapping[];
+}
+
+export type TimelineStatusSemantic = "pending" | "active" | "done";
+
+export interface StatusValueMapping {
+  dbValue: string;                    // DB에 저장된 실제 값 (또는 파생 상태의 식별값)
+  label: string;                      // 화면에 보이는 이름
+  semantic: TimelineStatusSemantic;   // 타임라인 색상 결정 (pending=회색, active=파랑, done=초록)
+  isDerived?: boolean;               // true면 DB에 없는 자동 판별 상태 (이전 공정 완료 시 변환)
+}
+
+export interface CardCellDefinitionV2 {
+  id: string;
+  row: number;
+  col: number;
+  rowSpan: number;
+  colSpan: number;
+  type: CardCellType;
+
+  // 공통
+  columnName?: string;
+  label?: string;
+  labelPosition?: "top" | "left";
+  fontSize?: "xs" | "sm" | "md" | "lg";
+  fontWeight?: "normal" | "medium" | "bold";
+  textColor?: string;
+  align?: "left" | "center" | "right";
+  verticalAlign?: "top" | "middle" | "bottom";
+
+  // field 타입 전용 (CardFieldBinding 흡수)
+  valueType?: "column" | "formula";
+  formulaLeft?: string;
+  formulaOperator?: "+" | "-" | "*" | "/";
+  formulaRight?: string;
+  formulaRightType?: "input" | "column";
+  unit?: string;
+
+  // image 타입 전용
+  defaultImage?: string;
+
+  // button 타입 전용
+  buttonAction?: ButtonMainAction;
+  buttonVariant?: ButtonVariant;
+  buttonConfirm?: ConfirmConfig;
+
+  // number-input 타입 전용
+  inputUnit?: string;
+  limitColumn?: string;
+  autoInitMax?: boolean;
+
+  // cart-button 타입 전용
+  cartLabel?: string;
+  cartCancelLabel?: string;
+  cartIconType?: "lucide" | "emoji";
+  cartIconValue?: string;
+
+  // status-badge 타입 전용
+  statusColumn?: string;
+  statusMap?: Array<{ value: string; label: string; color: string }>;
+
+  // timeline 타입 전용: 공정 데이터 소스 설정
+  timelineSource?: TimelineDataSource;
+  processColumn?: string;
+  processStatusColumn?: string;
+  currentHighlight?: boolean;
+  visibleCount?: number;
+  timelinePriority?: "before" | "after";
+  showDetailModal?: boolean;
+
+  // action-buttons 타입 전용 (신규: 버튼 중심 구조)
+  actionButtons?: ActionButtonDef[];
+  // action-buttons 타입 전용 (구: 조건 중심 구조, 하위호환)
+  actionRules?: Array<{
+    whenStatus: string;
+    buttons: Array<ActionButtonConfig>;
+  }>;
+
+  // footer-status 타입 전용
+  footerLabel?: string;
+  footerStatusColumn?: string;
+  footerStatusMap?: Array<{ value: string; label: string; color: string }>;
+  showTopBorder?: boolean;
+}
+
+export interface ActionButtonUpdate {
+  column: string;
+  value?: string;
+  valueType: "static" | "currentUser" | "currentTime" | "columnRef";
+}
+
+// 액션 버튼 클릭 시 동작 모드
+export type ActionButtonClickMode = "status-change" | "modal-open" | "select-mode";
+
+// 액션 버튼 개별 설정
+export interface ActionButtonConfig {
+  label: string;
+  variant: ButtonVariant;
+  taskPreset: string;
+  confirm?: ConfirmConfig;
+  targetTable?: string;
+  confirmMessage?: string;
+  allowMultiSelect?: boolean;
+  updates?: ActionButtonUpdate[];
+  clickMode?: ActionButtonClickMode;
+  selectModeConfig?: SelectModeConfig;
+}
+
+// 선택 모드 설정
+export interface SelectModeConfig {
+  filterStatus?: string;
+  buttons: Array<SelectModeButtonConfig>;
+}
+
+// 선택 모드 하단 버튼 설정
+export interface SelectModeButtonConfig {
+  label: string;
+  variant: ButtonVariant;
+  clickMode: "status-change" | "modal-open" | "cancel-select";
+  targetTable?: string;
+  updates?: ActionButtonUpdate[];
+  confirmMessage?: string;
+  modalScreenId?: string;
+}
+
+// ===== 버튼 중심 구조 (신규) =====
+
+export interface ActionButtonShowCondition {
+  type: "timeline-status" | "column-value" | "always";
+  value?: string;
+  column?: string;
+  unmatchBehavior?: "hidden" | "disabled";
+}
+
+export interface ActionButtonClickAction {
+  type: "immediate" | "select-mode" | "modal-open";
+  targetTable?: string;
+  updates?: ActionButtonUpdate[];
+  confirmMessage?: string;
+  selectModeButtons?: SelectModeButtonConfig[];
+  modalScreenId?: string;
+  // 외부 테이블 조인 설정 (DB 직접 선택 시)
+  joinConfig?: {
+    sourceColumn: string;   // 메인 테이블의 FK 컬럼
+    targetColumn: string;   // 외부 테이블의 매칭 컬럼
+  };
+}
+
+export interface ActionButtonDef {
+  label: string;
+  variant: ButtonVariant;
+  showCondition?: ActionButtonShowCondition;
+  /** 단일 액션 (하위호환) 또는 다중 액션 체이닝 */
+  clickAction: ActionButtonClickAction;
+  clickActions?: ActionButtonClickAction[];
+}
+
+export interface CardGridConfigV2 {
+  rows: number;
+  cols: number;
+  colWidths: string[];
+  rowHeights?: string[];
+  gap: number;
+  showCellBorder: boolean;
+  cells: CardCellDefinitionV2[];
+}
+
+// ----- V2 카드 선택 동작 -----
+
+export type V2CardClickAction = "none" | "publish" | "navigate" | "modal-open";
+
+export interface V2CardClickModalConfig {
+  screenId: string;
+  modalTitle?: string;
+  condition?: {
+    type: "timeline-status" | "column-value" | "always";
+    value?: string;
+    column?: string;
+  };
+}
+
+// ----- V2 오버플로우 설정 -----
+
+export interface V2OverflowConfig {
+  mode: "loadMore" | "pagination";
+  visibleCount: number;
+  loadMoreCount?: number;
+  pageSize?: number;
+}
+
+// ----- pop-card-list-v2 전체 설정 -----
+
+export interface PopCardListV2Config {
+  dataSource: CardListDataSource;
+  cardGrid: CardGridConfigV2;
+  selectedColumns?: string[];
+  gridColumns?: number;
+  gridRows?: number;
+  scrollDirection?: CardScrollDirection;
+  /** @deprecated 열 수(gridColumns)로 카드 크기 결정. 하위 호환용 */
+  cardSize?: CardSize;
+  cardGap?: number;
+  overflow?: V2OverflowConfig;
+  cardClickAction?: V2CardClickAction;
+  cardClickModalConfig?: V2CardClickModalConfig;
+  /** 연결된 필터 값이 전달되기 전까지 데이터 비표시 */
+  hideUntilFiltered?: boolean;
+  responsiveDisplay?: CardResponsiveConfig;
+  inputField?: CardInputFieldConfig;
+  packageConfig?: CardPackageConfig;
+  cartAction?: CardCartActionConfig;
+  cartListMode?: CartListModeConfig;
+  saveMapping?: CardListSaveMapping;
+}
+
+/** 카드 컴포넌트가 하위 필터 적용 시 주입하는 가상 컬럼 키 */
+export const VIRTUAL_SUB_STATUS = "__subStatus__" as const;
+export const VIRTUAL_SUB_SEMANTIC = "__subSemantic__" as const;
+export const VIRTUAL_SUB_PROCESS = "__subProcessName__" as const;
+export const VIRTUAL_SUB_SEQ = "__subSeqNo__" as const;
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index 5c2e9a61..c813e77d 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -3,13 +3,13 @@
  */
 
 import React from "react";
+import type { ConfigPanelContext } from "@/lib/registry/components/common/ConfigPanelTypes";
 
 // 컴포넌트별 ConfigPanel 동적 import 맵
-// 모든 ConfigPanel이 있는 컴포넌트를 여기에 등록해야 슬롯/중첩 컴포넌트에서 전용 설정 패널이 표시됨
 const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   // ========== V2 컴포넌트 ==========
-  "v2-input": () => import("@/components/v2/config-panels/V2InputConfigPanel"),
-  "v2-select": () => import("@/components/v2/config-panels/V2SelectConfigPanel"),
+  "v2-input": () => import("@/components/v2/config-panels/V2FieldConfigPanel"),
+  "v2-select": () => import("@/components/v2/config-panels/V2FieldConfigPanel"),
   "v2-date": () => import("@/components/v2/config-panels/V2DateConfigPanel"),
   "v2-list": () => import("@/components/v2/config-panels/V2ListConfigPanel"),
   "v2-media": () => import("@/components/v2/config-panels/V2MediaConfigPanel"),
@@ -72,8 +72,6 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "repeat-container": () => import("@/lib/registry/components/repeat-container/RepeatContainerConfigPanel"),
   "v2-repeat-container": () => import("@/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel"),
   "repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
-  "v2-repeater": () => import("@/components/v2/config-panels/V2RepeaterConfigPanel"),
-  "v2-repeater": () => import("@/components/v2/config-panels/V2RepeaterConfigPanel"),
   "simple-repeater-table": () => import("@/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel"),
   "modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
   "repeat-screen-modal": () => import("@/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel"),
@@ -104,84 +102,66 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "category-manager": () => import("@/lib/registry/components/category-manager/CategoryManagerConfigPanel"),
   "universal-form-modal": () => import("@/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel"),
   "v2-process-work-standard": () => import("@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel"),
+
+  // ========== V2 BOM 컴포넌트 ==========
+  "v2-bom-item-editor": () => import("@/components/v2/config-panels/V2BomItemEditorConfigPanel"),
+  "v2-bom-tree": () => import("@/components/v2/config-panels/V2BomTreeConfigPanel"),
+
+  // ========== 레거시 위젯 (component/onUpdateProperty props 사용) ==========
+  "card": () => import("@/components/screen/config-panels/CardConfigPanel"),
+  "dashboard": () => import("@/components/screen/config-panels/DashboardConfigPanel"),
+  "stats": () => import("@/components/screen/config-panels/StatsCardConfigPanel"),
+  "stats-card": () => import("@/components/screen/config-panels/StatsCardConfigPanel"),
+  "progress": () => import("@/components/screen/config-panels/ProgressBarConfigPanel"),
+  "progress-bar": () => import("@/components/screen/config-panels/ProgressBarConfigPanel"),
+  "chart": () => import("@/components/screen/config-panels/ChartConfigPanel"),
+  "chart-basic": () => import("@/components/screen/config-panels/ChartConfigPanel"),
+  "alert": () => import("@/components/screen/config-panels/AlertConfigPanel"),
+  "alert-info": () => import("@/components/screen/config-panels/AlertConfigPanel"),
+  "badge": () => import("@/components/screen/config-panels/BadgeConfigPanel"),
+  "badge-status": () => import("@/components/screen/config-panels/BadgeConfigPanel"),
 };
 
-// ConfigPanel 컴포넌트 캐시
 const configPanelCache = new Map<string, React.ComponentType<any>>();
 
 /**
  * 컴포넌트 ID로 ConfigPanel 컴포넌트를 동적으로 로드
  */
 export async function getComponentConfigPanel(componentId: string): Promise<React.ComponentType<any> | null> {
-  // 캐시에서 먼저 확인
   if (configPanelCache.has(componentId)) {
     return configPanelCache.get(componentId)!;
   }
 
-  // 매핑에서 import 함수 찾기
   const importFn = CONFIG_PANEL_MAP[componentId];
   if (!importFn) {
-    console.warn(`컴포넌트 "${componentId}"에 대한 ConfigPanel을 찾을 수 없습니다.`);
     return null;
   }
 
   try {
     const module = await importFn();
 
-    // 모듈에서 ConfigPanel 컴포넌트 추출
-    // 1차: PascalCase 변환된 이름으로 찾기 (예: text-input -> TextInputConfigPanel)
-    // 2차: v2- 접두사 제거 후 PascalCase 이름으로 찾기 (예: v2-table-list -> TableListConfigPanel)
-    // 3차: 특수 export명들 fallback
+    // 모듈에서 ConfigPanel 컴포넌트 추출 (우선순위):
+    // 1차: PascalCase 변환된 이름 (예: text-input -> TextInputConfigPanel)
+    // 2차: v2- 접두사 제거 후 PascalCase (예: v2-table-list -> TableListConfigPanel)
+    // 3차: *ConfigPanel로 끝나는 첫 번째 named export
     // 4차: default export
     const pascalCaseName = `${toPascalCase(componentId)}ConfigPanel`;
-    // v2- 접두사가 있는 경우 접두사를 제거한 이름도 시도
     const baseComponentId = componentId.startsWith("v2-") ? componentId.slice(3) : componentId;
     const basePascalCaseName = `${toPascalCase(baseComponentId)}ConfigPanel`;
-    
+
+    const findConfigPanelExport = () => {
+      for (const key of Object.keys(module)) {
+        if (key.endsWith("ConfigPanel") && typeof module[key] === "function") {
+          return module[key];
+        }
+      }
+      return null;
+    };
+
     const ConfigPanelComponent =
       module[pascalCaseName] ||
       module[basePascalCaseName] ||
-      // 특수 export명들
-      module.RepeaterConfigPanel ||
-      module.FlowWidgetConfigPanel ||
-      module.CustomerItemMappingConfigPanel ||
-      module.SelectedItemsDetailInputConfigPanel ||
-      module.ButtonConfigPanel ||
-      module.TableListConfigPanel ||
-      module.SectionCardConfigPanel ||
-      module.SectionPaperConfigPanel ||
-      module.TabsConfigPanel ||
-      module.V2RepeaterConfigPanel ||
-      module.V2InputConfigPanel ||
-      module.V2SelectConfigPanel ||
-      module.V2DateConfigPanel ||
-      module.V2ListConfigPanel ||
-      module.V2MediaConfigPanel ||
-      module.V2BizConfigPanel ||
-      module.V2GroupConfigPanel ||
-      module.V2HierarchyConfigPanel ||
-      module.V2LayoutConfigPanel ||
-      module.RepeatContainerConfigPanel ||
-      module.ScreenSplitPanelConfigPanel ||
-      module.SimpleRepeaterTableConfigPanel ||
-      module.ModalRepeaterTableConfigPanel ||
-      module.RepeatScreenModalConfigPanel ||
-      module.RelatedDataButtonsConfigPanel ||
-      module.AutocompleteSearchInputConfigPanel ||
-      module.EntitySearchInputConfigPanel ||
-      module.MailRecipientSelectorConfigPanel ||
-      module.LocationSwapSelectorConfigPanel ||
-      module.MapConfigPanel ||
-      module.RackStructureConfigPanel ||
-      module.AggregationWidgetConfigPanel ||
-      module.NumberingRuleConfigPanel ||
-      module.CategoryManagerConfigPanel ||
-      module.UniversalFormModalConfigPanel ||
-      module.PivotGridConfigPanel ||
-      module.TableSearchWidgetConfigPanel ||
-      module.TaxInvoiceListConfigPanel ||
-      module.ImageWidgetConfigPanel ||
-      module.TestInputConfigPanel ||
+      findConfigPanelExport() ||
       module.default;
 
     if (!ConfigPanelComponent) {
@@ -189,9 +169,7 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
       return null;
     }
 
-    // 캐시에 저장
     configPanelCache.set(componentId, ConfigPanelComponent);
-
     return ConfigPanelComponent;
   } catch (error) {
     console.error(`컴포넌트 "${componentId}"의 ConfigPanel 로드 실패:`, error);
@@ -199,24 +177,14 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
   }
 }
 
-/**
- * 컴포넌트 ID가 ConfigPanel을 지원하는지 확인
- */
 export function hasComponentConfigPanel(componentId: string): boolean {
   return componentId in CONFIG_PANEL_MAP;
 }
 
-/**
- * 지원되는 모든 컴포넌트 ID 목록 조회
- */
 export function getSupportedConfigPanelComponents(): string[] {
   return Object.keys(CONFIG_PANEL_MAP);
 }
 
-/**
- * kebab-case를 PascalCase로 변환
- * text-input → TextInput
- */
 function toPascalCase(str: string): string {
   return str
     .split("-")
@@ -231,12 +199,13 @@ export interface ComponentConfigPanelProps {
   componentId: string;
   config: Record<string, any>;
   onChange: (config: Record<string, any>) => void;
-  screenTableName?: string; // 화면에서 지정한 테이블명
-  tableColumns?: any[]; // 테이블 컬럼 정보
-  tables?: any[]; // 전체 테이블 목록
-  menuObjid?: number; // 🆕 메뉴 OBJID (코드/카테고리/채번규칙 스코프용)
-  allComponents?: any[]; // 🆕 현재 화면의 모든 컴포넌트 (연쇄 드롭다운 부모 감지용)
-  currentComponent?: any; // 🆕 현재 컴포넌트 정보
+  screenTableName?: string;
+  tableColumns?: any[];
+  tables?: any[];
+  menuObjid?: number;
+  allComponents?: any[];
+  currentComponent?: any;
+  componentType?: string;
 }
 
 export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> = ({
@@ -249,54 +218,43 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   menuObjid,
   allComponents,
   currentComponent,
+  componentType,
 }) => {
-  // 모든 useState를 최상단에 선언 (Hooks 규칙)
   const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState<string | null>(null);
   const [selectedTableColumns, setSelectedTableColumns] = React.useState(tableColumns);
   const [allTablesList, setAllTablesList] = React.useState<any[]>([]);
-  
-  // 🆕 selected-items-detail-input 전용 상태
   const [sourceTableColumns, setSourceTableColumns] = React.useState<any[]>([]);
   const [targetTableColumns, setTargetTableColumns] = React.useState<any[]>([]);
 
   React.useEffect(() => {
     let mounted = true;
-
     async function loadConfigPanel() {
       try {
         setLoading(true);
         setError(null);
-
         const component = await getComponentConfigPanel(componentId);
-
         if (mounted) {
           setConfigPanelComponent(() => component);
           setLoading(false);
         }
       } catch (err) {
-        console.error(`❌ DynamicComponentConfigPanel: ${componentId} 로드 실패:`, err);
         if (mounted) {
           setError(err instanceof Error ? err.message : String(err));
           setLoading(false);
         }
       }
     }
-
     loadConfigPanel();
-
-    return () => {
-      mounted = false;
-    };
+    return () => { mounted = false; };
   }, [componentId]);
 
-  // tableColumns가 변경되면 selectedTableColumns도 업데이트
   React.useEffect(() => {
     setSelectedTableColumns(tableColumns);
   }, [tableColumns]);
 
-  // RepeaterConfigPanel과 selected-items-detail-input에서 전체 테이블 목록 로드
+  // repeater-field-group / selected-items-detail-input에서 전체 테이블 목록 로드
   React.useEffect(() => {
     if (componentId === "repeater-field-group" || componentId === "selected-items-detail-input") {
       const loadAllTables = async () => {
@@ -304,100 +262,57 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
           const { tableManagementApi } = await import("@/lib/api/tableManagement");
           const response = await tableManagementApi.getTableList();
           if (response.success && response.data) {
-            console.log(`✅ 전체 테이블 목록 로드 완료 (${componentId}):`, response.data.length);
             setAllTablesList(response.data);
           }
-        } catch (error) {
-          console.error("전체 테이블 목록 로드 실패:", error);
+        } catch (_) {
+          // 전체 테이블 목록 로드 실패 시 무시
         }
       };
       loadAllTables();
     }
   }, [componentId]);
 
-  // 🆕 selected-items-detail-input: 초기 sourceTable/targetTable 컬럼 로드
+  // selected-items-detail-input: 초기 sourceTable/targetTable 컬럼 로드
   React.useEffect(() => {
-    if (componentId === "selected-items-detail-input") {
-      console.log("🔍 selected-items-detail-input 초기 설정:", config);
-      
-      // 원본 테이블 컬럼 로드
-      if (config.sourceTable) {
-        const loadSourceColumns = async () => {
-          try {
-            const { tableTypeApi } = await import("@/lib/api/screen");
-            const columnsResponse = await tableTypeApi.getColumns(config.sourceTable);
+    if (componentId !== "selected-items-detail-input") return;
 
-            const columns = (columnsResponse || []).map((col: any) => ({
-              columnName: col.columnName || col.column_name,
-              columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
-              dataType: col.dataType || col.data_type || col.dbType,
-              inputType: col.inputType || col.input_type, // 🆕 inputType 추가
-            }));
-
-            console.log("✅ 원본 테이블 컬럼 초기 로드 완료:", columns.length);
-            setSourceTableColumns(columns);
-          } catch (error) {
-            console.error("❌ 원본 테이블 컬럼 초기 로드 실패:", error);
-          }
-        };
-        loadSourceColumns();
+    const loadColumns = async (tableName: string, setter: React.Dispatch<React.SetStateAction<any[]>>, includeCodeCategory?: boolean) => {
+      try {
+        const { tableTypeApi } = await import("@/lib/api/screen");
+        const columnsResponse = await tableTypeApi.getColumns(tableName);
+        const columns = (columnsResponse || []).map((col: any) => ({
+          columnName: col.columnName || col.column_name,
+          columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
+          dataType: col.dataType || col.data_type || col.dbType,
+          inputType: col.inputType || col.input_type,
+          ...(includeCodeCategory ? { codeCategory: col.codeCategory || col.code_category } : {}),
+        }));
+        setter(columns);
+      } catch (_) {
+        setter([]);
       }
-      
-      // 대상 테이블 컬럼 로드
-      if (config.targetTable) {
-        const loadTargetColumns = async () => {
-          try {
-            const { tableTypeApi } = await import("@/lib/api/screen");
-            const columnsResponse = await tableTypeApi.getColumns(config.targetTable);
+    };
 
-            const columns = (columnsResponse || []).map((col: any) => ({
-              columnName: col.columnName || col.column_name,
-              columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
-              dataType: col.dataType || col.data_type || col.dbType,
-              inputType: col.inputType || col.input_type, // 🆕 inputType 추가
-              codeCategory: col.codeCategory || col.code_category, // 🆕 codeCategory 추가
-            }));
-
-            console.log("✅ 대상 테이블 컬럼 초기 로드 완료:", columns.length);
-            setTargetTableColumns(columns);
-          } catch (error) {
-            console.error("❌ 대상 테이블 컬럼 초기 로드 실패:", error);
-          }
-        };
-        loadTargetColumns();
-      }
-    }
+    if (config.sourceTable) loadColumns(config.sourceTable, setSourceTableColumns);
+    if (config.targetTable) loadColumns(config.targetTable, setTargetTableColumns, true);
   }, [componentId, config.sourceTable, config.targetTable]);
 
-  // 🆕 allComponents를 screenComponents 형태로 변환 (집계 위젯 등에서 사용)
-  // Hooks 규칙: 조건부 return 전에 선언해야 함
   const screenComponents = React.useMemo(() => {
-    if (!allComponents) {
-      console.log("[getComponentConfigPanel] allComponents is undefined or null");
-      return [];
-    }
-    console.log("[getComponentConfigPanel] allComponents 변환 시작:", allComponents.length, "개");
-    const result = allComponents.map((comp: any) => {
-      const columnName = comp.columnName || comp.componentConfig?.columnName || comp.componentConfig?.fieldName;
-      console.log(`[getComponentConfigPanel] comp: ${comp.id}, type: ${comp.componentType || comp.type}, columnName: ${columnName}`);
-      return {
-        id: comp.id,
-        componentType: comp.componentType || comp.type,
-        label: comp.label || comp.name || comp.id,
-        tableName: comp.componentConfig?.tableName || comp.tableName,
-        // 🆕 폼 필드 인식용 columnName 추가
-        columnName,
-      };
-    });
-    console.log("[getComponentConfigPanel] screenComponents 변환 완료:", result);
-    return result;
+    if (!allComponents) return [];
+    return allComponents.map((comp: any) => ({
+      id: comp.id,
+      componentType: comp.componentType || comp.type,
+      label: comp.label || comp.name || comp.id,
+      tableName: comp.componentConfig?.tableName || comp.tableName,
+      columnName: comp.columnName || comp.componentConfig?.columnName || comp.componentConfig?.fieldName,
+    }));
   }, [allComponents]);
 
   if (loading) {
     return (
       <div className="rounded-md border border-dashed border-input bg-muted p-4 w-full">
         <div className="flex items-center gap-2 text-muted-foreground">
-          <span className="text-sm font-medium">⏳ 로딩 중...</span>
+          <span className="text-sm font-medium">로딩 중...</span>
         </div>
         <p className="mt-1 text-xs text-muted-foreground">설정 패널을 불러오는 중입니다.</p>
       </div>
@@ -408,7 +323,7 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     return (
       <div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4 w-full">
         <div className="flex items-center gap-2 text-destructive">
-          <span className="text-sm font-medium">⚠️ 로드 실패</span>
+          <span className="text-sm font-medium">로드 실패</span>
         </div>
         <p className="mt-1 text-xs text-destructive">설정 패널을 불러올 수 없습니다: {error}</p>
       </div>
@@ -416,31 +331,26 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   }
 
   if (!ConfigPanelComponent) {
-    console.warn(`⚠️ DynamicComponentConfigPanel: ${componentId} ConfigPanelComponent가 null`);
     return (
       <div className="rounded-md border border-dashed border-amber-300 bg-amber-50 p-4 w-full">
         <div className="flex items-center gap-2 text-amber-600">
-          <span className="text-sm font-medium">⚠️ 설정 패널 없음</span>
+          <span className="text-sm font-medium">설정 패널 없음</span>
         </div>
-        <p className="mt-1 text-xs text-amber-500">컴포넌트 "{componentId}"에 대한 설정 패널이 없습니다.</p>
+        <p className="mt-1 text-xs text-amber-500">컴포넌트 &quot;{componentId}&quot;에 대한 설정 패널이 없습니다.</p>
       </div>
     );
   }
 
-  // 테이블 변경 핸들러 - 선택된 테이블의 컬럼을 동적으로 로드
+  // 테이블 변경 핸들러
   const handleTableChange = async (tableName: string) => {
     try {
-      // 먼저 tables에서 찾아보기 (이미 컬럼이 있는 경우)
       const existingTable = tables?.find((t) => t.tableName === tableName);
-      if (existingTable && existingTable.columns && existingTable.columns.length > 0) {
+      if (existingTable?.columns?.length > 0) {
         setSelectedTableColumns(existingTable.columns);
         return;
       }
-
-      // 컬럼이 없으면 tableTypeApi로 조회 (ScreenDesigner와 동일한 방식)
       const { tableTypeApi } = await import("@/lib/api/screen");
       const columnsResponse = await tableTypeApi.getColumns(tableName);
-
       const columns = (columnsResponse || []).map((col: any) => ({
         tableName: col.tableName || tableName,
         columnName: col.columnName || col.column_name,
@@ -456,160 +366,97 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
         codeCategory: col.codeCategory || col.code_category,
         codeValue: col.codeValue || col.code_value,
       }));
-
       setSelectedTableColumns(columns);
-    } catch (error) {
-      console.error("❌ 테이블 변경 오류:", error);
-      // 오류 발생 시 빈 배열
+    } catch (_) {
       setSelectedTableColumns([]);
     }
   };
 
-  // 🆕 원본 테이블 컬럼 로드 핸들러 (selected-items-detail-input용)
   const handleSourceTableChange = async (tableName: string) => {
-    console.log("🔄 원본 테이블 변경:", tableName);
     try {
       const { tableTypeApi } = await import("@/lib/api/screen");
       const columnsResponse = await tableTypeApi.getColumns(tableName);
-
       const columns = (columnsResponse || []).map((col: any) => ({
         columnName: col.columnName || col.column_name,
         columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
         dataType: col.dataType || col.data_type || col.dbType,
-        inputType: col.inputType || col.input_type, // 🆕 inputType 추가
+        inputType: col.inputType || col.input_type,
       }));
-
-      console.log("✅ 원본 테이블 컬럼 로드 완료:", columns.length);
       setSourceTableColumns(columns);
-    } catch (error) {
-      console.error("❌ 원본 테이블 컬럼 로드 실패:", error);
+    } catch (_) {
       setSourceTableColumns([]);
     }
   };
 
-  // 🆕 대상 테이블 컬럼 로드 핸들러 (selected-items-detail-input용)
   const handleTargetTableChange = async (tableName: string) => {
-    console.log("🔄 대상 테이블 변경:", tableName);
     try {
       const { tableTypeApi } = await import("@/lib/api/screen");
       const columnsResponse = await tableTypeApi.getColumns(tableName);
-
-      console.log("📡 [handleTargetTableChange] API 응답 (원본):", {
-        totalColumns: columnsResponse.length,
-        sampleColumns: columnsResponse.slice(0, 3),
-        currency_code_raw: columnsResponse.find((c: any) => (c.columnName || c.column_name) === 'currency_code')
-      });
-
       const columns = (columnsResponse || []).map((col: any) => ({
         columnName: col.columnName || col.column_name,
         columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
         dataType: col.dataType || col.data_type || col.dbType,
-        inputType: col.inputType || col.input_type, // 🆕 inputType 추가
-        codeCategory: col.codeCategory || col.code_category, // 🆕 codeCategory 추가
+        inputType: col.inputType || col.input_type,
+        codeCategory: col.codeCategory || col.code_category,
       }));
-
-      console.log("✅ 대상 테이블 컬럼 변환 완료:", {
-        tableName,
-        totalColumns: columns.length,
-        currency_code: columns.find((c: any) => c.columnName === "currency_code"),
-        discount_rate: columns.find((c: any) => c.columnName === "discount_rate")
-      });
-
       setTargetTableColumns(columns);
-    } catch (error) {
-      console.error("❌ 대상 테이블 컬럼 로드 실패:", error);
+    } catch (_) {
       setTargetTableColumns([]);
     }
   };
 
-  // 🆕 수주 등록 관련 컴포넌트들은 간단한 인터페이스 사용
-  const isSimpleConfigPanel = [
-    "autocomplete-search-input",
-    "modal-repeater-table",
-    "conditional-container",
-  ].includes(componentId);
+  // --- 특수 래퍼: 레거시 위젯 (component/onUpdateProperty props) ---
+  const LEGACY_PANELS = new Set([
+    "card", "dashboard", "stats", "stats-card",
+    "progress", "progress-bar", "chart", "chart-basic",
+    "alert", "alert-info", "badge", "badge-status",
+  ]);
 
-  if (isSimpleConfigPanel) {
-    return <ConfigPanelComponent config={config} onConfigChange={onChange} />;
-  }
-
-  // 🆕 V2 컴포넌트들은 전용 props 사용
-  if (componentId.startsWith("v2-")) {
-    return (
-      <ConfigPanelComponent 
-        config={config} 
-        onChange={onChange}
-        menuObjid={menuObjid}
-        inputType={currentComponent?.inputType || config?.inputType}
-        screenTableName={screenTableName}
-        tableColumns={selectedTableColumns}
-      />
-    );
-  }
-
-  // entity-search-input은 currentComponent 정보 필요 (참조 테이블 자동 로드용)
-  // 그리고 allComponents 필요 (연쇄관계 부모 필드 선택용)
-  if (componentId === "entity-search-input") {
-    return (
-      <ConfigPanelComponent 
-        config={config} 
-        onConfigChange={onChange} 
-        currentComponent={currentComponent}
-        allComponents={allComponents}
-      />
-    );
-  }
-
-  // 🆕 selected-items-detail-input은 특별한 props 사용
-  if (componentId === "selected-items-detail-input") {
+  if (LEGACY_PANELS.has(componentId)) {
+    const pseudoComponent = {
+      id: currentComponent?.id || "temp",
+      type: "component",
+      componentConfig: config,
+      ...currentComponent,
+    };
     return (
       <ConfigPanelComponent
-        config={config}
-        onChange={onChange}
-        sourceTableColumns={sourceTableColumns} // 🆕 원본 테이블 컬럼
-        targetTableColumns={targetTableColumns} // 🆕 대상 테이블 컬럼
-        allTables={allTablesList.length > 0 ? allTablesList : tables} // 전체 테이블 목록 (동적 로드 or 전달된 목록)
-        screenTableName={screenTableName} // 🆕 현재 화면의 테이블명 (자동 설정용)
-        onSourceTableChange={handleSourceTableChange} // 🆕 원본 테이블 변경 핸들러
-        onTargetTableChange={handleTargetTableChange} // 🆕 대상 테이블 변경 핸들러
+        component={pseudoComponent}
+        onUpdateProperty={(path: string, value: any) => {
+          if (path.startsWith("componentConfig.")) {
+            const key = path.replace("componentConfig.", "");
+            onChange({ ...config, [key]: value });
+          }
+        }}
       />
     );
   }
 
-  // 🆕 ButtonConfigPanel은 component와 onUpdateProperty를 사용
+  // --- 특수 래퍼: ButtonConfigPanel (component/onUpdateProperty props) ---
   if (componentId === "button-primary" || componentId === "v2-button-primary") {
-    // currentComponent가 있으면 그것을 사용, 없으면 config에서 component 구조 생성
     const componentForButton = currentComponent || {
       id: "temp",
       type: "component",
       componentType: componentId,
       componentConfig: config,
     };
-    
     return (
       <ConfigPanelComponent
         component={componentForButton}
         onUpdateProperty={(path: string, value: any) => {
-          // path가 componentConfig로 시작하면 내부 경로 추출
           if (path.startsWith("componentConfig.")) {
             const configPath = path.replace("componentConfig.", "");
             const pathParts = configPath.split(".");
-            
-            // 중첩된 경로 처리 - 현재 config를 기반으로 새 config 생성
             const currentConfig = componentForButton.componentConfig || {};
-            const newConfig = JSON.parse(JSON.stringify(currentConfig)); // deep clone
+            const newConfig = JSON.parse(JSON.stringify(currentConfig));
             let current: any = newConfig;
             for (let i = 0; i < pathParts.length - 1; i++) {
-              if (!current[pathParts[i]]) {
-                current[pathParts[i]] = {};
-              }
+              if (!current[pathParts[i]]) current[pathParts[i]] = {};
               current = current[pathParts[i]];
             }
             current[pathParts[pathParts.length - 1]] = value;
-            
             onChange(newConfig);
           } else {
-            // 직접 config 속성 변경
             const currentConfig = componentForButton.componentConfig || {};
             onChange({ ...currentConfig, [path]: value });
           }
@@ -620,20 +467,41 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
     );
   }
 
+  // --- 통일된 props: 모든 일반 패널에 동일한 props 전달 ---
+  const context: ConfigPanelContext = {
+    tables,
+    tableColumns: selectedTableColumns,
+    screenTableName,
+    menuObjid,
+    allComponents,
+    currentComponent,
+    allTables: allTablesList.length > 0 ? allTablesList : tables,
+    screenComponents,
+  };
+
   return (
     <ConfigPanelComponent
       config={config}
       onChange={onChange}
-      onConfigChange={onChange} // TableListConfigPanel을 위한 추가 prop
+      onConfigChange={onChange}
+      context={context}
       screenTableName={screenTableName}
-      tableColumns={selectedTableColumns} // 동적으로 변경되는 컬럼 전달
-      tables={tables} // 기본 테이블 목록 (현재 화면의 테이블만)
-      allTables={componentId === "repeater-field-group" ? allTablesList : tables} // RepeaterConfigPanel만 전체 테이블
-      onTableChange={handleTableChange} // 테이블 변경 핸들러 전달
-      menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
-      allComponents={allComponents} // 🆕 현재 화면의 모든 컴포넌트 (연쇄 드롭다운 부모 감지용)
-      currentComponent={currentComponent} // 🆕 현재 컴포넌트 정보
-      screenComponents={screenComponents} // 🆕 집계 위젯 등에서 사용하는 컴포넌트 목록
+      tableName={screenTableName}
+      columnName={currentComponent?.columnName || config?.columnName || config?.fieldName}
+      tableColumns={selectedTableColumns}
+      tables={tables}
+      allTables={allTablesList.length > 0 ? allTablesList : tables}
+      onTableChange={handleTableChange}
+      menuObjid={menuObjid}
+      allComponents={allComponents}
+      currentComponent={currentComponent}
+      screenComponents={screenComponents}
+      inputType={currentComponent?.inputType || config?.inputType}
+      componentType={componentType || componentId}
+      sourceTableColumns={sourceTableColumns}
+      targetTableColumns={targetTableColumns}
+      onSourceTableChange={handleSourceTableChange}
+      onTargetTableChange={handleTargetTableChange}
     />
   );
 };
diff --git a/frontend/types/auth.ts b/frontend/types/auth.ts
index cd8e65b6..574eff59 100644
--- a/frontend/types/auth.ts
+++ b/frontend/types/auth.ts
@@ -14,6 +14,7 @@ export interface LoginResponse {
     token?: string;
     userInfo?: any;
     firstMenuPath?: string | null;
+    popLandingPath?: string | null;
   };
   errorCode?: string;
 }
diff --git a/scripts/analyze-company-info-layout.js b/scripts/analyze-company-info-layout.js
new file mode 100644
index 00000000..8312df97
--- /dev/null
+++ b/scripts/analyze-company-info-layout.js
@@ -0,0 +1,106 @@
+/**
+ * 회사 기본정보 화면 - 컴포넌트 렌더링 비율 정밀 분석
+ * 
+ * 사용법: 브라우저에서 회사 기본정보 화면을 연 상태에서
+ * F12 → Console 탭 → 이 스크립트 전체를 붙여넣고 Enter
+ */
+
+(function analyzeLayout() {
+  const results = { part1: null, part2: null };
+
+  // ========== Part 1: DesktopCanvasRenderer 구조 확인 ==========
+  const runtime = document.querySelector('[data-screen-runtime="true"]');
+  if (!runtime) {
+    console.warn('⚠️ [data-screen-runtime="true"] 요소를 찾을 수 없습니다.');
+    console.log('대안: ScreenModal 기반 렌더링이거나 다른 구조일 수 있습니다.');
+    results.part1 = { error: 'Runtime not found' };
+  } else {
+    const rect = runtime.getBoundingClientRect();
+    const inner = runtime.firstElementChild;
+
+    results.part1 = {
+      runtimeContainer: { width: rect.width, height: rect.height },
+      innerDiv: null,
+      components: [],
+    };
+
+    if (inner) {
+      const style = inner.style;
+      results.part1.innerDiv = {
+        width: style.width,
+        height: style.height,
+        transform: style.transform,
+        transformOrigin: style.transformOrigin,
+        position: style.position,
+      };
+
+      const comps = inner.querySelectorAll('[data-component-id]');
+      comps.forEach((comp) => {
+        const s = comp.style;
+        const r = comp.getBoundingClientRect();
+        results.part1.components.push({
+          type: comp.getAttribute('data-component-type'),
+          id: comp.getAttribute('data-component-id'),
+          stylePos: `(${s.left}, ${s.top})`,
+          styleSize: `${s.width} x ${s.height}`,
+          renderedSize: `${Math.round(r.width)} x ${Math.round(r.height)}`,
+        });
+      });
+    } else {
+      // ResponsiveGridRenderer (flex 기반) 구조일 수 있음 - 행 단위로 확인
+      const rows = runtime.querySelectorAll(':scope > div');
+      results.part1.rows = [];
+      rows.forEach((row, i) => {
+        const children = row.children;
+        const rowData = { rowIndex: i, childCount: children.length, children: [] };
+        Array.from(children).forEach((child, j) => {
+          const cs = window.getComputedStyle(child);
+          const r = child.getBoundingClientRect();
+          rowData.children.push({
+            type: child.getAttribute('data-component-type') || 'unknown',
+            width: Math.round(r.width),
+            height: Math.round(r.height),
+            flexGrow: cs.flexGrow,
+            flexBasis: cs.flexBasis,
+          });
+        });
+        results.part1.rows.push(rowData);
+      });
+    }
+  }
+
+  // ========== Part 2: wrapper vs child 크기 확인 ==========
+  const comps = document.querySelectorAll('[data-component-id]');
+  results.part2 = [];
+  comps.forEach((comp) => {
+    const type = comp.getAttribute('data-component-type');
+    const child = comp.firstElementChild;
+    if (child) {
+      const childRect = child.getBoundingClientRect();
+      const compRect = comp.getBoundingClientRect();
+      results.part2.push({
+        type,
+        wrapper: `${Math.round(compRect.width)}x${Math.round(compRect.height)}`,
+        child: `${Math.round(childRect.width)}x${Math.round(childRect.height)}`,
+        overflow: childRect.width > compRect.width ? 'YES' : 'no',
+      });
+    }
+  });
+
+  // ========== 결과 출력 ==========
+  console.log('========== Part 1: Runtime 구조 ==========');
+  console.log(JSON.stringify(results.part1, null, 2));
+
+  console.log('\n========== Part 2: Wrapper vs Child ==========');
+  results.part2.forEach((r) => {
+    console.log(`${r.type}: wrapper=${r.wrapper}, child=${r.child}, overflow=${r.overflow}`);
+  });
+
+  // scale 값 추출 (transform에서)
+  if (results.part1?.innerDiv?.transform) {
+    const m = results.part1.innerDiv.transform.match(/scale\(([^)]+)\)/);
+    if (m) console.log('\n📐 Scale 값:', m[1]);
+  }
+
+  return results;
+})();
diff --git a/test-output/config-panel-audit/audit-config-panels.ts b/test-output/config-panel-audit/audit-config-panels.ts
new file mode 100644
index 00000000..a07a606d
--- /dev/null
+++ b/test-output/config-panel-audit/audit-config-panels.ts
@@ -0,0 +1,389 @@
+import { chromium, Page, Browser } from "playwright";
+import * as fs from "fs";
+import * as path from "path";
+
+const BASE_URL = "http://localhost:9771";
+const API_URL = "http://localhost:8080/api";
+const OUTPUT_DIR = path.join(__dirname);
+
+interface ComponentTestResult {
+  componentType: string;
+  screenId: number;
+  status: "pass" | "fail" | "no_panel" | "not_found" | "error";
+  errorMessage?: string;
+  consoleErrors: string[];
+  hasConfigPanel: boolean;
+  screenshot?: string;
+}
+
+const COMPONENT_SCREEN_MAP: Record<string, number> = {
+  "v2-input": 60,
+  "v2-select": 71,
+  "v2-date": 77,
+  "v2-button-primary": 47,
+  "v2-text-display": 114,
+  "v2-table-list": 47,
+  "v2-table-search-widget": 79,
+  "v2-media": 74,
+  "v2-split-panel-layout": 74,
+  "v2-tabs-widget": 1011,
+  "v2-section-card": 1188,
+  "v2-section-paper": 202,
+  "v2-card-display": 83,
+  "v2-numbering-rule": 130,
+  "v2-repeater": 1188,
+  "v2-divider-line": 1195,
+  "v2-location-swap-selector": 1195,
+  "v2-category-manager": 135,
+  "v2-file-upload": 138,
+  "v2-pivot-grid": 2327,
+  "v2-rack-structure": 1575,
+  "v2-repeat-container": 2403,
+  "v2-split-line": 4151,
+  "v2-bom-item-editor": 4154,
+  "v2-process-work-standard": 4158,
+  "v2-aggregation-widget": 4119,
+  "flow-widget": 77,
+  "entity-search-input": 3986,
+  "select-basic": 4470,
+  "textarea-basic": 3986,
+  "selected-items-detail-input": 227,
+  "screen-split-panel": 1674,
+  "split-panel-layout2": 2089,
+  "universal-form-modal": 2180,
+  "v2-table-grouped": 79,
+  "v2-status-count": 4498,
+  "v2-timeline-scheduler": 79,
+};
+
+async function login(page: Page): Promise<string> {
+  await page.goto(`${BASE_URL}/login`);
+  await page.waitForLoadState("networkidle");
+  await page.getByPlaceholder("사용자 ID를 입력하세요").fill("wace");
+  await page.getByPlaceholder("비밀번호를 입력하세요").fill("qlalfqjsgh11");
+  await page.getByRole("button", { name: "로그인" }).click();
+  await page.waitForTimeout(5000);
+
+  const token = await page.evaluate(() => localStorage.getItem("authToken") || "");
+  console.log("Login token obtained:", token ? "YES" : "NO");
+  return token;
+}
+
+async function openDesigner(page: Page, screenId: number): Promise<boolean> {
+  await page.evaluate(() => {
+    sessionStorage.setItem(
+      "erp-tab-store",
+      JSON.stringify({
+        state: {
+          tabs: [
+            {
+              id: "tab-screenmng",
+              title: "화면 관리",
+              path: "/admin/screenMng/screenMngList",
+              isActive: true,
+              isPinned: false,
+            },
+          ],
+          activeTabId: "tab-screenmng",
+        },
+        version: 0,
+      })
+    );
+  });
+
+  await page.goto(`${BASE_URL}/admin/screenMng/screenMngList?openDesigner=${screenId}`);
+  await page.waitForTimeout(8000);
+
+  const designerOpen = await page.locator('[class*="designer"], [class*="canvas"], [data-testid*="designer"]').count();
+  const hasComponents = await page.locator('[data-component-id], [class*="component-wrapper"]').count();
+  console.log(`  Designer elements: ${designerOpen}, Components: ${hasComponents}`);
+  return designerOpen > 0 || hasComponents > 0;
+}
+
+async function testComponentConfigPanel(
+  page: Page,
+  componentType: string,
+  screenId: number
+): Promise<ComponentTestResult> {
+  const result: ComponentTestResult = {
+    componentType,
+    screenId,
+    status: "error",
+    consoleErrors: [],
+    hasConfigPanel: false,
+  };
+
+  const consoleErrors: string[] = [];
+  const pageErrors: string[] = [];
+
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      consoleErrors.push(msg.text());
+    }
+  });
+  page.on("pageerror", (err) => {
+    pageErrors.push(err.message);
+  });
+
+  try {
+    const opened = await openDesigner(page, screenId);
+    if (!opened) {
+      result.status = "error";
+      result.errorMessage = "Designer failed to open";
+      return result;
+    }
+
+    // find component by its url or type attribute in the DOM
+    const componentUrl = componentType.startsWith("v2-")
+      ? `@/lib/registry/components/${componentType}`
+      : `@/lib/registry/components/${componentType}`;
+
+    // Try clicking on a component of this type
+    // The screen designer renders components with data attributes
+    const componentSelector = `[data-component-type="${componentType}"], [data-component-url*="${componentType}"]`;
+    const componentCount = await page.locator(componentSelector).count();
+
+    if (componentCount === 0) {
+      // Try alternative: look for components in the canvas by clicking around
+      // First try to find any clickable component wrapper
+      const wrappers = page.locator('[data-component-id]');
+      const wrapperCount = await wrappers.count();
+
+      if (wrapperCount === 0) {
+        result.status = "not_found";
+        result.errorMessage = `No components found in screen ${screenId}`;
+        return result;
+      }
+
+      // Click the first component to see if panel opens
+      let foundTarget = false;
+      for (let i = 0; i < Math.min(wrapperCount, 20); i++) {
+        try {
+          await wrappers.nth(i).click({ force: true, timeout: 2000 });
+          await page.waitForTimeout(1000);
+
+          // Check if the properties panel shows the right component type
+          const panelText = await page.locator('[class*="properties"], [class*="config-panel"], [class*="setting"]').textContent().catch(() => "");
+          if (panelText && panelText.includes(componentType)) {
+            foundTarget = true;
+            break;
+          }
+        } catch {
+          continue;
+        }
+      }
+
+      if (!foundTarget) {
+        result.status = "not_found";
+        result.errorMessage = `Component type "${componentType}" not clickable in screen ${screenId}`;
+      }
+    } else {
+      await page.locator(componentSelector).first().click({ force: true });
+      await page.waitForTimeout(2000);
+    }
+
+    // Check for the config panel in the right sidebar
+    await page.waitForTimeout(2000);
+
+    // Look for config panel indicators
+    const configPanelVisible = await page.evaluate(() => {
+      // Check for error boundaries or error messages
+      const errorElements = document.querySelectorAll('[class*="error"], [class*="Error"]');
+      const errorTexts: string[] = [];
+      errorElements.forEach((el) => {
+        const text = el.textContent || "";
+        if (text.includes("로드 실패") || text.includes("에러") || text.includes("Error") || text.includes("Cannot read")) {
+          errorTexts.push(text.substring(0, 200));
+        }
+      });
+
+      // Check for config panel elements
+      const hasTabs = document.querySelectorAll('button[role="tab"]').length > 0;
+      const hasLabels = document.querySelectorAll("label").length > 0;
+      const hasInputs = document.querySelectorAll('input, select, [role="combobox"]').length > 0;
+      const hasConfigContent = document.querySelectorAll('[class*="config"], [class*="panel"], [class*="properties"]').length > 0;
+      const hasEditTab = Array.from(document.querySelectorAll("button")).some((b) => b.textContent?.includes("편집"));
+
+      return {
+        errorTexts,
+        hasTabs,
+        hasLabels,
+        hasInputs,
+        hasConfigContent,
+        hasEditTab,
+      };
+    });
+
+    result.hasConfigPanel = configPanelVisible.hasConfigContent || configPanelVisible.hasEditTab;
+
+    // Take screenshot
+    const screenshotName = `${componentType.replace(/[^a-zA-Z0-9-]/g, "_")}.png`;
+    const screenshotPath = path.join(OUTPUT_DIR, screenshotName);
+    await page.screenshot({ path: screenshotPath, fullPage: false });
+    result.screenshot = screenshotName;
+
+    // Collect errors
+    result.consoleErrors = [...consoleErrors, ...pageErrors];
+
+    if (configPanelVisible.errorTexts.length > 0) {
+      result.status = "fail";
+      result.errorMessage = configPanelVisible.errorTexts.join("; ");
+    } else if (pageErrors.length > 0) {
+      result.status = "fail";
+      result.errorMessage = pageErrors.join("; ");
+    } else if (consoleErrors.some((e) => e.includes("Cannot read") || e.includes("is not a function") || e.includes("undefined"))) {
+      result.status = "fail";
+      result.errorMessage = consoleErrors.filter((e) => e.includes("Cannot read") || e.includes("is not a function")).join("; ");
+    } else {
+      result.status = "pass";
+    }
+  } catch (err: any) {
+    result.status = "error";
+    result.errorMessage = err.message;
+  }
+
+  return result;
+}
+
+async function main() {
+  console.log("=== Config Panel Full Audit ===");
+  console.log(`Testing ${Object.keys(COMPONENT_SCREEN_MAP).length} component types\n`);
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
+  const page = await context.newPage();
+
+  // Login
+  const token = await login(page);
+  if (!token) {
+    console.error("Login failed!");
+    await browser.close();
+    return;
+  }
+
+  const results: ComponentTestResult[] = [];
+  const componentTypes = Object.keys(COMPONENT_SCREEN_MAP);
+
+  for (let i = 0; i < componentTypes.length; i++) {
+    const componentType = componentTypes[i];
+    const screenId = COMPONENT_SCREEN_MAP[componentType];
+    console.log(`\n[${i + 1}/${componentTypes.length}] Testing: ${componentType} (screen: ${screenId})`);
+
+    const result = await testComponentConfigPanel(page, componentType, screenId);
+    results.push(result);
+
+    const statusEmoji = {
+      pass: "OK",
+      fail: "FAIL",
+      no_panel: "NO_PANEL",
+      not_found: "NOT_FOUND",
+      error: "ERROR",
+    }[result.status];
+    console.log(`  Result: ${statusEmoji} ${result.errorMessage || ""}`);
+
+    // Clear console listeners for next iteration
+    page.removeAllListeners("console");
+    page.removeAllListeners("pageerror");
+  }
+
+  await browser.close();
+
+  // Write results
+  const reportPath = path.join(OUTPUT_DIR, "audit-results.json");
+  fs.writeFileSync(reportPath, JSON.stringify(results, null, 2));
+
+  // Summary
+  console.log("\n\n=== AUDIT SUMMARY ===");
+  const passed = results.filter((r) => r.status === "pass");
+  const failed = results.filter((r) => r.status === "fail");
+  const errors = results.filter((r) => r.status === "error");
+  const notFound = results.filter((r) => r.status === "not_found");
+
+  console.log(`PASS: ${passed.length}`);
+  console.log(`FAIL: ${failed.length}`);
+  console.log(`ERROR: ${errors.length}`);
+  console.log(`NOT_FOUND: ${notFound.length}`);
+
+  if (failed.length > 0) {
+    console.log("\n--- FAILED Components ---");
+    failed.forEach((r) => {
+      console.log(`  ${r.componentType} (screen: ${r.screenId}): ${r.errorMessage}`);
+    });
+  }
+
+  if (errors.length > 0) {
+    console.log("\n--- ERROR Components ---");
+    errors.forEach((r) => {
+      console.log(`  ${r.componentType} (screen: ${r.screenId}): ${r.errorMessage}`);
+    });
+  }
+
+  // Write markdown report
+  const mdReport = generateMarkdownReport(results);
+  fs.writeFileSync(path.join(OUTPUT_DIR, "audit-report.md"), mdReport);
+  console.log(`\nReport saved to ${OUTPUT_DIR}/audit-report.md`);
+}
+
+function generateMarkdownReport(results: ComponentTestResult[]): string {
+  const lines: string[] = [];
+  lines.push("# Config Panel Audit Report");
+  lines.push(`\nDate: ${new Date().toISOString()}`);
+  lines.push(`\nTotal: ${results.length} components tested\n`);
+
+  const passed = results.filter((r) => r.status === "pass");
+  const failed = results.filter((r) => r.status === "fail");
+  const errors = results.filter((r) => r.status === "error");
+  const notFound = results.filter((r) => r.status === "not_found");
+
+  lines.push(`| Status | Count |`);
+  lines.push(`|--------|-------|`);
+  lines.push(`| PASS | ${passed.length} |`);
+  lines.push(`| FAIL | ${failed.length} |`);
+  lines.push(`| ERROR | ${errors.length} |`);
+  lines.push(`| NOT_FOUND | ${notFound.length} |`);
+
+  lines.push(`\n## Failed Components\n`);
+  if (failed.length === 0) {
+    lines.push("None\n");
+  } else {
+    lines.push(`| Component | Screen ID | Error |`);
+    lines.push(`|-----------|-----------|-------|`);
+    failed.forEach((r) => {
+      lines.push(`| ${r.componentType} | ${r.screenId} | ${(r.errorMessage || "").substring(0, 100)} |`);
+    });
+  }
+
+  lines.push(`\n## Error Components\n`);
+  if (errors.length === 0) {
+    lines.push("None\n");
+  } else {
+    lines.push(`| Component | Screen ID | Error |`);
+    lines.push(`|-----------|-----------|-------|`);
+    errors.forEach((r) => {
+      lines.push(`| ${r.componentType} | ${r.screenId} | ${(r.errorMessage || "").substring(0, 100)} |`);
+    });
+  }
+
+  lines.push(`\n## Not Found Components\n`);
+  if (notFound.length === 0) {
+    lines.push("None\n");
+  } else {
+    notFound.forEach((r) => {
+      lines.push(`- ${r.componentType} (screen: ${r.screenId}): ${r.errorMessage}`);
+    });
+  }
+
+  lines.push(`\n## All Results\n`);
+  lines.push(`| # | Component | Screen | Status | Config Panel | Error |`);
+  lines.push(`|---|-----------|--------|--------|--------------|-------|`);
+  results.forEach((r, i) => {
+    const status = r.status.toUpperCase();
+    lines.push(
+      `| ${i + 1} | ${r.componentType} | ${r.screenId} | ${status} | ${r.hasConfigPanel ? "Yes" : "No"} | ${(r.errorMessage || "-").substring(0, 80)} |`
+    );
+  });
+
+  return lines.join("\n");
+}
+
+main().catch(console.error);
diff --git a/test-output/config-panel-audit/quick-check.ts b/test-output/config-panel-audit/quick-check.ts
new file mode 100644
index 00000000..c337496f
--- /dev/null
+++ b/test-output/config-panel-audit/quick-check.ts
@@ -0,0 +1,139 @@
+import { chromium } from "playwright";
+import * as fs from "fs";
+import * as path from "path";
+
+const BASE = "http://localhost:9771";
+const OUT = path.join(__dirname);
+
+async function main() {
+  const browser = await chromium.launch({ headless: true });
+  const ctx = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
+  const page = await ctx.newPage();
+
+  const jsErrors: string[] = [];
+  page.on("pageerror", (e) => jsErrors.push(e.message));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") jsErrors.push("[console.error] " + msg.text().substring(0, 200));
+  });
+
+  // 1) Login
+  console.log("1) Logging in...");
+  await page.goto(`${BASE}/login`);
+  await page.waitForLoadState("networkidle");
+  await page.waitForTimeout(3000);
+  await page.fill('[placeholder="사용자 ID를 입력하세요"]', "wace");
+  await page.fill('[placeholder="비밀번호를 입력하세요"]', "qlalfqjsgh11");
+  await page.click('button:has-text("로그인")');
+  await page.waitForTimeout(6000);
+  await page.screenshot({ path: path.join(OUT, "01-after-login.png") });
+  console.log("   URL after login:", page.url());
+
+  // 2) Open designer for screen 60 (has v2-input)
+  console.log("\n2) Opening designer for screen 60...");
+  await page.evaluate(() => {
+    sessionStorage.setItem("erp-tab-store", JSON.stringify({
+      state: { tabs: [{ id: "t", title: "화면관리", path: "/admin/screenMng/screenMngList", isActive: true, isPinned: false }], activeTabId: "t" },
+      version: 0,
+    }));
+  });
+  await page.goto(`${BASE}/admin/screenMng/screenMngList?openDesigner=60`, { waitUntil: "domcontentloaded", timeout: 60000 });
+  await page.waitForTimeout(12000);
+  await page.screenshot({ path: path.join(OUT, "02-designer-loaded.png") });
+
+  // 3) Check DOM for components
+  const domInfo = await page.evaluate(() => {
+    const compWrappers = document.querySelectorAll("[data-component-id]");
+    const ids = Array.from(compWrappers).map(el => el.getAttribute("data-component-id"));
+    const bodyText = document.body.innerText.substring(0, 500);
+    const hasCanvas = !!document.querySelector('[class*="canvas"], [class*="designer-content"]');
+    const allClasses = Array.from(document.querySelectorAll("[class]"))
+      .map(el => el.className)
+      .filter(c => typeof c === "string" && (c.includes("canvas") || c.includes("designer") || c.includes("panel")))
+      .slice(0, 20);
+    return { componentIds: ids, hasCanvas, bodyTextPreview: bodyText, relevantClasses: allClasses };
+  });
+
+  console.log("   Components in DOM:", domInfo.componentIds.length);
+  console.log("   Component IDs:", domInfo.componentIds.slice(0, 10));
+  console.log("   Has canvas:", domInfo.hasCanvas);
+  console.log("   Relevant classes:", domInfo.relevantClasses.slice(0, 5));
+
+  // 4) If components found, click the first one
+  if (domInfo.componentIds.length > 0) {
+    const firstId = domInfo.componentIds[0];
+    console.log(`\n3) Clicking component: ${firstId}`);
+    try {
+      await page.click(`[data-component-id="${firstId}"]`, { force: true, timeout: 5000 });
+      await page.waitForTimeout(3000);
+      await page.screenshot({ path: path.join(OUT, "03-component-clicked.png") });
+
+      // Check right panel
+      const panelInfo = await page.evaluate(() => {
+        const labels = document.querySelectorAll("label");
+        const inputs = document.querySelectorAll("input");
+        const selects = document.querySelectorAll('[role="combobox"]');
+        const tabs = document.querySelectorAll('[role="tab"]');
+        const switches = document.querySelectorAll('[role="switch"]');
+        const rightPanel = document.querySelector('[class*="right"], [class*="sidebar"], [class*="properties"]');
+
+        return {
+          labels: labels.length,
+          inputs: inputs.length,
+          selects: selects.length,
+          tabs: tabs.length,
+          switches: switches.length,
+          hasRightPanel: !!rightPanel,
+          rightPanelText: rightPanel?.textContent?.substring(0, 300) || "(no panel found)",
+          errorTexts: Array.from(document.querySelectorAll('[class*="error"], [class*="destructive"]'))
+            .map(el => (el as HTMLElement).innerText?.substring(0, 100))
+            .filter(t => t && t.length > 0),
+        };
+      });
+
+      console.log("   Panel info:", JSON.stringify(panelInfo, null, 2));
+    } catch (e: any) {
+      console.log("   Click failed:", e.message.substring(0, 100));
+    }
+  } else {
+    console.log("\n   No components found in DOM - designer may not have loaded");
+    console.log("   Body preview:", domInfo.bodyTextPreview.substring(0, 200));
+  }
+
+  // 5) Try clicking on different areas of the page to find components
+  if (domInfo.componentIds.length === 0) {
+    console.log("\n4) Trying to find canvas area by clicking...");
+    // Take full page screenshot to see what's there
+    await page.screenshot({ path: path.join(OUT, "04-full-page.png"), fullPage: true });
+    
+    // Get viewport-based content
+    const pageStructure = await page.evaluate(() => {
+      const allElements = document.querySelectorAll("div, section, main, aside");
+      const structure: string[] = [];
+      allElements.forEach(el => {
+        const rect = el.getBoundingClientRect();
+        if (rect.width > 100 && rect.height > 100) {
+          const cls = el.className?.toString().substring(0, 50) || "";
+          const id = el.id || "";
+          structure.push(`${el.tagName}#${id}.${cls} [${Math.round(rect.x)},${Math.round(rect.y)} ${Math.round(rect.width)}x${Math.round(rect.height)}]`);
+        }
+      });
+      return structure.slice(0, 30);
+    });
+    console.log("   Large elements:");
+    pageStructure.forEach(s => console.log("     " + s));
+  }
+
+  // Summary
+  console.log("\n\n=== SUMMARY ===");
+  console.log(`JS Errors: ${jsErrors.length}`);
+  if (jsErrors.length > 0) {
+    const unique = [...new Set(jsErrors)];
+    console.log("Unique errors:");
+    unique.slice(0, 20).forEach(e => console.log("  " + e.substring(0, 200)));
+  }
+
+  await browser.close();
+  console.log("\nScreenshots saved to:", OUT);
+}
+
+main().catch(console.error);
diff --git a/test-output/config-panel-audit/results.json b/test-output/config-panel-audit/results.json
new file mode 100644
index 00000000..228ae11a
--- /dev/null
+++ b/test-output/config-panel-audit/results.json
@@ -0,0 +1,308 @@
+[
+  {
+    "type": "v2-input",
+    "screenId": 60,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-select",
+    "screenId": 71,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-date",
+    "screenId": 77,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "flow-widget",
+    "screenId": 77,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-button-primary",
+    "screenId": 50,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-text-display",
+    "screenId": 114,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-table-list",
+    "screenId": 68,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-table-search-widget",
+    "screenId": 79,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-media",
+    "screenId": 74,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-split-panel-layout",
+    "screenId": 74,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-tabs-widget",
+    "screenId": 1011,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-section-card",
+    "screenId": 1188,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-repeater",
+    "screenId": 1188,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-section-paper",
+    "screenId": 202,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-card-display",
+    "screenId": 83,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-numbering-rule",
+    "screenId": 130,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-divider-line",
+    "screenId": 1195,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-location-swap-selector",
+    "screenId": 1195,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-category-manager",
+    "screenId": 135,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-file-upload",
+    "screenId": 138,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-pivot-grid",
+    "screenId": 2327,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-rack-structure",
+    "screenId": 1575,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-repeat-container",
+    "screenId": 2403,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-split-line",
+    "screenId": 4151,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-bom-item-editor",
+    "screenId": 4154,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-process-work-standard",
+    "screenId": 4158,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "v2-aggregation-widget",
+    "screenId": 4119,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "entity-search-input",
+    "screenId": 3986,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "textarea-basic",
+    "screenId": 3986,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "select-basic",
+    "screenId": 4470,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "selected-items-detail-input",
+    "screenId": 227,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "screen-split-panel",
+    "screenId": 1674,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "split-panel-layout2",
+    "screenId": 2089,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  },
+  {
+    "type": "universal-form-modal",
+    "screenId": 2180,
+    "compId": "",
+    "status": "NO_COMPONENT",
+    "jsErrors": [],
+    "panelDetails": "",
+    "errorMsg": "Component not found in layout API data"
+  }
+]
\ No newline at end of file
diff --git a/test-output/config-panel-audit/run-audit.ts b/test-output/config-panel-audit/run-audit.ts
new file mode 100644
index 00000000..110c2443
--- /dev/null
+++ b/test-output/config-panel-audit/run-audit.ts
@@ -0,0 +1,287 @@
+import { chromium, Page } from "playwright";
+import * as fs from "fs";
+import * as path from "path";
+
+const BASE = "http://localhost:9771";
+const OUT = path.join(__dirname);
+
+const TARGETS: [string, number][] = [
+  ["v2-input", 60],
+  ["v2-select", 71],
+  ["v2-date", 77],
+  ["v2-button-primary", 50],
+  ["v2-text-display", 114],
+  ["v2-table-list", 68],
+  ["v2-table-search-widget", 79],
+  ["v2-media", 74],
+  ["v2-split-panel-layout", 74],
+  ["v2-tabs-widget", 1011],
+  ["v2-section-card", 1188],
+  ["v2-section-paper", 202],
+  ["v2-card-display", 83],
+  ["v2-numbering-rule", 130],
+  ["v2-repeater", 1188],
+  ["v2-divider-line", 1195],
+  ["v2-location-swap-selector", 1195],
+  ["v2-category-manager", 135],
+  ["v2-file-upload", 138],
+  ["v2-pivot-grid", 2327],
+  ["v2-rack-structure", 1575],
+  ["v2-repeat-container", 2403],
+  ["v2-split-line", 4151],
+  ["v2-bom-item-editor", 4154],
+  ["v2-process-work-standard", 4158],
+  ["v2-aggregation-widget", 4119],
+  ["flow-widget", 77],
+  ["entity-search-input", 3986],
+  ["select-basic", 4470],
+  ["textarea-basic", 3986],
+  ["selected-items-detail-input", 227],
+  ["screen-split-panel", 1674],
+  ["split-panel-layout2", 2089],
+  ["universal-form-modal", 2180],
+];
+
+interface Result {
+  type: string;
+  screenId: number;
+  compId: string;
+  status: "PASS" | "FAIL" | "ERROR" | "NO_COMPONENT";
+  jsErrors: string[];
+  panelDetails: string;
+  errorMsg?: string;
+}
+
+async function login(page: Page) {
+  await page.goto(`${BASE}/login`);
+  await page.waitForLoadState("networkidle");
+  await page.waitForTimeout(2000);
+  await page.fill('[placeholder="사용자 ID를 입력하세요"]', "wace");
+  await page.fill('[placeholder="비밀번호를 입력하세요"]', "qlalfqjsgh11");
+
+  await Promise.all([
+    page.waitForResponse((r) => r.url().includes("/auth/login"), { timeout: 15000 }).catch(() => null),
+    page.click('button:has-text("로그인")'),
+  ]);
+  await page.waitForTimeout(5000);
+
+  const hasToken = await page.evaluate(() => !!localStorage.getItem("authToken"));
+  console.log("Login:", hasToken ? "OK" : "FAILED");
+  return hasToken;
+}
+
+async function getLayoutComponents(page: Page, screenId: number): Promise<any[]> {
+  return page.evaluate(async (sid) => {
+    const token = localStorage.getItem("authToken") || "";
+    const host = window.location.hostname;
+    const apiBase = host === "localhost" || host === "127.0.0.1"
+      ? "http://localhost:8080/api"
+      : "/api";
+    try {
+      const resp = await fetch(`${apiBase}/screen-management/screens/${sid}/layout-v2`, {
+        headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      });
+      const data = await resp.json();
+      if (data.success && data.data?.components) return data.data.components;
+      if (data.success && Array.isArray(data.data)) {
+        const all: any[] = [];
+        for (const layer of data.data) {
+          if (layer.layout_data?.components) all.push(...layer.layout_data.components);
+        }
+        return all;
+      }
+      return [];
+    } catch { return []; }
+  }, screenId);
+}
+
+function findCompId(components: any[], targetType: string): string {
+  for (const c of components) {
+    const url: string = c.url || "";
+    const ctype: string = c.componentType || "";
+    if (url.endsWith("/" + targetType) || ctype === targetType) return c.id;
+  }
+  return "";
+}
+
+async function openDesigner(page: Page, screenId: number) {
+  await page.evaluate(() => {
+    sessionStorage.setItem("erp-tab-store", JSON.stringify({
+      state: {
+        tabs: [{ id: "tab-sm", title: "화면 관리", path: "/admin/screenMng/screenMngList", isActive: true, isPinned: false }],
+        activeTabId: "tab-sm",
+      },
+      version: 0,
+    }));
+  });
+  await page.goto(`${BASE}/admin/screenMng/screenMngList?openDesigner=${screenId}`, {
+    timeout: 60000, waitUntil: "domcontentloaded",
+  });
+  await page.waitForTimeout(10000);
+}
+
+async function checkPanel(page: Page): Promise<{ visible: boolean; hasError: boolean; detail: string }> {
+  return page.evaluate(() => {
+    const body = document.body.innerText || "";
+    const hasError = body.includes("로드 실패") || body.includes("Cannot read properties");
+
+    const labels = document.querySelectorAll("label").length;
+    const inputs = document.querySelectorAll('input:not([type="hidden"])').length;
+    const selects = document.querySelectorAll('select, [role="combobox"], [role="listbox"]').length;
+    const tabs = document.querySelectorAll('[role="tab"]').length;
+    const switches = document.querySelectorAll('[role="switch"]').length;
+
+    const total = labels + inputs + selects + tabs + switches;
+    const detail = `L=${labels} I=${inputs} S=${selects} T=${tabs} SW=${switches}`;
+    return { visible: total > 3, hasError, detail };
+  });
+}
+
+async function main() {
+  console.log("=== Config Panel Audit v3 ===\n");
+
+  const browser = await chromium.launch({ headless: true });
+  const ctx = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
+  const page = await ctx.newPage();
+
+  const jsErrors: string[] = [];
+  page.on("pageerror", (err) => jsErrors.push(err.message.substring(0, 300)));
+
+  const ok = await login(page);
+  if (!ok) { await browser.close(); return; }
+
+  const groups = new Map<number, string[]>();
+  for (const [type, sid] of TARGETS) {
+    if (!groups.has(sid)) groups.set(sid, []);
+    groups.get(sid)!.push(type);
+  }
+
+  const allResults: Result[] = [];
+  const entries = Array.from(groups.entries());
+
+  for (let i = 0; i < entries.length; i++) {
+    const [screenId, types] = entries[i];
+    console.log(`\n[${i + 1}/${entries.length}] Screen ${screenId}: ${types.join(", ")}`);
+
+    const components = await getLayoutComponents(page, screenId);
+    console.log(`  API: ${components.length} comps`);
+
+    await openDesigner(page, screenId);
+
+    const domCompCount = await page.locator('[data-component-id]').count();
+    console.log(`  DOM: ${domCompCount} comp wrappers`);
+
+    for (const targetType of types) {
+      const errIdx = jsErrors.length;
+      const compId = findCompId(components, targetType);
+
+      if (!compId) {
+        console.log(`  ${targetType}: NO_COMPONENT`);
+        allResults.push({ type: targetType, screenId, compId: "", status: "NO_COMPONENT", jsErrors: [], panelDetails: "", errorMsg: "Not in layout" });
+        continue;
+      }
+
+      // 컴포넌트 클릭
+      let clicked = false;
+      const sel = `[data-component-id="${compId}"], #component-${compId}`;
+      const elCount = await page.locator(sel).count();
+      if (elCount > 0) {
+        try {
+          await page.locator(sel).first().click({ force: true, timeout: 5000 });
+          await page.waitForTimeout(2000);
+          clicked = true;
+        } catch {
+          try {
+            await page.locator(sel).first().dispatchEvent("click");
+            await page.waitForTimeout(2000);
+            clicked = true;
+          } catch {}
+        }
+      }
+
+      if (!clicked) {
+        // fallback: 캔버스에서 위치 기반 클릭 시도
+        const comp = components.find((c: any) => c.id === compId);
+        if (comp?.position) {
+          const canvasEl = await page.locator('[class*="canvas"], [class*="designer"]').first().boundingBox();
+          if (canvasEl) {
+            const x = canvasEl.x + (comp.position.x || 100);
+            const y = canvasEl.y + (comp.position.y || 100);
+            await page.mouse.click(x, y);
+            await page.waitForTimeout(2000);
+            clicked = true;
+          }
+        }
+      }
+
+      if (!clicked) {
+        console.log(`  ${targetType}: ERROR (click fail, id=${compId})`);
+        allResults.push({ type: targetType, screenId, compId, status: "ERROR", jsErrors: jsErrors.slice(errIdx), panelDetails: "", errorMsg: "Cannot click component" });
+        continue;
+      }
+
+      const panel = await checkPanel(page);
+      const newErrors = jsErrors.slice(errIdx);
+      const critical = newErrors.find((e) =>
+        e.includes("Cannot read") || e.includes("is not a function") || e.includes("is not defined") || e.includes("Minified React")
+      );
+
+      let status: Result["status"];
+      let errorMsg: string | undefined;
+
+      if (panel.hasError || critical) {
+        status = "FAIL";
+        errorMsg = critical || "Panel error";
+      } else if (!panel.visible) {
+        status = "FAIL";
+        errorMsg = `Panel not visible (${panel.detail})`;
+      } else {
+        status = "PASS";
+      }
+
+      const icon = { PASS: "OK", FAIL: "FAIL", ERROR: "ERR", NO_COMPONENT: "??" }[status];
+      console.log(`  ${targetType}: ${icon} [${panel.detail}]${errorMsg ? " " + errorMsg.substring(0, 80) : ""}`);
+
+      if (status === "FAIL") {
+        await page.screenshot({ path: path.join(OUT, `fail-${targetType.replace(/\//g, "_")}.png`) }).catch(() => {});
+      }
+
+      allResults.push({ type: targetType, screenId, compId, status, jsErrors: newErrors, panelDetails: panel.detail, errorMsg });
+    }
+  }
+
+  await browser.close();
+
+  fs.writeFileSync(path.join(OUT, "results.json"), JSON.stringify(allResults, null, 2));
+
+  console.log("\n\n=== AUDIT SUMMARY ===");
+  const p = allResults.filter((r) => r.status === "PASS");
+  const f = allResults.filter((r) => r.status === "FAIL");
+  const e = allResults.filter((r) => r.status === "ERROR");
+  const n = allResults.filter((r) => r.status === "NO_COMPONENT");
+
+  console.log(`Total: ${allResults.length}`);
+  console.log(`PASS:         ${p.length}`);
+  console.log(`FAIL:         ${f.length}`);
+  console.log(`ERROR:        ${e.length}`);
+  console.log(`NO_COMPONENT: ${n.length}`);
+
+  if (f.length > 0) {
+    console.log("\n--- FAILED ---");
+    f.forEach((r) => console.log(`  ${r.type} (screen ${r.screenId}): ${r.errorMsg}`));
+  }
+  if (e.length > 0) {
+    console.log("\n--- ERRORS ---");
+    e.forEach((r) => console.log(`  ${r.type} (screen ${r.screenId}): ${r.errorMsg}`));
+  }
+
+  const unique = [...new Set(jsErrors)];
+  if (unique.length > 0) {
+    console.log(`\n--- JS Errors (${unique.length} unique) ---`);
+    unique.slice(0, 15).forEach((err) => console.log(`  ${err.substring(0, 150)}`));
+  }
+
+  console.log("\nDone.");
+}
+
+main().catch(console.error);
diff --git a/test-output/config-panel-audit/screen-1011.png b/test-output/config-panel-audit/screen-1011.png
new file mode 100644
index 00000000..b4b8ced5
Binary files /dev/null and b/test-output/config-panel-audit/screen-1011.png differ
diff --git a/test-output/config-panel-audit/screen-114.png b/test-output/config-panel-audit/screen-114.png
new file mode 100644
index 00000000..52247ea5
Binary files /dev/null and b/test-output/config-panel-audit/screen-114.png differ
diff --git a/test-output/config-panel-audit/screen-1188.png b/test-output/config-panel-audit/screen-1188.png
new file mode 100644
index 00000000..b5a5da4b
Binary files /dev/null and b/test-output/config-panel-audit/screen-1188.png differ
diff --git a/test-output/config-panel-audit/screen-1195.png b/test-output/config-panel-audit/screen-1195.png
new file mode 100644
index 00000000..b4b8ced5
Binary files /dev/null and b/test-output/config-panel-audit/screen-1195.png differ
diff --git a/test-output/config-panel-audit/screen-130.png b/test-output/config-panel-audit/screen-130.png
new file mode 100644
index 00000000..de52ef7d
Binary files /dev/null and b/test-output/config-panel-audit/screen-130.png differ
diff --git a/test-output/config-panel-audit/screen-135.png b/test-output/config-panel-audit/screen-135.png
new file mode 100644
index 00000000..077a8dae
Binary files /dev/null and b/test-output/config-panel-audit/screen-135.png differ
diff --git a/test-output/config-panel-audit/screen-138.png b/test-output/config-panel-audit/screen-138.png
new file mode 100644
index 00000000..7ffdaccd
Binary files /dev/null and b/test-output/config-panel-audit/screen-138.png differ
diff --git a/test-output/config-panel-audit/screen-1575.png b/test-output/config-panel-audit/screen-1575.png
new file mode 100644
index 00000000..12e26e6a
Binary files /dev/null and b/test-output/config-panel-audit/screen-1575.png differ
diff --git a/test-output/config-panel-audit/screen-1674.png b/test-output/config-panel-audit/screen-1674.png
new file mode 100644
index 00000000..b4b8ced5
Binary files /dev/null and b/test-output/config-panel-audit/screen-1674.png differ
diff --git a/test-output/config-panel-audit/screen-202.png b/test-output/config-panel-audit/screen-202.png
new file mode 100644
index 00000000..b4b8ced5
Binary files /dev/null and b/test-output/config-panel-audit/screen-202.png differ
diff --git a/test-output/config-panel-audit/screen-2089.png b/test-output/config-panel-audit/screen-2089.png
new file mode 100644
index 00000000..188bcd2b
Binary files /dev/null and b/test-output/config-panel-audit/screen-2089.png differ
diff --git a/test-output/config-panel-audit/screen-2180.png b/test-output/config-panel-audit/screen-2180.png
new file mode 100644
index 00000000..a2619946
Binary files /dev/null and b/test-output/config-panel-audit/screen-2180.png differ
diff --git a/test-output/config-panel-audit/screen-227.png b/test-output/config-panel-audit/screen-227.png
new file mode 100644
index 00000000..338d1ca4
Binary files /dev/null and b/test-output/config-panel-audit/screen-227.png differ
diff --git a/test-output/config-panel-audit/screen-2327.png b/test-output/config-panel-audit/screen-2327.png
new file mode 100644
index 00000000..57b25011
Binary files /dev/null and b/test-output/config-panel-audit/screen-2327.png differ
diff --git a/test-output/config-panel-audit/screen-2403.png b/test-output/config-panel-audit/screen-2403.png
new file mode 100644
index 00000000..1928e5c8
Binary files /dev/null and b/test-output/config-panel-audit/screen-2403.png differ
diff --git a/test-output/config-panel-audit/screen-3986.png b/test-output/config-panel-audit/screen-3986.png
new file mode 100644
index 00000000..f20152f9
Binary files /dev/null and b/test-output/config-panel-audit/screen-3986.png differ
diff --git a/test-output/config-panel-audit/screen-4119.png b/test-output/config-panel-audit/screen-4119.png
new file mode 100644
index 00000000..b4b8ced5
Binary files /dev/null and b/test-output/config-panel-audit/screen-4119.png differ
diff --git a/test-output/config-panel-audit/screen-4151.png b/test-output/config-panel-audit/screen-4151.png
new file mode 100644
index 00000000..b4b8ced5
Binary files /dev/null and b/test-output/config-panel-audit/screen-4151.png differ
diff --git a/test-output/config-panel-audit/screen-4154.png b/test-output/config-panel-audit/screen-4154.png
new file mode 100644
index 00000000..1928e5c8
Binary files /dev/null and b/test-output/config-panel-audit/screen-4154.png differ
diff --git a/test-output/config-panel-audit/screen-4158.png b/test-output/config-panel-audit/screen-4158.png
new file mode 100644
index 00000000..1928e5c8
Binary files /dev/null and b/test-output/config-panel-audit/screen-4158.png differ
diff --git a/test-output/config-panel-audit/screen-4470.png b/test-output/config-panel-audit/screen-4470.png
new file mode 100644
index 00000000..b9b1622e
Binary files /dev/null and b/test-output/config-panel-audit/screen-4470.png differ
diff --git a/test-output/config-panel-audit/screen-50.png b/test-output/config-panel-audit/screen-50.png
new file mode 100644
index 00000000..9f25f744
Binary files /dev/null and b/test-output/config-panel-audit/screen-50.png differ
diff --git a/test-output/config-panel-audit/screen-68.png b/test-output/config-panel-audit/screen-68.png
new file mode 100644
index 00000000..988857dc
Binary files /dev/null and b/test-output/config-panel-audit/screen-68.png differ
diff --git a/test-output/config-panel-audit/screen-74.png b/test-output/config-panel-audit/screen-74.png
new file mode 100644
index 00000000..738c87de
Binary files /dev/null and b/test-output/config-panel-audit/screen-74.png differ
diff --git a/test-output/config-panel-audit/screen-77.png b/test-output/config-panel-audit/screen-77.png
new file mode 100644
index 00000000..24292896
Binary files /dev/null and b/test-output/config-panel-audit/screen-77.png differ
diff --git a/test-output/config-panel-audit/screen-79.png b/test-output/config-panel-audit/screen-79.png
new file mode 100644
index 00000000..82dd3b5f
Binary files /dev/null and b/test-output/config-panel-audit/screen-79.png differ
diff --git a/test-output/config-panel-audit/screen-83.png b/test-output/config-panel-audit/screen-83.png
new file mode 100644
index 00000000..acc43f82
Binary files /dev/null and b/test-output/config-panel-audit/screen-83.png differ
diff --git a/test-output/unified-field-type-config-panel-test-guide.md b/test-output/unified-field-type-config-panel-test-guide.md
new file mode 100644
index 00000000..11ed2711
--- /dev/null
+++ b/test-output/unified-field-type-config-panel-test-guide.md
@@ -0,0 +1,178 @@
+# 통합 필드 타입 Config Panel 테스트 가이드
+
+## 테스트 대상
+- **컴포넌트:** V2FieldConfigPanel (통합 필드 설정 패널)
+- **위치:** `frontend/components/v2/config-panels/V2FieldConfigPanel.tsx`
+- **연결:** v2-input, v2-select 컴포넌트 선택 시 오른쪽 속성 패널에 표시
+
+## 7개 필드 타입 카드
+| 카드 | value | 설명 |
+|------|-------|------|
+| 텍스트 | text | 일반 텍스트 입력 |
+| 숫자 | number | 숫자만 입력 |
+| 여러 줄 | textarea | 긴 텍스트 입력 |
+| 셀렉트 | select | 직접 옵션 선택 |
+| 카테고리 | category | 등록된 선택지 |
+| 테이블 참조 | entity | 다른 테이블 참조 |
+| 채번 | numbering | 자동 번호 생성 |
+
+---
+
+## 테스트 절차
+
+### 1단계: 로그인
+1. 브라우저에서 `http://localhost:9771/login` 접속
+2. 로그인 정보:
+   - **User ID:** `admin`
+   - **Password:** `wace1234!`
+3. "로그인" 버튼 클릭
+4. 페이지 로드 완료까지 대기 (약 3~5초)
+
+**확인:** 로그인 성공 시 메인 대시보드 또는 홈 화면으로 이동
+
+---
+
+### 2단계: 화면 디자이너 열기
+
+**경로 1 (권장):**
+- 사이드바에서 **"화면 관리"** 또는 **"화면 설정"** 메뉴 클릭
+- 화면 목록에서 기존 화면 선택 후 **"설계"** 또는 **"편집"** 버튼 클릭
+
+**경로 2 (URL 직접):**
+- `http://localhost:9771/admin/screenMng/screenMngList` 접속
+- 화면 목록에서 화면 선택 후 설계 버튼 클릭
+
+**경로 3 (특정 화면 직접):**
+- `http://localhost:9771/admin/screenMng/screenMngList?openDesigner=60` 접속
+- (60은 화면 ID - 존재하는 화면 ID로 변경)
+
+**확인:** 화면 디자이너가 전체 화면으로 열림 (캔버스, 좌측 컴포넌트 목록, 오른쪽 속성 패널)
+
+---
+
+### 3단계: v2-input 컴포넌트 찾기 및 선택
+
+**v2-input 컴포넌트 찾기:**
+- v2-input은 주로 **테이블 컬럼을 캔버스로 드래그**할 때 자동 생성됨
+- 또는 좌측 패널에서 "입력" 관련 컴포넌트를 드래그하여 배치
+- 캔버스에 있는 **텍스트 입력 필드**를 클릭
+
+**v2-input 식별:**
+- 선택 시 오른쪽 패널에 "이 필드는 어떤 유형인가요?" 문구와 7개 카드가 보이면 v2-input
+- 레거시 위젯은 "입력 타입", "세부 타입 선택" 등 다른 UI
+
+**확인:** v2-input 선택 시 오른쪽 패널에 7개 카드 표시
+
+---
+
+### 4단계: 7개 카드 확인
+
+오른쪽 속성 패널에서 다음 7개 카드가 **3열 그리드**로 표시되는지 확인:
+
+1. **텍스트** - "일반 텍스트 입력"
+2. **숫자** - "숫자만 입력"
+3. **여러 줄** - "긴 텍스트 입력"
+4. **셀렉트** - "직접 옵션 선택"
+5. **카테고리** - "등록된 선택지"
+6. **테이블 참조** - "다른 테이블 참조"
+7. **채번** - "자동 번호 생성"
+
+**확인:** 7개 카드 모두 표시, 선택된 카드에 파란색 테두리/배경
+
+---
+
+### 5단계: 셀렉트 카드 클릭 테스트
+
+1. **텍스트** 카드가 선택된 상태에서 시작 (기본값)
+2. **셀렉트** 카드 클릭
+3. 아래 상세 설정이 **텍스트용**에서 **셀렉트용**으로 바뀌는지 확인
+
+**텍스트 선택 시 표시:**
+- "안내 텍스트" (placeholder) 입력 필드
+- "입력 형식" (선택사항)
+- "최대 길이" 등
+
+**셀렉트 선택 시 표시:**
+- "옵션 목록" 섹션
+- "추가" 버튼
+- "아직 옵션이 없어요" 또는 옵션 목록
+- "기본 선택값" 드롭다운
+
+**확인:** 카드 클릭 시 상세 설정 영역이 해당 타입에 맞게 전환됨
+
+---
+
+### 6단계: 기타 카드 전환 테스트
+
+| 클릭 카드 | 예상 상세 설정 |
+|-----------|----------------|
+| 숫자 | 최소/최대값, 단위, 슬라이더 등 |
+| 여러 줄 | 줄 수 설정 |
+| 카테고리 | 테이블/컬럼 정보, 카테고리 값 목록 |
+| 테이블 참조 | 참조 테이블 선택, 값/라벨 컬럼 |
+| 채번 | 메뉴 선택, 채번 규칙 선택 |
+
+**확인:** 각 카드 클릭 시 해당 타입의 상세 설정이 표시됨
+
+---
+
+## 예상 결과 요약
+
+### 정상 동작
+- [x] 로그인 성공
+- [x] 화면 디자이너 접근 가능
+- [x] v2-input 컴포넌트 선택 시 오른쪽 패널에 7개 카드 표시
+- [x] "셀렉트" 카드 클릭 시 옵션 목록 관리 UI로 전환
+- [x] 다른 카드 클릭 시 해당 타입의 상세 설정으로 전환
+
+### 오류 상황
+- **"로드 실패"** 메시지: ConfigPanel 동적 로드 실패
+- **"설정 패널 없음"** 메시지: v2-input 매핑 누락
+- **7개 카드 미표시:** V2FieldConfigPanel 대신 다른 패널이 렌더링됨
+- **카드 클릭 무반응:** handleFieldTypeChange 미동작 또는 config 업데이트 실패
+
+---
+
+## 코드 흐름 (참고)
+
+```
+ScreenDesigner
+  └─ V2PropertiesPanel (selectedComponent)
+       └─ hasComponentConfigPanel("v2-input") === true
+            └─ DynamicComponentConfigPanel (componentId="v2-input")
+                 └─ getComponentConfigPanel("v2-input")
+                      └─ import("@/components/v2/config-panels/V2FieldConfigPanel")
+                           └─ V2FieldConfigPanel (7 cards + handleFieldTypeChange)
+```
+
+---
+
+## 스크린샷 체크리스트
+
+1. **로그인 화면** - 로그인 전
+2. **화면 관리 목록** - 화면 디자이너 진입 전
+3. **화면 디자이너** - v2-input 미선택 상태
+4. **7개 카드 표시** - v2-input 선택 후 오른쪽 패널
+5. **셀렉트 상세 설정** - 셀렉트 카드 클릭 후
+6. **다른 타입 상세 설정** - 예: 채번 또는 테이블 참조
+
+---
+
+## 문제 발생 시 디버깅
+
+### Console 확인
+```javascript
+// 선택된 컴포넌트 타입 확인
+// React DevTools 또는 전역 상태에서
+console.log(selectedComponent?.componentConfig?.type);
+// "v2-input" 이어야 함
+```
+
+### Network 확인
+- `/api/admin/webTypes` - 200 OK
+- 화면 레이아웃 API - 200 OK
+
+### 컴포넌트가 v2-input이 아닌 경우
+- 테이블 컬럼을 캔버스로 드래그하면 v2-input 생성
+- 기존 화면에 레거시 text-input 등이 있으면 V2InputConfigPanel(5개 카드)이 표시될 수 있음
+- V2FieldConfigPanel은 **7개 카드** (텍스트, 숫자, 여러 줄, 셀렉트, 카테고리, 테이블 참조, 채번)